Favicon sizes and formats cheat sheet (ICO, PNG, SVG)

October 20, 2026 · 11 min read

Search for "favicon sizes" and you will find checklists with twenty or more files: a PNG for every iPhone Apple ever shipped, Windows tiles, pinned-tab icons and sizes nobody has requested in a decade. Shipping all of them does not make a site more compatible. It makes the package harder to maintain, easier to get wrong, and no sharper where visitors actually see it.

The practical answer in 2026 is much shorter. A modern site needs three formats — SVG, PNG and ICO — spread across about five files, plus a web app manifest. This post is the cheat sheet: which favicon sizes to export, what each format is genuinely good at, and which legacy files you can leave out without losing anything.

The cheat sheet: the files you actually need

If you generate nothing else, generate this set. It covers desktop tabs, Google search results, PDF viewers, iPhone home screens and Android home screens:

That is the whole package for the overwhelming majority of websites. Everything beyond it is either a duplicate at a different size — which the platform can produce itself by scaling — or a format tied to a discontinued feature. The sections below explain why each row earns its place, so you can adapt the list instead of following it blindly.

ICO vs PNG vs SVG: what each format is for

The three formats are not competitors where one wins outright. Each survives because it does one job the others cannot.

SVG: the main favicon, when you have vector artwork

An SVG favicon has no pixel dimensions of its own. The browser renders it at 16x16 in a tab today and at a larger size somewhere else tomorrow, always from the same crisp source. It is usually the smallest file in the package, and it is the only format that can react to the user's theme: a @media (prefers-color-scheme: dark) rule inside the SVG can swap colours so the icon stays visible on a dark tab bar. Our guide to creating an SVG favicon shows that trick in full, and PNG vs ICO vs SVG compares the three formats head to head.

Two cautions. First, an SVG favicon must be self-contained: external images and web fonts are not loaded in this context, so convert text to outlines and embed everything the artwork needs. Second, vector does not rescue an over-detailed logo. At 16 pixels, fine lines and small lettering dissolve no matter how sharp the rendering is — simplify the artwork, do not just shrink it.

PNG: the dependable fallback and platform format

PNG is a fixed-size raster with lossless compression and full transparency. Browsers without SVG favicon support fall back to it, and Google, iOS and Android all consume PNGs at specific sizes. You do not need a PNG at every size a browser might request: browsers scale a reasonably close PNG cleanly, so one well-chosen desktop size (96x96) plus the platform icons below are enough. PNG cannot adapt to dark mode, which is one reason it has given up the lead role to SVG on desktop — if your mark disappears on dark tabs, fix that in the SVG and keep the PNG simple and high-contrast.

ICO: old, bundled, and still worth shipping

ICO is the original format, dating back to Internet Explorer 5, and it works differently: a single .ico file is a container that bundles several images, typically 16x16, 32x32 and 48x48. The browser downloads the whole bundle, then picks the embedded size closest to what it needs. That bundling is why ICO files are heavier than a lone PNG — and why you should not stuff a 256x256 image into a web favicon. Nobody displays a favicon at that size; it only inflates the download.

Why keep it at all? Because of the one place HTML does not reach. Browsers discover most favicons through <link> tags, but a PDF has no HTML head. Open https://example.com/report.pdf and the browser falls back to requesting /favicon.ico from the site root by convention. A few legacy crawlers and tools do the same. So: ship a small three-size ICO, put it at the root, and that is the format's job done.

The sizes that matter, one by one

16x16 and 32x32: the tab sizes you rarely export separately

The classic favicon sizes are 16x16 for standard displays and 32x32 for Retina and high-DPI tabs, taskbars and shortcut lists. In a modern package you almost never ship these as standalone PNG files: the SVG covers desktop tabs at any density, and the 16 and 32 pixel renderings live inside the ICO bundle for contexts that need them. What still matters is designing at these sizes. Preview your icon at 16 pixels before anything else — if the shape is not recognisable there, no export setting will save it.

96x96: the PNG fallback and Google's size

If you ship exactly one desktop PNG, make it 96x96. Google displays favicons next to site names in search results. Its documentation asks for a square icon of at least 8x8 pixels, recommends one larger than 48x48, and lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF as supported formats — SVG is not on the list. (Until October 2024 the documented rule was stricter — a multiple of 48 pixels, often quoted as “or SVG”; Google later said the supported-format set itself had not changed, so many guides still repeat outdated wording.) 96x96 comfortably meets the current guidance, gives browsers without SVG support a clean source to scale down to tab size, and stays tiny.

180x180: the Apple touch icon

iOS ignores your carefully declared tab icons when a user adds the site to their home screen; it wants one file, apple-touch-icon.png, at 180x180. That size has not changed in years, because iOS home screen icons are 60 points wide and the highest device scale factor is 3x — 60 × 3 = 180 pixels exactly. Older lists of 57, 76, 120, 152 and 167 pixel touch icons are obsolete; iOS scales the 180x180 file down for any device that needs less.

Two rules matter more than the dimensions. The touch icon must be opaque: iOS fills transparent areas with black, so a transparent logo can end up on a black tile whether you wanted one or not. And do not pre-round the corners or add your own shadow — iOS applies its own mask. Give it a full-bleed, opaque square with a little breathing room around the artwork. Our guide to which favicon files you need goes deeper on how each platform treats this icon.

192x192 and 512x512: the Android manifest icons

Android Chrome and other Chromium browsers take their home screen and install icons from the Web App Manifest, not from <link rel="icon"> tags. The manifest should declare at least two PNGs: 192x192 and 512x512. Chrome picks the closest match for the device's density and scales it, and the 512x512 also serves install prompts and the splash screen shown while a web app loads.

Android complicates one thing iOS does not: shape. Launchers crop home screen icons to circles, squircles or teardrops, and a manifest icon declared with "purpose": "maskable" promises it can survive that crop. Keep the essential artwork inside the central safe zone — roughly a circle with a diameter of 80% of the image — and let the background colour fill the rest. An icon that looks perfect as a square can lose its edges as a circle, so preview it masked, not just square.

Your master artwork: start at 512x512 or larger

One size never appears in the HTML but decides the quality of everything else: the source image you generate from. Start with a square of at least 512x512 pixels — or better, the original SVG logo — and let every favicon be scaled down from it. Scaling down is clean; scaling a 64x64 upload up to a 512x512 manifest icon produces the blur users see on their home screens. If your only logo file is small, you are better off simplifying or redrawing it than enlarging it.

Putting it together: the markup

With the files generated, the HTML is short. Place the icons in your site root (or adjust the paths) and add this to the <head> of every page:

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

This is the order EasyFaviconGenerator emits. Browsers do not simply take the first line they understand — they choose by format, declared size and context — so declare the complete set rather than relying on order. Inside site.webmanifest, declare the two Android sizes. The generator defaults to maskable:

{
  "name": "Your site name",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Writing these files, resizing every size and assembling the manifest by hand is exactly the tedious part a generator exists for. EasyFaviconGenerator takes one image and produces the full package above — every file named and sized as shown, the manifest, and this HTML snippet ready to paste — entirely in your browser, so an unreleased logo never leaves your machine. Pick the variant for your stack if you use one, and the file names and paths come out matching its conventions.

What you can safely skip

• The long Apple size list. 57x57 through 167x167 touch icons were for specific old devices. One opaque 180x180 is scaled by iOS itself.
• Windows Metro tiles. browserconfig.xml and the mstile images belonged to Windows 8 tiles; Edge no longer reads them.
• The Safari mask icon. The monochrome rel="mask-icon" served pinned tabs in old Safari versions; since Safari 12 (2018) pinned tabs use the regular favicon, and the Touch Bar was phased out from 2021 with its last model discontinued in 2023.
• A PNG at every power of two. 16, 32, 48, 64, 128… browsers scale. The SVG, the 96x96 PNG and the ICO bundle cover desktop between them.
• A 256x256 layer in the ICO. It only makes the file heavier; nothing displays a favicon that large.

If you maintain a very old intranet or kiosk that genuinely needs one of these, most generators (ours included) still offer them as legacy options — but they should be opt-in exceptions, not the default checklist.

Quick answers to the usual questions

Can I ship only an SVG favicon?

On a controlled audience — say, an internal tool used in one modern browser — yes. On the public web, no: you would lose the icon in browsers without SVG favicon support, give Google no PNG to fall back on, and leave iOS and Android home screens to improvise from whatever they can find. The extra files are a few kilobytes; ship them.

Can I ship only favicon.ico, like in 2005?

It will still appear in desktop tabs, which is why the format refuses to die. But you give up crisp scaling, dark-mode adaptation, a proper Google result icon and any control over iOS and Android home screens. ICO is the safety net, not the strategy.

Do I need a separate 16x16 PNG?

Almost never. Between the SVG (preferred by desktop browsers), the 96x96 PNG (scaled down cleanly) and the 16x16 embedded in the ICO, every consumer has a suitable source. Spend the effort on checking the design at 16 pixels instead of exporting another file.

Why does my icon look fine in the tab but wrong on a phone?

Because they are different files following different rules. Tabs use the SVG or PNG with transparency intact; iOS uses the 180x180 touch icon and fills transparency with black; Android uses the manifest icons and crops them to the launcher's shape. A mismatch almost always means one of the platform files is missing, transparent where it should be opaque, or cropped by the mask. Generate the platform icons as their own files rather than assuming one image serves everywhere untouched.

The short version

Favicon sizes in 2026 reduce to a handful of numbers: SVG for desktop, 96x96 PNG as fallback, a 16/32/48 ICO at the root, 180x180 for Apple, and 192x192 plus 512x512 in the manifest — all generated from a square master of at least 512x512. Formats divide the labour: SVG for sharpness and dark mode, PNG for platforms that demand pixels, ICO for the corners HTML cannot reach. Once the package is live, run it through the favicon checker to confirm every file is declared, reachable and rendering the way you intended on desktop, Google, iOS and Android. That is the whole discipline — five files, three formats, no twenty-item checklist.

Related articles

• PNG vs ICO vs SVG favicon: which formats do you need?
• SVG favicon dark mode: setup, Safari limits and fallbacks
• How to create an SVG favicon

All favicon articles