Favicon Sizes: The Complete Checklist

"Just ship one 512×512 PNG, browsers will scale it" — mostly true, and wrong where it matters. Downscaling to 16×16 destroys detail: a logo with text becomes a coloured smear at exactly the size users see most often.

The minimum useful set

File	Size	Used for
favicon.ico	16 / 32 / 48 multi-size	Browser tabs, bookmarks, legacy consumers
favicon.svg	vector	Modern browsers, supports dark mode
apple-touch-icon.png	180×180	iOS home screen, Safari
icon-192.png	192×192	Android home screen, PWA
icon-512.png	512×512	PWA splash screen
icon-maskable-512.png	512×512	Android adaptive icons

Markup:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Keep sizes="any" on the .ico. Without it, some browsers pick the SVG and then fail to fall back.

Why .ico still exists

It is the only common format that packs several resolutions into one file, so the browser picks 16 or 32 as needed. Modern browsers accept PNG favicons, but:

• Older crawlers, RSS readers and some desktop apps only request /favicon.ico
• Some systems use the 32px version on dark tab bars and the 16px one on light

Keeping it costs nothing.

16×16 is a separate illustration

Professional favicon sets are drawn twice. The 16px version drops text, keeps only the core shape, thickens strokes to at least 1px, and snaps to the pixel grid.

A rough progression:

• 512: full logo with wordmark
• 128: mark plus abbreviated text
• 32: mark only
• 16: the simplest recognisable silhouette, sometimes just a colour block

If you only have one master image, at minimum downscale it to 16px and look at it. If you cannot tell what it is, it needs redrawing.

Maskable icons: Android crops your edges

Android adaptive icons are masked to the device's shape (circle, squircle, rounded square). Only the central 80%-diameter safe zone is guaranteed visible.

So a maskable icon keeps its subject inside the middle 80% and treats the outer ring as bleed. Reusing a regular icon as maskable cuts the corners off.

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

The purpose field is not optional — without it the system does not know which file may be cropped.

"I changed the icon and the browser still shows the old one"

Favicon caching is exceptionally sticky, and layered: browser memory, disk cache, CDN edge, service worker.

Ordered by effectiveness:

1. Rename the file — favicon-v2.ico. URL change defeats every cache.
2. Append a query string — favicon.ico?v=2. Works in most browsers, but some CDNs ignore query strings.
3. Purge the CDN.
4. Clear the browser cache and restart it.
5. Have the user visit https://site/favicon.ico directly and hard-refresh.

Setting a short cache lifetime for .ico in your headers helps, but never set no-cache — that re-downloads it on every visit.

Dark mode icons

SVG favicons support a media query:

<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">

Only SVG supports this. If your mark is dark and your users run dark tab bars, this one line fixes an invisible icon.

Details that get missed

• Transparent or solid background. A transparent PNG can disappear on a dark tab bar. A solid tile is often clearer.
• No hairline strokes. A 1px line at 16px becomes grey noise.
• Inset the artwork. Leave 1–2px of padding so the container does not clip edges.
• Exact pixel dimensions. A "192" that is actually 190 fails PWA validation.

The production flow

1. Start from a 512×512 master with transparency.
2. Export 192, 180, 48, 32 and 16 in one pass with Image Resizer — set the longest edge and batch it.
3. Inspect the 16 and 32 versions separately; redraw if needed.
4. Convert formats (PNG→WebP for the manifest) with Image Converter.
5. Pack the multi-size .ico with a dedicated tool.

Six files — ico, svg, 180, 192, 512, maskable-512 — cover every mainstream surface today. Missing one does not fail loudly; it shows up as a blank icon on one specific device, which is the kind of bug you cannot find on your own machine.