Favicon Formats and Sizes — A 2026 Checklist

A startup shipped one 16×16 favicon. On Retina MacBook tabs it looked mushy. iOS home screen bookmarks showed a blurred stamp. Slack unfurl previews pulled a generic globe because og:image existed but manifest icons didn't.

Favicons are small files with outsized branding impact. The 2026 checklist is bigger than a single .ico in site root — but not complicated if you start from one good master.

What requests favicons

| Consumer | Typical size | Format | | --- | --- | --- | | Browser tab | 16, 32 | ICO, PNG, SVG | | Bookmarks bar | 16–32 | ICO, PNG | | iOS home screen | 180×180 | PNG apple-touch-icon | | Android PWA | 192, 512 | PNG in manifest | | Windows tile | 150×150+ | browserconfig.xml (legacy) | | Search / social | varies | Often og:image, not favicon |

Favicon ≠ Open Graph image — see Open Graph Image Sizing for social previews.

Master asset rules

Start from:

• 512×512 PNG with safe padding (logo not edge-to-edge — masks crop circles on some UIs)
• Or SVG with simple paths — no micro-detail that vanishes at 16px

Export from design tool at integer pixels. Fractional scaling causes blur.

Use Resize Image to generate 16, 32, 48, 180, 192, 512 from master. PNG to JPG is wrong here — favicons need sharp alpha; stay PNG or ICO.

Format decisions

favicon.ico (multi-size)

Classic root /favicon.ico. Can embed 16, 32, 48 in one file. Browsers request by default even if you declare nothing.

PNG <link rel="icon">

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Explicit sizes help browsers pick crisp assets.

SVG favicon

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Scales infinitely on desktop tabs. Provide PNG fallback for contexts that ignore SVG.

Apple touch icon

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

No transparency required — iOS applies rounded rect mask. Some teams add subtle background color.

Web app manifest

"icons": [
  { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]

Required for installable PWAs and Chrome Android splash behavior.

2026 minimum checklist

• [ ] favicon.ico OR explicit PNG icons at 16 and 32
• [ ] favicon.svg (optional) + PNG fallback
• [ ] apple-touch-icon.png at 180×180
• [ ] icon-192.png and icon-512.png in manifest
• [ ] theme-color meta for mobile browser chrome
• [ ] Cache headers on icon paths (immutable hash filenames)

Framework note: Next.js app/icon.tsx and app/apple-icon.tsx generate these — verify output sizes match checklist.

Common mistakes

• Upscaled 16px to 180 — always downscale from large master
• Transparent icon on white tab — invisible in light mode; test both themes
• Over-detailed logo — simplify for 16px legibility
• Forgetting maskable icons — Android adaptive icons need safe zone padding (purpose: "maskable")

Performance

Favicons are tiny — still serve with long cache and compressed PNG. Compress Image on 512 master before generating sizes.

Don't inline megabyte logos as data URLs — see Base64 Data URLs Performance.

Testing

• Chrome DevTools → Application → Manifest
• Real iOS "Add to Home Screen"
• Firefox private window (fresh cache)
• Favicon checker tools for multi-platform preview

Troubleshooting

What size should a favicon be in 2026? Provide at least 32×32 and 16×16 in ICO or PNG, plus 180×180 for Apple touch icon and 192×192 and 512×512 for PWA manifest. SVG favicons work in modern desktop browsers with a PNG fallback.

Should I use ICO or PNG for favicon? ICO can bundle multiple sizes in one file — legacy friendly. PNG is simpler for modern stacks. Many sites ship favicon.ico for compatibility plus PNG/SVG for clarity. Next.js and similar frameworks often generate these automatically.

Does SVG work as a favicon everywhere? Not everywhere. Chrome, Firefox, and Edge support SVG favicons; Safari support improved but PNG fallback remains wise for iOS home screen and older clients.

Limitations

When not to use this approach

Conclusion

Ship multiple sizes from one master: ICO or PNG for legacy tabs, SVG where supported, 180 for Apple, 192/512 for manifest.

Sixteen pixels is not a strategy — it's a minimum. Generate the full set once, hash filenames, and stop thinking about favicons until the logo rebrand.

PWA manifest advanced fields

{
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Maskable icons need 40% safe zone padding — logo centered in 80% diameter circle.

Rebrand checklist

When logo updates: regenerate all sizes, update manifest version, bump service worker cache if PWA, purge CDN for old hashed icon paths, test bookmarks on devices that cached old favicon up to 30 days.