Search for favicon size and you will find a checklist of fifteen files, most of which nothing has asked for in years. The honest version is smaller: as of September 2026, four files cover essentially every surface your icon will appear on, and only one of them is genuinely required.
The long lists are archaeology. They accumulated because every platform that wanted an icon added its own filename and dimensions, and nobody deleted the entries once those platforms stopped asking. Here is what each file is actually for, the exact link tags, and the caching behaviour that makes people think their new favicon did not deploy.
Why the fifteen-file lists exist
Nearly every entry on those lists traces to a consumer that has gone away or changed how it picks an icon:
- Windows tile icons — the
browserconfig.xmlfile and its four tile sizes existed for pinned sites on the Windows 8 and 10 start screen. That surface is gone. - Per-device Apple touch icons — Apple's documentation once listed separate sizes for the non-Retina iPad, the Retina iPad, and each iPhone generation. iOS now scales one sufficiently large source.
- The Android icon ladder — manifest icon sets ran from 36×36 up to 384×384 because Chrome had not yet committed to scaling. It has.
- Safari pinned tab masks — a monochrome SVG for a Safari feature almost nobody uses.
None of these break anything if you keep shipping them. They are just files nobody requests, cluttering your <head> and your build step.
The favicon size list you actually need
Four files, with a clear statement of which are optional. This is the shape as of September 2026 — a recommendation with a date on it, not a permanent truth.
| File | Size | What it covers | Needed? |
|---|---|---|---|
/favicon.ico | 32×32 (can also hold 16 and 48) | Browser tabs, bookmarks, and every client that requests the root path without being told to | Yes, in practice |
/icon.svg | Vector | Sharp tab icons at any display density | Optional |
/apple-touch-icon.png | 180×180 | The iOS home screen, when someone saves your site | Optional |
| Manifest icons | 192×192 and 512×512 | Android home screen and install prompts | Only if the site is installable |
Strictly speaking, one file is required: something the browser can find and draw in a tab. Everything past favicon.ico buys one specific surface, and if you do not care about that surface you can skip it. A site with no manifest does not need manifest icons.
The exact link tags
Four lines in the <head>:
<link rel="icon" href="/favicon.ico" sizes="32x32"><link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="manifest" href="/manifest.webmanifest">
MDN describes sizes and type as hints that let the browser choose the most appropriate icon available, and documents sizes="any" as meaning the icon is a vector, scalable to any size. Declaring the .ico as a fixed 32×32 and the SVG as any is what steers an SVG-capable browser to the scalable file.
Keep those filenames at the site root even though you are linking them, because both fallbacks depend on it. MDN notes most browsers automatically use a favicon.ico found at the root, which is why many sites omit the link element entirely. Apple documents the same behaviour for touch icons: with no link element, iOS looks in the root for apple-touch-icon.png.
favicon.ico vs PNG vs SVG
ICO is a container. An .ico file holds one or more images at multiple sizes and colour depths, so a single file can supply 16×16, 32×32 and 48×48 and let the consumer pick. That is the one thing PNG cannot do — a PNG favicon is exactly one size, and covering three means three files and three link tags. It is also the format every browser understands, and the one requested from the root whether you asked or not, so having it there stops a trickle of 404s in your logs.
SVG scales, but support arrived late. Per caniuse as of September 2026, SVG favicons work in Chrome and Edge from version 80 and Firefox from 41, but in Safari only from version 26.0. Safari is the reason not to ship an SVG on its own: anyone on an older version gets no icon at all. Treat it as an enhancement over an .ico or PNG, not a replacement.
PNG is fine as the base if you would rather not generate an ICO. A 32×32 PNG linked with type="image/png" renders everywhere; you just give up the multi-size container.
Why the tab is tiny but the source files are not
A browser tab draws the favicon in a slot of roughly 16 CSS pixels, which is the number people latch onto and why a 16×16 file feels like it should be enough. It is not, because CSS pixels are not device pixels. On a 2× display that slot is 32 device pixels; on a 3× phone display, 48. Hand the browser a 16×16 source and it upscales — the same process behind Why Images Get Blurry When You Resize Them.
So the larger sources are about display density, not the tab getting bigger, plus the few places that draw the icon genuinely larger: bookmark managers, the new tab page, the home screen.
The design consequence matters more than the file list. Whatever you draw has to survive at 16 pixels wide, and a wordmark does not. One letter, one shape, or a heavily simplified mark is what works. The favicon generator produces the sizes from a single source image, and the image resizer is enough to preview a mark at 16 pixels before you commit.
apple-touch-icon size and the manifest icons
apple-touch-icon is the iOS home screen icon, used when someone taps Add to Home Screen. 180×180 is the figure to use: Apple's configuration documentation lists it as the Retina iPhone size alongside 152×152 for iPad and 167×167 for iPad Pro, and Chrome's Lighthouse audit accepts 180×180 or 192×192. That audit adds one constraint people trip over — the background must not be transparent. iOS applies its own rounded corners, and a transparent PNG typically comes out black. The apple-touch-icon-precomposed suffix in old snippets existed so older Safari would skip a gloss effect; it is no longer needed.
Manifest icons are a separate system, for Android home screens and install prompts. Chrome's guidance is that you must provide at least a 192×192 and a 512×512 icon, and that it scales from those two automatically unless you want pixel-level control, in which case you supply increments of 48dp. Add "purpose": "any maskable" to an icon entry to tell Android the artwork has a safe zone that survives being cropped to a circle. Chromium accepts SVG manifest icons but still says to include a rasterised fallback.
If nobody installs your site, none of this section applies.
Why your favicon did not update
This is the most reported favicon problem and it is almost never a bad file. Browsers cache the icon like any static asset, and on top of that keep a separate icon store keyed to the site — so reloading the page, even hard-reloading it, often does not refetch the icon at all.
The reliable fix is to change the URL, because a new URL is a cache miss by definition:
- Add a version string to the linked file:
/icon.svg?v=2, bumped whenever the artwork changes. - Or rename the file outright and update the link tag.
- The implicit
/favicon.icorequest cannot be versioned that way, since nothing in your HTML controls it. Give that file a sensibleCache-Controlmax-age instead. - Open the icon URL directly in a tab. If the new artwork appears, the file deployed and you are looking at a cache, not a build problem.
The other causes are duller. The path in the link tag 404s, usually because the file sits in an assets folder in development and at the root in production. Or the .ico is a renamed PNG, which some browsers tolerate and others quietly refuse. Both show up in the network panel — 10 Browser-Based Tools That Save Developers Time name the failing request in seconds, which beats redeploying three times.
Generate every favicon size from one source image, entirely in your browser.
Open Favicon Generator →Frequently asked questions
32x32 is the practical answer for the main file, ideally inside a .ico that also carries 16x16 and 48x48 so the browser can pick. Add a 180x180 apple-touch-icon.png if you want an iOS home screen icon, and 192x192 plus 512x512 manifest icons only if the site needs to be installable. Everything beyond that on the older fifteen-file checklists is optional.
Yes, in practice. Browsers and other clients request /favicon.ico from the site root whether or not you link to it, so the file stops those requests 404ing. It is also the only favicon format that stores several sizes in one file, and the only one supported by every browser still in use, including Safari versions that cannot render an SVG icon.
180x180 pixels, as a PNG with a non-transparent background. That is the Retina iPhone size in Apple's configuration documentation, and Chrome's Lighthouse audit accepts either 180x180 or 192x192. iOS applies its own rounded corners, so a transparent background usually renders as black. One file at this size is enough; the older per-device list of 120, 152 and 167 is no longer necessary.
Browsers cache favicons separately from page content, so reloading the page does not refetch the icon. Change the URL to force a new fetch — append a version query string such as /icon.svg?v=2, or rename the file and update the link tag. If the icon still looks wrong, open the icon URL directly in a tab to confirm whether the new file actually deployed.