How to create a favicon for your website: sizes, formats, and free generator
Complete guide to creating favicons. Required sizes, ICO vs PNG vs SVG, dark mode support, and free online generator.
What is a favicon and why every website needs one
A favicon (favorite icon) is the small icon in browser tabs, bookmarks, history, and mobile search results. One of the most visible elements of your site's identity.
Where it appears: Browser tab (16/32px), bookmarks bar, mobile home screen (180px), Google mobile results, PWA icons (192/512px).
Without one: Generic gray page icon = "unprofessional site."
Create your favicon with the NexTools favicon generator.
Required sizes and formats in 2026
| Size | Format | Use |
|---|---|---|
| 32x32 | PNG | Browser tab (retina) |
| 180x180 | PNG | Apple Touch Icon |
| 192x192 | PNG | Android/PWA |
| 512x512 | PNG | PWA splash, Google |
| SVG | SVG | Modern, scales, dark mode |
Minimum 2026: SVG + 32x32 PNG fallback + 180x180 Apple Touch Icon. The NexTools generator creates all sizes.
SVG favicon: the modern format with dark mode
SVG is ideal in 2026: scales perfectly, supports dark mode via CSS media query, tiny file size (~500 bytes), one file replaces 6+ PNGs.
Dark mode SVG:
<svg><style>path{fill:#1a1a1a}@media(prefers-color-scheme:dark){path{fill:#fff}}</style><path d="..."/></svg>
Supported: Chrome, Firefox, Edge, Safari 15+.
How to implement favicon in HTML
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
Next.js: Place favicon.ico and icon.svg in app/ folder. Auto-served.
For complete meta tags, use the NexTools meta tag generator.
Favicon design: making it look good at 16px
1. Extreme simplicity. One letter, geometric symbol, abstract icon.
2. High contrast. Solid colors, defined edges.
3. Test on different backgrounds. Light tabs, dark tabs, colored tabs.
4. Avoid long text. One or two letters max.
5. Pixel-hint at small sizes. Align edges to pixel grid.
Check favicon colors with the NexTools color converter.
How to use the NexTools favicon generator
The NexTools generator: upload image/logo, adjust crop and background, download all sizes (16-512px), copy HTML code. All processed in browser.
Favicon across platforms and devices
iOS: 180x180 PNG, no transparency (iOS adds rounded corners). No gloss effect since iOS 7.
Android: 192 + 512 in manifest.json. Can have transparency.
Google Search: Shows favicon in mobile results. Minimum 48x48, multiples of 48.
MacOS Safari: SVG with dark mode + pinned tab SVG.
Common favicon mistakes
1. Only favicon.ico. Legacy format, blurry on retina.
2. Transparent background on iOS. Gets black background. Use solid color.
3. Not handling cache. Add version query: favicon.svg?v=2.
4. Wrong sizes. 512px PNG as tab favicon wastes bandwidth.
5. Unrelated to brand. Must be recognizable at 16px.
Compress with the NexTools image compressor.
Try this tool:
Open tool→Frequently asked questions
What size should a favicon be
Minimum: 32x32 for tabs. Complete: 32x32, 180x180 (Apple), 192x192 + 512x512 (PWA). SVG covers all sizes in modern browsers.
ICO or PNG for favicon
PNG and SVG preferred in 2026. ICO is legacy. SVG is ideal (vector, dark mode). PNG as universal fallback.
How do I make a favicon work in dark mode
Use SVG with CSS media query: @media (prefers-color-scheme: dark) { path { fill: white; } }. Only SVG supports this.
Why doesn't my new favicon appear after changing it
Aggressive browser caching. Solutions: Ctrl+Shift+R, clear cache, add version to URL (favicon.svg?v=2), or wait.
Does the favicon appear in Google search results
Yes, on mobile. Minimum 48x48px. Professional favicon improves trust and CTR.
Can I use an emoji as a favicon
Yes, with SVG: <text y='32' font-size='32'>🔧</text>. Works in modern browsers but looks different across platforms.