Rendered here, not on a server
The logo is decoded, drawn into six canvases at six sizes and encoded as PNG, all inside the tab. Nothing is uploaded, which is worth caring about for a brand mark that has not launched yet. The download links point at data URLs held in memory. As always the check is the network tab, or working offline.
Which of these you actually need
The classic favicon kit runs to a dozen files and most of them are answering questions nobody asks any more. Here is the honest split.
| File | Still earning its place |
|---|---|
favicon.svg | Yes, and it is the best one. A single vector file is sharp at every size, supports a dark-mode variant through a media query inside the SVG, and is usually smaller than the 32 px PNG. Every current browser takes it. |
| 32 x 32 PNG | Yes. The fallback for anything that does not do SVG, and the size most tab bars and bookmark lists reach for. |
| 180 x 180 apple-touch-icon | Yes, if anyone might add the site to an iOS home screen. iOS ignores the manifest icons for this. |
| 192 and 512 PNG | Yes, if you ship a web manifest. Android uses 192 for the home screen and 512 for the install splash and listings. |
| 16 x 16 PNG | Rarely. Browsers downscale the 32 competently. Supply it only if your mark has fine detail that needs hand-tuning at that size — in which case it should be a different, simpler drawing rather than a mechanical reduction. |
| 48 x 48 PNG | Rarely. Some Windows shortcut and search-listing contexts prefer it; nothing breaks without it. |
favicon.ico | No. It exists for Internet Explorer. Modern browsers only fetch /favicon.ico as a last resort when no icon link is declared at all. |
So the short answer for most sites: a well-drawn SVG plus one 32 px PNG, an apple-touch-icon if home screens matter, and the two manifest sizes if you have a manifest. That is four files and it behaves better than the pile of ten, because a vector never has to be guessed at by a downscaler.
Putting them in place
Upload the PNGs to the site root and paste the link tags into <head>. Root placement matters more than it looks: /apple-touch-icon.png is found by iOS with no tag at all, and the manifest's icon paths are resolved relative to the manifest file. If the icon does not change after you deploy, that is caching rather than a broken path — favicons are cached unusually aggressively. Check in a private window first, and add ?v=2 to the href if you need to force it for everyone.
Transparency, padding and masks
Transparent backgrounds suit tab icons, where the browser chrome shows through and the mark reads as a shape. They suit home-screen icons badly. iOS flattens any transparency against a background of its own choosing, and Android applies an adaptive mask that can be a circle, a squircle or a rounded square depending on the launcher. That mask can trim up to roughly 15% off each edge, which is why 5 to 10% padding on the large sizes is the safe default. The corner-rounding control here is a preview aid — the operating system applies its own mask regardless of what shape you baked in, and baking one in can leave visible corners inside theirs.
What makes a source image work
Square, at least 512 px, and simple. The hard constraint is 16 px: at that size you have 256 pixels total to work with and a wordmark is illegible in every one of them. The standard answer is a symbol, a monogram or a single initial, drawn specifically for the small sizes rather than shrunk into them. Test by looking at the 16 px preview above at arm's length. If you cannot tell what it is, neither can anyone scanning a row of tabs — and that row is the only place this artwork ever has to compete.
Questions people ask
Why is there no .ico file?
Because almost nothing needs one. ICO is a Windows container that can hold several bitmaps in one file, and its relevance ended with Internet Explorer. Modern browsers read PNG and SVG icons from link tags and only fall back to requesting /favicon.ico when a page declares no icon at all. If some legacy tool in your stack insists, any ICO converter will take the 32 px PNG this produces.
The new icon is not showing on my site.
Almost always the cache. Favicons are held far longer than other assets and a hard refresh often does not clear them. Check in a private window to confirm the file is correct, then add a query string to the href to force everyone else past it. If the private window is also wrong, the path is wrong: the tags use root-relative paths, so the files have to be at the root, not in an assets folder.
Can I make a dark-mode variant?
With an SVG, yes, and it is one of the better arguments for using one. A media query inside the SVG file switching fill colours on prefers-color-scheme will be honoured when the browser renders the icon. PNGs cannot do this — a PNG favicon is one fixed set of pixels, so the usual approach is a mark with enough contrast to survive both a light and a dark tab strip.
My source is an SVG. Does that work here?
It does. The browser rasterises the SVG at each target size, so the results are cleaner than downscaling a PNG would give. Keep the original SVG as well and serve it as favicon.svg alongside these — that way capable browsers get the vector and everything else gets a PNG rendered from the same artwork.