Favicon sizes explained
Six files cover every browser, tab, and home screen. Here they are.
Updated · 4 min read
Favicon advice online ranges from "one 32px PNG is fine" to lists of twenty-five files. The truth in 2026 is six assets: favicon.ico (16+32+48), an SVG icon, two PNGs for the web manifest (192 and 512), and a 180×180 apple-touch-icon. That set covers every mainstream browser tab, bookmark, home screen, and install surface — everything beyond it is legacy trivia.
The six files and what each one serves
- /favicon.ico — 16, 32, 48 px in one container. The universal fallback every browser understands; crawlers and old bookmarks request it by path even when no tag mentions it.
- SVG favicon. One vector file, sharp at every size and DPI, and it can honor dark mode with a
prefers-color-schememedia query inside the SVG. Chromium and Firefox load it; Safari still ignores it — which is why the .ico stays. - 192×192 PNG. Android home-screen icon, referenced from the web manifest.
- 512×512 PNG. Install dialogs and splash screens for installable web apps.
- 180×180 apple-touch-icon. iOS "Add to Home Screen". iOS composites its own rounded corners — ship it square, fully opaque.
- site.webmanifest tying the two PNGs together with your app name and colors.
The head tags, complete
<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="/site.webmanifest">
Browsers that understand the SVG pick it (later rel="icon" wins when types compete); everything
else falls back to the .ico. That's the entire mechanism — no 57×57, 76×76, 114×114 archaeology required.
What you can safely skip
The long lists of Apple sizes (57–152px) belong to iOS versions that left support years ago — 180px covers
modern devices, and iOS scales it down where needed. msapplication tile tags served Internet
Explorer and Edge Legacy, both dead. A 16px-only .ico is the one genuinely harmful shortcut: Windows taskbar
pins and 2× displays will upscale it into visible mush, which is exactly what the 32 and 48px entries
prevent.
Design for 16 pixels first
The tab icon is the size everyone sees most. Details that look great at 512px vanish at 16 — thin strokes, small text, subtle gradients. Strong silhouette, two or three flat colors, and generous negative space survive the shrink. Generate the set from a simple mark — or a single letter or emoji — check the live 16px preview, and ship the whole six-file pack in one download.