Favicon Sizes 2026 — Tab, PWA, Apple Touch
Shipping one blurry favicon.ico from 2014 and hoping for the best still shows up on real sites. Tabs look soft on high-DPI displays, the iOS “Add to Home Screen” icon is a stretched mess, and the PWA install prompt pulls a random Open Graph image because nothing in the web app manifest matches. Favicons are not one file anymore — they are a small bundle with clear roles.
What each surface actually requests
Browser tab / bookmarks — Prefer an SVG favicon when your mark is geometric. Add a 32×32 PNG (and optionally 16×16) as fallback. Many sites stop here and look fine in Chrome and Firefox on desktop.
Safari / iOS home screen — Expects apple-touch-icon around 180×180. A 32px source upscaled by the OS looks soft or muddy. This is the size people notice when they “install” a marketing site to the home screen.
Installable PWA — manifest.webmanifest (or manifest.json) should list at least 192×192 and 512×512 PNG icons. Maskable icons need safe padding so Android adaptive icons do not crop your logo into a blob.
Legacy shortcut — /favicon.ico at the site root still gets hit by crawlers and old tooling. A multi-resolution ICO or a simple 32px ICO is enough; you do not need every Windows icon size from the XP era.
A minimal 2026 set that covers almost everyone
| Asset | Size | Role |
|---|---|---|
favicon.svg | vector | Primary tab icon |
favicon-32.png | 32×32 | Raster fallback |
apple-touch-icon.png | 180×180 | iOS / Safari pinned |
icon-192.png | 192×192 | PWA |
icon-512.png | 512×512 | PWA / splash-ish uses |
That is five files, not twenty. Skip 96, 128, and the ancient “msapplication” tile stack unless you have a specific legacy requirement.
Wiring that actually gets used
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />In the manifest:
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}Generate maskable versions with intentional padding. A logo that touches the canvas edges will lose corners under circular and squircle masks.
Design notes that save redesign cycles
- Keep the mark simple at 16–32px: thin strokes disappear in the tab strip.
- Solid or high-contrast background for touch icons; transparency on home-screen icons can look wrong on light/dark wallpapers.
- Same brand color across SVG and PNG exports so the tab and the installed icon feel like one product.
- Cache-bust when you replace icons (
?v=2026-07or hashed filenames). Browsers and OS home screens are aggressive about caching favicons.
Common failure modes
- Only SVG, no PNG — older WebViews show a generic globe.
- Only 32px everywhere — PWA and iOS look amateur.
- Manifest icons point at 404 paths after a redesign.
- Using the social OG image (1200×630) as a PWA icon — wrong aspect and wrong crop.
Generate a consistent set from one master logo with favicon-generator, then drop the outputs into public/ and wire the head + manifest once. Verify on a real phone: Add to Home Screen, and (if applicable) install the PWA. Desktop tab zoom alone will not catch soft iOS icons.
A small, intentional icon pack beats a junk drawer of every size someone blogged about in 2012. Ship SVG + 32 + 180 + 192/512, link them correctly, and move on.