Generate a favicon set
Not forty files. The four browsers, iOS and Android actually ask for — plus the four lines of HTML that point at them.
Worth doing if your mark is a dark line drawing: a transparent icon with dark strokes disappears against a dark browser tab bar.
Generate the set first
Why the answer is four files, not forty
Favicon packs from the early 2010s shipped thirty or more images: Windows 8 tile icons, a dozen apple-touch-icon variants for iOS versions that specified their own sizes, sizes for browsers that no longer exist. Nearly all of it is dead weight now, and shipping it means thirty extra files in your repository that nothing ever requests.
Since roughly 2019 the list has settled to this:
- favicon.ico — the browser tab and Windows shortcuts. Browsers request
/favicon.icofrom the site root even when no<link>tag mentions it, so this one file alone is enough for a working favicon. - favicon.svg — if your mark is vector. Modern browsers prefer it, it stays sharp on any display, and a media query inside the SVG can make it respond to dark mode. Included automatically here when your source is an SVG.
- apple-touch-icon.png at 180 px — what iOS puts on the home screen when someone saves your site. iOS composites it onto a solid background, so this one is always given an opaque background rather than a transparent one.
- Two PNGs at 192 and 512 px, referenced by a web app manifest — Android's home-screen icon and the splash screen for an installed progressive web app.
Why a real ICO and not just a PNG
Browsers will happily use a PNG if you point a <link rel="icon"> at one. The reason to keep an actual ICO is that it is a container: several complete images at different sizes packed into one file, so whatever is asking — a 16 px tab, a 32 px bookmark bar, a 48 px Windows taskbar shortcut — picks the entry it wants rather than downscaling a large image badly.
The ICO written on this page stores each size as a PNG-compressed entry, which every version of Windows since Vista reads and which is roughly a tenth the size of the old uncompressed bitmap format that most icon converters still emit. The file is assembled here, byte by byte, by this page's own code — there is no conversion service behind it.
What makes a source image work
Square, at least 512 px, and much simpler than you think it needs to be. A 16 px icon has 256 pixels in total. A wordmark rendered into that becomes a grey smear; three letters become two. Take the single strongest shape out of your logo — the monogram, the symbol, the one distinctive silhouette — and use that alone.
Contrast matters more than detail. Browser tab bars are light in one theme and near-black in the other, so a transparent icon drawn in thin dark strokes vanishes for half your visitors. If your mark is dark, give it a solid background using the option above; if it is a light shape, transparency is usually fine. Nothing is cropped here — the image is fitted inside each square, so a non-square logo gets padding rather than losing its edges.
Where the files go
All of them belong at the root of your site, next to index.html, and the HTML snippet assumes exactly that. Open the generated site.webmanifest before you ship it and replace the placeholder name — that string is what Android shows under the icon on the home screen. If you already have a manifest, merge the icons array into it rather than overwriting the file.
One warning that saves a lot of time: browsers cache favicons far more aggressively than anything else on a site, and a hard refresh often does not clear them. If your new icon does not appear, it is usually still working — check in a private window before you start changing the files again.
Common questions
Where do these files go on my site?
All at the root, alongside index.html, which is what the generated HTML snippet assumes. Browsers request /favicon.ico from the root automatically, so that one has to live there in any case.
Do I really need all of them?
favicon.ico alone gives you a working favicon in every browser. The others matter only if someone saves your site to an iOS or Android home screen, or installs it as a progressive web app.
Why has my favicon not changed?
Favicon caching is unusually aggressive and survives ordinary refreshes. Check in a private window first. If you need to force it, giving the file a new name and updating the link tag is more reliable than any cache header.
Can I use an SVG as the source?
Yes. It is rasterised at each size, and the original SVG is included in the set as favicon.svg with a link tag pointing at it, since modern browsers prefer the vector when one is offered.
What does the background option do?
It fills each icon square with a solid colour instead of leaving it transparent. Use it when your mark is dark, because a transparent dark icon disappears against a dark browser tab bar.
Is my logo uploaded to a server?
No. The resizing, the ICO packing and the zip are all done by this page in your browser. Nothing is transmitted, which also means nothing of yours is sitting in someone's temporary folder.