Favicon Best Practices for 2026
The favicon checklist that covers every browser, every device, and every dark mode.
Favicons look trivial until you realize a brand-new site can need 8+ icon files to look right everywhere.
Minimum Viable Set
That covers most browsers and iOS home screen.
Why ICO Still Matters
favicon.ico is requested at /favicon.ico by default by every browser. Even if you specify SVG, fallback fetch happens. Ship a 32x32 ICO to silence 404s.
SVG: One File for All Sizes
A single SVG scales perfectly. Modern browsers prefer it. Embed CSS for dark mode:
The icon flips automatically when the browser is in dark mode.
Apple Touch Icon
iOS requires a separate 180x180 PNG. Without it, iOS uses a screenshot of your homepage as the home screen icon.
iOS also ignores transparent backgrounds — fill with your brand color.
Web Manifest
For PWAs and Android home screens:
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-mask.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}
The maskable purpose lets Android apply its own shape (circle, squircle).
Pixel Perfect Rendering
Below 24px, hand-tune. SVGs at 16px often look mushy; provide a dedicated 16x16 PNG when polish matters.
Cache Busting
Browsers aggressively cache favicons. When you update, change the filename (favicon-v2.svg) or attach a query string.
For generating optimized icon sets see the [Favicon Generator](https://sdk.is/favicon-generator).