Which favicon sizes a website needs today (and which ones it no longer does)

A modern website needs five favicon files, not the twenty that generators produced a decade ago: a favicon.ico for old browsers and search engines, a favicon.svg that scales to any size and supports dark mode, a 180-pixel apple-touch-icon.png for iOS, and two PNGs of 192 and 512 pixels declared in the manifest for Android and installable web apps. That covers tabs, bookmarks, home screens and Google’s search results.

This article explains what each file does, which tags go in the <head>, what Google requires to show the icon in results and which sizes you can stop generating.

The five files

File	Size	Purpose
/favicon.ico	32×32 (optionally 16×16 and 48×48 inside the same .ico)	Old browsers, feed readers and search engines that request /favicon.ico by convention even when it is not declared.
/favicon.svg	Vector	Modern browsers. Crisp at any density and can change colour with prefers-color-scheme.
/apple-touch-icon.png	180×180	Icon when adding the site to the home screen on iOS and iPadOS. Safari also looks for it by convention at the root.
/icons/icon-192.png	192×192	Android and installable web apps (declared in the manifest).
/icons/icon-512.png	512×512	Splash screen and high-resolution icon in the manifest.

And the tags that tie it together:

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

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

The order of the first two tags matters: browsers that understand SVG pick the SVG; the others keep the .ico. The sizes="32x32" attribute on the .ico helps that choice.

Why an SVG favicon

An SVG is tiny, looks perfect on high-density screens and can adapt to dark mode from inside the file itself:

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

Firefox even plays CSS animations inside an SVG favicon; Chrome does not animate them in the tab (if you want animation there, you need JavaScript that keeps swapping the icon, as this blog does). Safari has accepted SVG favicons since version 12 but still prefers the apple-touch-icon for the home screen.

Two cautions with SVG: do not depend on external fonts (convert them to paths) and make sure the drawing is legible at 16 pixels; a logo with small text turns into a smudge.

What Google requires to show the favicon in results

According to the Google Search documentation:

• The favicon must be a square multiple of 48 pixels (48×48, 96×96, 144×144…) or an SVG. An .ico with several sizes works if it includes a 48×48 one.
• It must be declared with <link rel="icon"> on the home page of the domain and be crawlable (not blocked by robots.txt).
• It must be stable (same URL) and represent the site’s brand; Google may not show icons it considers inappropriate.
• The icon is associated with the home page and applied to the whole site; a different favicon per section is not reflected in results.

Google crawls the favicon with a dedicated crawler and may take days to update it after a change.

What you can stop generating

• The 57, 60, 72, 76, 114, 120, 144 and 152 px PNGs for old iOS versions: Apple scales the 180 px one.
• browserconfig.xml and the Windows 8/10 tiles (msapplication-TileImage): live tile support disappeared with Windows 11.
• mask-icon for Safari pinned tabs: since version 12 Safari uses the regular favicon in pinned tabs too.
• Dozens of <link rel="icon" sizes="…">: an .ico, an SVG and the manifest are enough.

How to generate the files

Start from a square of at least 512 px, ideally an SVG. With sharp in Node.js:

import sharp from 'sharp';
for (const size of [32, 180, 192, 512]) {
  await sharp('logo.svg').resize(size, size).png().toFile(`icon-${size}.png`);
}

The .ico can be assembled with the png-to-ico library or with ImageMagick (magick icon-32.png icon-16.png favicon.ico). If you prefer not to install anything, the favicon generator on AIMRAN Tools accepts a square image or an SVG, previews the usual sizes (16 to 180 px) and downloads the set as a ZIP, all in the browser.

For the maskable icon (Android crops icons into circles or rounded shapes), leave a safety margin: the important content must fit within the central 80 %.

Final checks

1. Open https://yourdomain/favicon.ico and https://yourdomain/favicon.svg: both must return 200.
2. In Chrome DevTools, Application → Manifest, check that the icons load without warnings.
3. Add the site to the home screen on an iPhone and on an Android device and look at the icon.
4. Do the tab test: is the icon recognisable at 16 pixels next to twenty other tabs?

Conclusion

An .ico, an SVG, a 180 px PNG and two PNGs in the manifest: five files and four tags cover browsers, phones, installable apps and Google’s results. Spend the time you save on generating sizes on what actually shows: a drawing that is legible at 16 pixels and works in light and dark.