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.

Quick answer

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.

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

Browser-based workflows for favicon formats and sizes depend on file size, browser memory, and how the source file was created. Very large files, password-protected inputs, or unusual encodings may fail without a desktop alternative. Always keep an original copy before batch processing.

When not to use this approach

Skip browser-only processing when compliance requires audit logs, when files exceed practical browser limits, or when you need features your browser tool does not expose (bookmarks, form fields, digital signatures). In those cases, use dedicated desktop software or an approved enterprise pipeline.

Related tools

• Resize Image
• PNG to JPG
• Compress Image

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.

Putting this into practice this week

Pick one workflow from this article and run it on a real task today — not a hypothetical. If the guide covers PDF export, export one document you already need for work. If it covers image naming, rename one messy folder. Knowledge retained from doing beats knowledge retained from reading.

Questions to ask before you delegate

When handing a process to a teammate or virtual assistant, ask: "What would break if you skipped step three?" If they can't answer, the process isn't documented enough. Add the missing step to your internal wiki with a link to this guide and the relevant tool page.

How this connects to the broader site

Utility-first sites win when guides and tools reinforce each other. Bookmark the tool URL alongside this article. Share the article link when onboarding someone who'll use the tool weekly — context reduces support messages asking the same formatting question twice.

Common "it worked yesterday" causes

Software updates change export defaults. Browser updates change PDF print behavior. CDN cache serves old image after you uploaded new asset. When workflows break without code changes, check version changelogs before blaming user error. First troubleshooting step: reproduce in clean browser profile with extensions disabled.

When to escalate to a specialist

Tax, legal, medical, and enterprise security topics in adjacent guides sometimes require professional advice. Articles like this explain operational literacy — not professional services. Escalate when stakes exceed convenience (court filing, audit response, M&A data room, HIPAA-covered PHI).