Favicon Sizes in 2026: The Five Files You Actually Need

Search “favicon sizes” and you’ll find generators that hand you a zip with twenty-plus files — favicon-16x16.png, mstile-150x150.png, apple-touch-icon-114x114-precomposed.png — plus a wall of <link> tags to paste. Almost all of it is cargo cult from 2013. Modern browsers need five files and four lines of HTML. Here’s the minimal set, why each file exists, and the edge cases where you’d add more.

The minimal set

File	Size	Who uses it
favicon.ico	32×32 (single image is fine)	Legacy browsers, RSS readers, tools that blindly request /favicon.ico
icon.svg	vector	Modern browsers — crisp at every size, supports dark mode
apple-touch-icon.png	180×180	iOS/iPadOS home screen, Safari bookmarks, Android fallbacks
icon-192.png	192×192	Android home screen (via web manifest)
icon-512.png	512×512	PWA install screen / splash (via web manifest)

And the HTML:

<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="/manifest.webmanifest">

The manifest carries the last two sizes:

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

That’s the whole thing. Modern browsers pick the SVG and scale it perfectly; everything else has an explicit answer.

Why each file earns its place

favicon.ico still matters because an enormous long tail of software never reads your HTML — it just requests GET /favicon.ico and hopes. RSS readers, uptime monitors, corporate proxies, old Safari versions. Keep it at the site root. A single 32×32 image inside the ICO is enough; bundling 16+32+48 into one ICO is fine too and costs a few KB. Converting an existing PNG takes seconds with the PNG to ICO converter.

The SVG icon is the biggest upgrade of the modern era. One vector file covers every rendered size — 16px tab, 32px pinned tab, high-DPI displays — with no per-size exports. (Whether to ship the vector as-is, minify it first, or fall back to raster is covered in the SVG conversion decision guide.) It can even respond to dark mode with an embedded media query:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #111; }
    @media (prefers-color-scheme: dark) { path { fill: #eee; } }
  </style>
  <path d="..."/>
</svg>

apple-touch-icon.png at 180×180 covers every iOS device (Apple scales down for older ones). iOS ignores SVG here and applies its own rounded-corner mask, so ship a full-bleed square PNG with no transparency — transparent pixels become black on iOS. Ignore anything telling you to export 57/60/72/76/114/120/144/152px variants; one 180 covers all of it. The -precomposed variant has been dead since iOS 7.

192 and 512 PNGs are the two sizes Android and the PWA install flow actually look for. If you set "purpose": "maskable" on a variant, keep the important artwork inside the central 80% “safe zone” — the OS may crop the rest into a circle.

What you can safely skip

• 16×16 and 48×48 PNG links — the SVG (or the ICO) covers these.
• mstile-* and browserconfig.xml — Windows tiles for IE11/Edge Legacy. Both are gone.
• theme-color meta as a “favicon requirement” — nice for tinting the mobile URL bar, unrelated to icons.
• Shortcut rel="shortcut icon" — shortcut has been obsolete for a decade; plain rel="icon" is correct.

Design notes that matter more than file count

At 16 pixels, your logo is a smudge. Favicon design is simplification: one bold shape, high contrast, minimal detail — a monogram or a simplified mark, not the full wordmark. Test it small before exporting anything: what reads at 512px often disappears at 16. Check it against both light and dark tab bars, because browser chrome varies, and a white-on-transparent icon vanishes in a light theme without a background shape.

Cache is the other classic trap. Browsers cache favicons aggressively — replacing the file often shows the old icon for days. When you rebrand, change the filename or add a version query (/icon.svg?v=2) in the link tags.

Generate the whole set in one step

The free Favicon Generator takes one square source image and produces the complete modern set — ICO, all PNG sizes, and the manifest snippet — entirely in your browser, with nothing uploaded to a server. Already have your mark as a PNG and just need the legacy file? The PNG to ICO tool does that one conversion instantly. Start from a clean square with the Image Cropper if your source art isn’t 1:1 yet.

Five files, four lines, one manifest. Everything beyond that is nostalgia.

The other image every page should ship is its social card — one 1200×630 file that covers every platform. Open Graph image sizes in 2026 has that set.