When you have 20 tabs open, you end up identifying them by their favicons. That tiny icon carries more weight than you'd think. But when it's time to actually create one, you hit questions: what size? ICO or PNG? What about dark mode?
The Files You Actually Need
To cover all browsers and devices in 2026:
- favicon.ico — Multi-size (16x16, 32x32). Still needed for legacy browser support.
- favicon.svg — Vector, so it's sharp at any size. Supports dark mode via CSS.
- apple-touch-icon.png — 180x180. Used when someone adds your site to their iPhone home screen.
- favicon-32x32.png, favicon-16x16.png — PNG fallbacks for browsers that prefer them.
If you could only pick one? SVG. A single file handles every resolution, and you get dark mode support through embedded CSS media queries.
ICO vs PNG vs SVG
ICO bundles multiple sizes into one file. Convenient, but feels dated in 2026. Still worth keeping a favicon.ico at your site root for compatibility.
PNG supports transparency and works everywhere. Two sizes (32x32 and 16x16) are enough.
SVG is the modern choice. Resolution-independent, usually under 1KB, and supports CSS features. The only downside: no Internet Explorer support (but IE is already retired).
Dark Mode Favicons with SVG
The real power of SVG favicons is embedding CSS directly. This lets you change colors based on the user's color scheme preference:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
circle { fill: #2563eb; }
@media (prefers-color-scheme: dark) {
circle { fill: #60a5fa; }
}
</style>
<circle cx="16" cy="16" r="14"/>
</svg>
Dark blue in light mode, light blue in dark mode. Pure CSS, no JavaScript needed.
Design Tips
Keep it simple. Your favicon needs to be recognizable at 16x16 pixels. Shrinking your full logo usually results in a blurry mess. Extract the core shape or use a single letter instead.
Use transparent backgrounds. Solid backgrounds can clash with browser themes.
High contrast matters. At small sizes, low-contrast icons just look like a dot.
The HTML
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
Modern browsers pick SVG when available, older ones fall back to ICO. The sizes="any" tells the browser that the ICO file contains multiple resolutions.
When Your Favicon Won't Update
Changed your favicon but the browser still shows the old one? Browsers cache favicons aggressively.
Try appending a query parameter: href="/favicon.svg?v=2". Or check in an incognito window to bypass the cache entirely.