Favicon sizes: the complete reference

Browsers, phones and operating systems each request a different icon size, and shipping the wrong set is why favicons come out blurry or vanish. Here is every size that matters, the three link tags that cover a modern site, and how to test the result.

Every favicon size and where it shows up

Two PNGs cover almost all everyday browsing: 16x16 for standard tabs and 32x32 for high-density screens. The rest exist for specific surfaces, and each one is requested by name:

To make the numbers concrete, here is the same mark at true size. The 16 pixel version on the far left is what most visitors see most of the time:

The modern minimal setup

You do not need a dozen link tags. A modern site is fully covered by an SVG icon, an ICO fallback and one apple-touch-icon, plus a manifest if you care about Android and PWA installs. Put the files in the site root and add this to the head of every page:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<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">

The SVG scales perfectly on every browser that supports it, and the ICO quietly serves everything else: crawlers, feed readers and older agents request /favicon.ico directly without reading your HTML. The 180x180 apple-touch-icon covers iOS home screens. If you are weighing vector against raster more broadly, the same tradeoff runs through your whole brand kit; the SVG vs PNG logo guide shows the difference live.

The manifest file referenced above declares the two Android and PWA sizes:

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

Common mistakes

Shipping a single 16 pixel ICO. High-density screens then upscale it, which is why so many tabs look fuzzy. Always include 32 alongside 16, and let the ICO carry 48 for Windows shortcuts.

A transparent apple-touch-icon. iOS fills transparent pixels with black, so a mark exported on a transparent background turns into a mark floating on a black square. Export the 180x180 file with a solid background color.

Shrinking the full logo. At 16 pixels, fine detail and thin strokes turn to mush. Favicons work best as one or two bold letters or a single simple shape with strong contrast. If your wordmark does not survive 16 pixels, do not force it; give the favicon its own simplified mark.

Forgetting the cache. Browsers cache favicons aggressively, sometimes for weeks. If an old icon keeps showing after you replace the files, the files are probably fine and the cache is not.

How to test your favicon

Load the site in a normal tab and check the icon at both standard and high-density zoom. Then request /favicon.ico directly in the address bar to confirm the root file exists. On a phone, use Add to Home Screen on iOS and Install on Android Chrome; those two actions exercise the apple-touch-icon and the manifest icons respectively. When an update does not appear, test in a private window first: a fresh session skips the favicon cache and tells you whether the problem is your files or an old copy.

Common questions