Favicon Formats and Sizes: A 2026 Checklist

A single 16×16 favicon is too small for the other places the icon appears. Resize Image can produce 32, 180, 192, and 512 from one master. It cannot invent padding, a maskable safe zone, or an Apple touch icon you never exported. Tabs, bookmarks, and home-screen installs each ask for their own size. Start from a 512×512 PNG or an SVG and scale down.

One 16×16 file looks soft on a Retina MacBook tab. An iOS home-screen bookmark shows a blurred stamp. Slack can unfurl a generic globe when og:image exists and the manifest icons do not. The files are small. The missing sizes are what people notice.

Who requests a favicon

| Consumer | Typical size | Format | | --- | --- | --- | | Browser tab | 16, 32 | ICO, PNG, SVG | | Bookmarks bar | 16 to 32 | ICO, PNG | | iOS home screen | 180×180 | PNG apple-touch-icon | | Android PWA | 192, 512 | PNG in the manifest | | Windows tile | 150×150 and up | browserconfig.xml (legacy) | | Search and social | varies | Often og:image. The favicon is a separate file |

A favicon is not an Open Graph image. Open Graph Image Sizing covers the social preview.

The master

Start from:

• A 512×512 PNG with padding. The logo should not touch the edge. Some UIs crop a circle
• Or an SVG with simple paths. Detail that disappears at 16 px does not belong in the icon

Export at integer pixels. A fractional scale blurs the edges.

Use Resize Image to make 16, 32, 48, 180, 192, and 512 from that master. PNG to JPG is the wrong conversion here. Favicons need a sharp alpha channel. Stay with PNG or ICO.

Which format

favicon.ico

The classic file is /favicon.ico at the root. It can hold 16, 32, and 48 in one file. Browsers request it by default even if you declare nothing.

PNG link tags

<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 let the browser pick a crisp file.

SVG

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

It scales on desktop tabs. Keep a PNG fallback for clients that ignore SVG.

Apple touch icon

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

Transparency is not required. iOS applies a rounded-rectangle mask. Some teams put a subtle background color behind the mark.

Web app manifest

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

Installable PWAs and the Chrome Android splash behavior expect these.

Minimum set for 2026

• [ ] favicon.ico, or explicit PNG icons at 16 and 32
• [ ] favicon.svg (optional) plus a PNG fallback
• [ ] apple-touch-icon.png at 180×180
• [ ] icon-192.png and icon-512.png in the manifest
• [ ] A theme-color meta tag for mobile browser chrome
• [ ] Cache headers on the icon paths (immutable hashed filenames)

Next.js app/icon.tsx and app/apple-icon.tsx can generate these. Check that the output sizes match the list.

Mistakes

Upscaling 16 px to 180. Always scale down from the large master.

A transparent icon on a white tab disappears in light mode. Test both themes.

A logo with too much detail is illegible at 16 px. Simplify it.

Forgetting maskable icons. Android adaptive icons need padding in a safe zone (purpose: "maskable").

Size and cache

Favicons are tiny. Still serve them with a long cache and a compressed PNG. Run Compress Image on the 512 master before you generate the other sizes.

Do not inline a large logo as a data URL. See Base64 Data URLs Performance.

How to test

• Chrome DevTools, Application, Manifest
• A real iOS Add to Home Screen
• A Firefox private window, so the cache is empty
• Favicon checker tools for a multi-platform preview

Extra manifest 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" }
  ]
}

A maskable icon needs about 40% padding in the safe zone. Keep the logo centered inside a circle that is about 80% of the diameter.

When the logo changes

Regenerate every size. Update the manifest version. Bump the service worker cache if the site is a PWA. Purge the CDN for old hashed icon paths. Test bookmarks on devices that can keep the old favicon for up to 30 days.

Cache

Browsers cache favicons aggressively. After you replace favicon.ico or apple-touch-icon.png, a normal refresh often keeps the old icon. Version the query string, or test in a fresh private window.

Ship several sizes from one master: ICO or PNG for older tabs, SVG where it is supported, 180 for Apple, and 192 and 512 for the manifest. Sixteen pixels is the small end of that set. Generate the full set once, hash the filenames, and leave the icons alone until the logo changes.