Five sizes cover everything in real use: 16, 32 and 48 px bundled inside a single favicon.ico, a 180 px apple-touch-icon.png for iOS home screens, and 192 and 512 px PNGs for Android. That is the whole list. If a generator hands you twenty files and eighteen lines of markup, most of it is aimed at browsers and platforms that stopped mattering years ago.
The sizes, and what each one is for
| Size | Where it lives | What uses it |
|---|---|---|
| 16 px | inside favicon.ico | the browser tab, drawn at actual size |
| 32 px | inside favicon.ico | tabs on high-density screens, the bookmarks bar, taskbar pins |
| 48 px | inside favicon.ico | Windows desktop shortcuts, and the size Google's guidance is built around |
| 180 px | apple-touch-icon.png | the iOS home screen |
| 192 px | icon-192.png, via the manifest | the Android home screen |
| 512 px | icon-512.png, via the manifest | Android splash screens and install prompts |
Six sizes, four files, because the first three share one container. Some setups also ship standalone 16 and 32 px PNGs alongside the .ico. They are harmless and a couple of kilobytes each, but nothing breaks without them.
Why one .ico holds three images
ICO is not an image format, it is a container. Six bytes of header, then a sixteen-byte directory entry per image saying how large it is and where in the file it begins, then the image data. Since Windows Vista those entries are allowed to be complete PNG files rather than raw bitmaps, which is how a three-size .ico stays down in the low kilobytes.
The browser picks whichever embedded size suits the spot it is drawing into, so one file covers both the 16 px tab icon and the 48 px desktop shortcut. One quirk of the format explains the split between .ico and PNG: a dimension is stored in a single byte, and 256 is written as zero. 256 px is the hard ceiling, which is why the Apple and Android icons are separate PNG files rather than more entries in the same container.
Keep the .ico even if you also ship an SVG. Browsers request /favicon.ico from the site root on their own, with no link tag telling them to, so it still works when your markup is missing, cached strangely or stripped by something in between.
Why Apple wants 180 and Android wants 192 and 512
180 px is 60 points at 3× density, which is the home screen icon slot on an iPhone. Older iOS versions asked for a spread of sizes — 57, 72, 76, 114, 120 and 152 — but iOS scales down from the largest one it finds, so a single 180 px file covers all of them. Draw to the edges of the square: iOS applies its own rounded mask, and a square with pre-rounded corners ends up double-rounded.
Android reads icons from the web app manifest instead of link tags. 192 px is the home screen icon, 512 px is used for splash screens and the install prompt. Both are required if you want a site to be installable at all.
There is a catch here that most generators skip. Android can mask an installed icon into a circle or a squircle, and it only does that for icons marked "purpose": "maskable" in the manifest, with the artwork kept inside the middle 80% so the crop does not eat it. An unmarked icon gets placed on a plain backdrop instead of filling the shape. If that matters to you, add padding to the source and edit the manifest by hand — no generator can guess how much of your logo is expendable.
The sizes you can stop generating
The twenty-file favicon cheat sheet was real advice once. Most of it has aged out:
- The apple-touch-icon zoo — 57, 72, 76, 114, 120 and 152 px, each with a
-precomposedtwin. One 180 px file replaces all twelve. - The Windows tile set —
mstile-*.pngplus abrowserconfig.xml, for pinned tiles on the Windows 8 and 10 start screen. That interface is gone. - The 96 px PNG, which the cheat sheets listed for Google TV. Also gone.
- Safari's monochrome mask icon for pinned tabs, a single-colour SVG with its own
mask-iconlink. Modern Safari uses your normal icon.
Deleting these costs you nothing measurable. Keeping them costs you a directory full of files you will forget to update the next time the logo changes, which is the actual failure mode.
What Google wants for the icon in search results
Google's guidance is that the favicon be a square whose dimensions are a multiple of 48 px, served from a stable URL it can crawl. The 48 px image inside the .ico satisfies that, which is the main reason to bother including it.
Google rescales the icon down for the result row, so what decides whether it helps is whether it survives at thumbnail size. Google also reserves the right to ignore your icon and show a generic globe — it is a hint, not a guarantee.
Your logo will not survive at 16 pixels
This is the part that sizes cannot fix. A 16 × 16 icon is 256 pixels in total. A wordmark turns into texture, a one-pixel outline disappears completely, and anything with more than two or three shapes goes to mud. The logos that work as favicons were already simple before anyone shrank them: one letter, one symbol, one silhouette.
Resampling technique buys you some of it back. Browsers downscale in a single step, which is fast and produces soft, aliased edges; halving repeatedly and doing the last step from close range holds edges together noticeably better. The favicon generator here does the repeated halving and writes the .ico byte by byte in your browser, so you get all six sizes plus the markup from one source image without uploading anything. It still will not match a 16 px icon drawn by hand with the strokes aligned to the pixel grid. If your favicon genuinely matters, draw the small one yourself and generate the rest.
The other common problem is that logos are wide and icons are square. Something has to give: crop the sides off, or shrink the whole thing into the middle until it is a smear. Usually the answer is to take the mark out of the wordmark, which means cropping to a square first so you control which part survives instead of letting the fitting mode decide.
Transparent background or solid?
Transparency looks cleaner right up until the browser theme matches your artwork. A dark logo on a transparent background vanishes against a dark tab strip, and browsers will not swap icons for you.
Two honest fixes. Give the icon a solid background so it can never blend in — slightly less elegant, never invisible. Or ship an SVG favicon with a prefers-color-scheme media query inside it, which current desktop browsers honour. Support for SVG favicons is good in current Chrome, Edge and Firefox and patchier elsewhere, and older browsers ignore the tag entirely, so the .ico stays either way as the fallback. PNG and ICO handle transparency the same way a PNG does anywhere else, which is the reason icons are never JPEGs — no alpha channel, and flat colour is exactly the case JPEG handles worst.
Why the new favicon is not showing up
Because it is cached, nearly every time. Browsers cache favicons aggressively and in a store separate from the normal page cache, so a hard reload of the page frequently leaves the old icon sitting there. Open /favicon.ico directly in a tab and reload that, or check in a private window, to confirm the new file is actually being served.
If the old icon is still there in a private window, the problem is the server, not the cache. Check that the files are at the site root rather than in an assets folder, and that the paths in your link tags start with a slash — a relative path resolves differently on a nested page, which is the kind of bug that only shows up on one section of a site.
If you want the files rather than the explanation, the favicon generator turns one image, or one letter and two colours, into the .ico and the PNGs at every size above, plus the markup and the manifest to paste in. It runs in your browser, so the logo you are not ready to publish yet never leaves your machine.
Icons are the one place where the usual rule about serving fewer, larger images goes out the window. If you are sizing the rest of the page, the pixel widths and file size targets for web images covers heroes, article images and thumbnails, where the arithmetic works in the opposite direction.
Frequently asked questions
What favicon sizes do I need?
Six sizes in four files: 16, 32 and 48 px inside favicon.ico, a 180 px apple-touch-icon.png for iOS, and 192 and 512 px PNGs referenced from a web app manifest for Android. Anything beyond that targets platforms that are no longer in use.
Is 16x16 or 32x32 better for a favicon?
Neither replaces the other, which is why a favicon.ico holds both. 16 px is what a browser tab draws on a standard display and 32 px is what it uses on a high-density screen, in the bookmarks bar and on taskbar pins. Ship one file containing both and the browser picks.
Can I use a PNG instead of a favicon.ico?
Yes, every current browser accepts a PNG favicon through a link tag. Keep the .ico anyway: browsers request /favicon.ico from the site root without being told to, so it still works when the markup is missing or the page is being rendered by something that strips head tags.
Why does my favicon look blurry?
Usually because a large image was scaled straight down to 16 px in one step, which softens every edge. The other cause is detail that cannot exist at that size — a 16 px icon is 256 pixels in total, so thin strokes and small text become grey mush no matter how the resizing is done.
Does a favicon affect SEO?
Only indirectly. Google can show a favicon beside your result on mobile, and its guidance asks for a square that is a multiple of 48 px at a crawlable URL. It is not a ranking factor, and Google may substitute a generic icon if yours is missing or unsuitable.
Last updated September 19, 2026