Favicons in 2026: The Complete Practical Guide
Favicon advice online spans a decade of contradictory cargo cults — 30-file "complete" packages, dead Windows tile formats, obsolete sizes. Here's what's actually needed now. Generate everything with our favicon generator (it builds a real .ico too).
The minimal modern set
| File | Size | Purpose |
|---|---|---|
| favicon.ico | 16+32+48 in one file | Legacy browsers, address bars — put at site root |
| icon.svg | vector | Modern browsers; supports dark-mode media queries inside |
| icon-192.png / icon-512.png | 192, 512 | Android/PWA via web manifest |
| apple-touch-icon.png | 180×180 | iOS home-screen bookmark |
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">Design for 16 pixels
Your logo probably doesn't survive 16×16. Favicon design is reduction: one letterform, one shape, one strong color. Test at real size — if it's mush at 16px, simplify further. Solid background beats transparency for tab visibility in both themes.
Details that bite
iOS ignores transparency in apple-touch-icons (renders black) — use a solid background. SVG favicons can embed prefers-color-scheme CSS for automatic dark-mode variants. The .ico at the root still matters: crawlers and old bookmarks request /favicon.ico unconditionally. And browsers cache favicons aggressively — version the filename when you rebrand.
App icons are a different job
Store submissions need platform-specific size sets — generate them with the Android, iOS and Windows icon generators.