Design & Web · 4 min read
How to Create a Favicon for Your Website
A favicon is the tiny icon in your browser tab. It's a small detail that makes a big difference to professionalism and brand recognition. Here's everything you need to know.
Favicon Sizes You Need
| Size | Where It's Used | File Name |
|---|---|---|
| 16×16 px | Browser tab (standard) | favicon.ico |
| 32×32 px | Taskbar shortcuts, Windows | favicon-32x32.png |
| 180×180 px | Apple Touch Icon (iOS bookmark) | apple-touch-icon.png |
| 192×192 px | Android Chrome homescreen | android-chrome-192.png |
| 512×512 px | PWA splash screen | android-chrome-512.png |
How to Add a Favicon to Your HTML
<!-- Classic .ico (all browsers) --> <link rel="icon" type="image/x-icon" href="/favicon.ico"> <!-- Modern PNG sizes --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <!-- Apple Touch Icon (iOS home screen) --> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <!-- SVG favicon (modern browsers, scales perfectly) --> <link rel="icon" type="image/svg+xml" href="/favicon.svg">
Frequently Asked Questions
The small icon shown in browser tabs, bookmarks, and history next to your site's title. Usually 16×16 or 32×32 pixels.
16×16 for tabs, 32×32 for taskbar, 180×180 for iOS, 192×192 for Android. Use a generator to produce all sizes at once.
Add <link rel="icon" type="image/x-icon" href="/favicon.ico"> in your HTML <head>. For full multi-device support, add multiple sizes and an Apple Touch Icon.
Use PickConverter's free Favicon Generator. Upload an image or use text/emoji, then download .ico and .png files for all sizes.
Related Articles
🌐
Generate your favicon — free
All sizes: .ico, .png, Apple Touch Icon. No sign-up.
Open Favicon Generator →