The short answer
Five files cover every surface a normal site or web app faces today. Everything beyond this list is legacy weight.
| File | Size | Format | What it's for |
|---|---|---|---|
favicon.ico | 16 · 32 · 48 | ICO (multi-size) | Browser tabs, bookmarks and history; Windows shortcuts; the icon Google Search reads. |
icon.svg | scalable | SVG | Modern browser tabs — and the only format that can adapt to dark mode. |
apple-touch-icon.png | 180×180 | PNG | iOS / iPadOS "Add to Home Screen". |
icon-192.png | 192×192 | PNG | Android home screen, referenced from the web manifest. |
icon-512.png | 512×512 | PNG | Android install prompt and splash; also the source for a maskable icon. |
Why those sizes, and not the others
Each number on that list maps to a real surface that asks for exactly that pixel size:
| Size | Used by | Keep it? |
|---|---|---|
| 16×16 | The tab favicon on standard-density screens. Lives inside the .ico. | Yes |
| 32×32 | Retina tabs, the Windows taskbar, some bookmark bars. Inside the .ico. | Yes |
| 48×48 | Windows site shortcuts, and Google Search's minimum. Inside the .ico. | Yes |
| 180×180 | Apple touch icon. One 180 covers every current iPhone and iPad. | Yes |
| 192×192 | Android home-screen icon (manifest). | Yes |
| 512×512 | Android splash screen, PWA install UI, maskable source (manifest). | Yes |
| 96 / 144 | Optional. Some teams add a 96 or 144 PNG so Google has a larger clean square to pick from. Nice-to-have, not required. | Optional |
| 57 · 60 · 72 · 76 · 114 · 120 · 152 | Old per-device Apple touch icons. A single 180 has replaced all of them since iOS 8. | Skip |
| 70 · 150 · 310 (mstile) | Windows 8/10 Live Tiles and browserconfig.xml. The feature is gone. | Skip |
| 64 · 128 · 256 (in the ICO) | Bloat the .ico for a size nothing requests. 16/32/48 is enough. | Skip |
Formats: ICO vs PNG vs SVG
Three formats, three jobs — you want all three, but for different reasons.
- ICO is the compatibility baseline. A real
.icois a container holding several bitmaps (16/32/48) at once, so the browser never has to scale one image up or down. It is also the format Google Search reads. Never ship a single PNG renamed to.ico— it looks soft at the sizes it wasn't drawn for. - SVG is the modern default: one scalable file, usually under 1 KB, sharp at any density, and the only format that can respond to
prefers-color-scheme. The catch: Google Search and older browsers ignore it, which is exactly why you keep the.icoalongside. - PNG is for the fixed-size raster slots that demand it — the Apple touch icon and the Android/manifest icons. These platforms want a specific pixel size, not a scalable file.
The exact HTML
Four lines in the <head> wire up the whole set. Browsers pick the format they understand and ignore the rest.
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
The sizes="any" on the ICO line tells modern browsers that prefer the SVG to still fall back to the ICO when they need a raster size. You do not need a separate <link> for every PNG — the manifest handles the Android sizes.
The manifest
The two Android icons live in site.webmanifest, not in the HTML head. Mark the 512 as maskable so Android can crop it to the launcher's shape without clipping your logo:
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}
The Google Search rule worth remembering
For your icon to appear next to your search result, Google wants a square icon whose side is a multiple of 48 (48, 96, 144…), served from a stable URL on an indexable page. The 48 inside your favicon.ico already satisfies this — which is the real reason 48 stays in the set. Google fetches it separately from the page and caches it, so after a change give it days to weeks.
So — how many files?
Five, plus a one-line manifest. If someone hands you twenty, they're solving 2013's problems. This generator writes exactly the set above — a true multi-size ICO, a clean SVG, the Apple touch icon and both manifest PNGs — with the matching <link> tags ready to paste.
Next: how to add them to your site · dark-mode & maskable details · back to the generator