The Complete Favicon Guide — sizes, ICO vs PNG, manifest and cache busting

Updated 2026-08-24 · Based on public web standards · Browser behaviour varies by version.

1. How many favicon files do you actually need?

A favicon is the small icon that represents your site in tabs, bookmarks and home-screen shortcuts. Internet Explorer introduced the convention of probing /favicon.ico at the site root in 1999, and every browser since has kept it. The complication is everything that arrived afterwards: iOS home screens, Android launchers, PWA splash screens, Windows tiles — each with its own expectations.

In 2026 the practical minimum is four things. Anything beyond this is usually over-engineering.

• favicon.ico with 16·32·48 inside — the safety net at your site root, found even without a link tag.
• 16 and 32px PNGs — what modern browsers actually prefer for the tab strip.
• apple-touch-icon at 180px — the single size iOS Safari uses for "Add to Home Screen".
• 192 and 512px PNGs plus site.webmanifest — Android home screens and the PWA install prompt.

2. What each size is for

Here are the eleven sizes this tool can produce and where each one shows up.

The three sizes flagged in the ICO column live inside a single favicon.ico file. You do not ship three files; one ICO container holds all three resolutions.

3. ICO vs PNG vs SVG

ICO is a container, not really a format

An ICO file holds several bitmaps (or embedded PNGs) at different sizes, and the operating system picks whichever one fits: 16px in the tab, 32px in the bookmark list, 48px on a Windows shortcut.

The structure is refreshingly simple. The first six bytes are the ICONDIR header — a zero reserved field, a type of 1, and the image count. Then comes one 16-byte ICONDIRENTRY per image, carrying the width, height, bit depth, byte length and the offset where that image starts in the file. Because offsets are explicit, the image payloads simply get appended after the entry table. There is one classic gotcha: width and height are single bytes, so 256px is recorded as 0. This tool honours that rule when it encodes.

PNG is what you point at explicitly

Anywhere you must name an exact file at an exact size — apple-touch-icon, the manifest icons array — you use PNG. Clean alpha and good compression make it the right choice for the larger sizes.

SVG is a bonus, not a replacement

You can serve a vector favicon with <link rel="icon" type="image/svg+xml" href="/icon.svg"> and even adapt it to dark mode with a media query. Older Safari versions and some Android launchers ignore SVG favicons, so treat it as an addition on top of ICO and PNG rather than a substitute.

4. The standard head block

Order does not matter, but this combination covers essentially everything.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#4f46e5">

The sizes="any" hint on the ICO link tells the browser the file carries multiple resolutions. Without it, some browsers treat the ICO as single-resolution and end up upscaling a small bitmap instead of using your SVG or larger PNG.

5. Writing site.webmanifest

The install prompt and Android home-screen icon come from the manifest, not from link tags. A minimal manifest looks like this.

{
  "name": "My Site",
  "short_name": "My Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ],
  "theme_color": "#4f46e5",
  "background_color": "#ffffff",
  "display": "standalone"
}

• purpose — any means "use as-is"; maskable means Android may crop the image into a circle or squircle. Maskable art needs roughly 20% breathing room at the edges, which is exactly what the padding slider in this tool is for.
• 512px is also used for the install splash screen. Omit it and the install banner may never appear.
• application/manifest+json is the recommended MIME type, though application/json works nearly everywhere.

6. When the browser refuses to show your new favicon

This is the most common complaint after a favicon swap. Favicon caching is handled separately from ordinary resource caching and is unusually persistent — a hard reload frequently does nothing. Work through the list below.

1. Add a query string — /favicon.ico?v=2 makes it a new URL. Simplest and safest.
2. Rename the file — favicon-2026.ico plus an updated link tag. Especially effective behind a CDN.
3. Visit the icon URL directly — open https://example.com/favicon.ico in the address bar and reload; that single entry refreshes.
4. Invalidate the CDN — with CloudFront or Cloudflare in front, clear the edge cache first. Clearing only the browser achieves nothing.
5. Check your headers — if you shipped Cache-Control: max-age=31536000, immutable and kept the same URL, there is effectively no way to refresh it. Change the filename.

7. Mistakes worth avoiding

• Trying to keep text legible at 16px — it is not possible. Use the symbol, drop the wordmark.
• Transparent background plus dark mode — a black logo on transparency disappears against a dark tab strip. Fill the background or ship a light variant.
• Linking files you never generated — copied snippets referencing missing sizes produce repeated 404s. This tool emits tags only for the sizes you actually created.
• Transparency in apple-touch-icon — iOS fills transparent areas with black. Give the 180px version a solid background.
• Not enough maskable padding — Android's circular mask clips the edges. Budget 15–20%.
• No favicon.ico at the root — crawlers, readers and older clients still probe the root first regardless of your link tags. Keep one there.

8. What this tool does

favigen performs all of the above in the browser. The file is read with FileReader, each size is rendered through Canvas drawImage, the multi-size ICO is assembled by writing ICONDIR and ICONDIRENTRY structures byte by byte, and even the ZIP container is written by hand in JavaScript. No image library, no round trip to a server — which matters when the artwork is an internal logo or an unreleased brand asset.