Favicon Sizes: The Complete Guide

Updated July 27, 2026

A favicon used to mean one thing: a 16×16 pixel icon in the browser tab. That’s still true, but it’s no longer the whole truth. Modern browsers, phones, and operating systems each ask for a different size, and shipping only the classic .ico leaves you with a blurry or missing icon in several of them.

The sizes you actually need

Size Where it shows up Format Required?
16×16 Browser tab, bookmarks bar Inside favicon.ico Yes
32×32 Retina tabs, Windows taskbar shortcuts Inside favicon.ico Yes
48×48 Windows site shortcuts, some browser UI Inside favicon.ico Optional
180×180 iOS home screen (apple-touch-icon) Standalone PNG Yes, if you care about iOS
192×192 Android home screen PNG via manifest Yes, if you care about Android
512×512 Android splash screens, install prompts PNG via manifest Yes, for installable sites
Any Modern browser tabs, scales perfectly SVG Optional but recommended

The first three live together inside a single multi-resolution favicon.ico. The rest are separate files.

Why one ICO file isn’t enough

A classic favicon.ico can technically embed several resolutions in one container, which covers the browser-tab case. But apple-touch-icon and the manifest icons are separate files referenced by separate <link> tags — no combination of ICO trickery replaces them. A complete favicon setup is really: one multi-resolution .ico, a handful of standalone PNGs, and a small JSON manifest.

Skip the apple-touch-icon specifically and iOS falls back to a screenshot of your page when someone adds your site to their home screen. It almost never looks good — usually a shrunken, unreadable slice of your header.

The markup you need in <head>

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Four lines covers every mainstream case. Note that apple-touch-icon deliberately has no sizes attribute here — iOS will accept a single 180×180 and scale it down for smaller contexts, and listing more sizes than you actually ship is a common source of 404s in the console.

The manifest itself is a small JSON file:

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

The SVG favicon, and why it’s worth adding

An SVG favicon is optional but increasingly worth shipping. It scales perfectly to any size, it’s usually smaller than the PNG equivalent, and browsers that support it will prefer it over the ICO. It also unlocks something the raster formats can’t do: a favicon that adapts to the user’s colour scheme, using a media query inside the SVG itself.

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

Keep the ICO anyway. Safari’s support has historically lagged, and the ICO remains the file browsers request from your site root whether you reference it or not.

Gotchas that bite people

Your icon is cached far more aggressively than you expect. Browsers hold onto favicons well past a normal page refresh, and a hard reload often doesn’t clear them. When you’re testing a change, use a private window or append a query string (/favicon.ico?v=2) rather than concluding your new icon is broken.

Detail disappears at 16×16. A logo that reads clearly on your homepage frequently turns to mush in a browser tab. If your mark has fine strokes, small text, or a detailed illustration, design a simplified variant for the small sizes — a single letter or a bold glyph — rather than scaling the full logo down and hoping.

Transparency is not optional on iOS. Apple composites apple-touch-icon onto a background and applies its own rounded corners. A PNG with an alpha channel where you expected white will render with a black backdrop on some iOS versions. Ship that one with a solid background baked in.

The root-path request happens regardless. Browsers and crawlers request /favicon.ico from your domain root even when your markup points somewhere else entirely. If nothing is there, that’s a steady trickle of 404s in your logs. Put the file at the root.

Do you still need every size in 2026?

Honestly, no — the list has shrunk. The old advice to ship a dozen sizes covering Windows tiles, older Android, and various legacy browsers is mostly obsolete. The Microsoft tile sizes (msapplication-*) target a Windows Start menu experience that effectively no longer exists, and the 57/72/114 pixel apple-touch-icon variants were for iOS versions long out of support.

What’s genuinely load-bearing today is short: a multi-resolution ICO covering 16 and 32, one 180×180 apple-touch-icon, and 192 and 512 PNGs for Android via the manifest. An SVG on top of that if you want the scaling and dark-mode benefits. Everything else is a leftover from a different era of the web.

Building all of this by hand

Generating six-plus image sizes plus a manifest by hand in an image editor is tedious and easy to get subtly wrong — off-by-one dimensions, missing transparency, a manifest pointing at the wrong filename. PNG to ICO does the whole job in one step: drop in a single square PNG (512×512 or larger works best) and it generates the multi-resolution ICO, every standalone PNG size, and a ready-to-edit site.webmanifest, bundled into one ZIP — entirely in your browser, nothing uploaded.

If you’re starting from a vector logo instead of a PNG, SVG to ICO rasterizes it directly to a favicon, which gives noticeably crisper small sizes than scaling down an already-rasterized image. And if you’ve inherited an old .ico file and need to pull the artwork back out — to resize it, re-export it, or just see what’s actually inside — ICO to PNG and ICO to SVG extract the embedded image.

Related tools

Related guides

Share