The Complete Favicon Size Cheat Sheet for 2026

A modern favicon is a small asset package, not one magic file. Browser tabs, saved shortcuts, Apple touch icons, Android launchers, and installed web apps can all ask for different formats or sizes. You do not need every historical icon ever documented, but you do need a coherent core set.

The practical favicon size table

This is a dependable baseline, not a claim that every browser selects the same file. User agents may choose the most appropriate declared candidate, apply their own mask, or request the root ICO as a fallback. Keep every URL public and return the correct image content type.

Copy-pasteable HTML

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<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="#2563eb">

Put the ICO first as a broad fallback, then declare specific candidates. The sizes="any" value on the ICO link indicates that it contains multiple sizes or can serve as a general fallback. If you do not ship an SVG favicon, remove that line rather than leaving a broken URL.

A minimal site.webmanifest

{
  "name": "Example Product",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable-192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Use separate files for regular and maskable icons. A maskable icon reserves a safe central area so a launcher can crop it into a circle, rounded square, or other device shape without cutting off the mark. Do not label a normal edge-to-edge icon as maskable merely to reduce the file count.

Why keep favicon.ico?

Current HTML lets you declare modern icon files, but browsers, crawlers, bookmark tools, and old integrations still probe /favicon.ico. A multi-image ICO containing 16, 32, and 48-pixel versions is cheap insurance. Place it at the site root even when the page also links to it explicitly.

An ICO is a container, so the filename alone does not prove which sizes are inside. Generate it from a clean source and inspect the archive with a favicon tool. Stretching one 16-pixel bitmap to every size defeats the purpose.

Design at 16 pixels, export from a large master

The 16×16 tab icon is the harshest test. Long company names, thin strokes, internal gaps, and soft gradients disappear. Start from the recognizable symbol rather than the full horizontal lockup. Increase contrast, remove decorative detail, and make counters or holes slightly larger than strict geometry suggests.

Keep a large vector master, but review a deliberately simplified small-size variant. Rasterizing the full logo perfectly does not help when its defining shape occupies six pixels. The goal is recognition, not microscopic fidelity.

Common deployment mistakes

• Relative paths resolve under the wrong route. A page at /app/index.html turns href="favicon.ico" into /app/favicon.ico. Use a root-relative path when the file lives at the origin root.
• The build moves files. Confirm the final output directory, not only the source folder. Static hosts deploy what the build emits.
• The manifest points to missing icons. Fetch every src URL after deployment and verify a 200 response plus the expected content type.
• An old icon is cached. Browsers cache favicons aggressively and inconsistently. Test in a fresh profile, confirm the network response, and change the filename when shipping a material redesign.
• Transparency hides the mark. Preview on light and dark browser chrome. Add a plate or alternate SVG color if the mark vanishes on either.

Do you need more legacy sizes?

You may encounter older checklists with 57, 60, 72, 76, 114, 120, 144, and 152-pixel Apple icons, Windows tile images, or platform-specific startup graphics. Add them when a supported product, device policy, or analytics signal calls for them—not because a copied list contains them. The 180-pixel Apple icon and the manifest pair cover the modern baseline for most websites.

Enterprise device fleets and packaged apps can have stricter requirements. Treat those as product requirements separate from the public-site favicon. Document which consumer needs each extra file so the set can be retired deliberately later.

Launch checklist

Generate the ICO, 16- and 32-pixel PNGs, 180-pixel Apple icon, regular 192/512 manifest icons, and separate maskable 192/512 icons. Paste the link block, publish the manifest, and open each URL directly. Then add the site to a phone home screen and inspect a desktop tab at normal zoom. A package is complete only when the deployed consumers can fetch it.