Favicon Generator

Why one file is not enough any more

A favicon used to be a single favicon.ico at the root of the site and nothing else. That is still the fallback a browser reaches for when it finds no link tag, so it is worth having, but it is no longer the whole answer. A tab wants a small icon, a bookmark wants a larger one, an iPhone home screen wants a 180 pixel PNG with no transparency, and an installable web app wants 192 and 512 pixel icons named in a manifest.

The sizes this produces are the ones that are actually requested: 16 and 32 for the browser tab and bookmarks, 48 for older Windows shortcuts, 180 for the Apple touch icon, and 192 and 512 for the web app manifest. Everything else that gets recommended online is either a duplicate or a legacy Microsoft tile that no current browser reads.

What makes a good source image

Start square and start large. A 512 pixel PNG downscales cleanly to every size below it; a 64 pixel image scaled up to 512 looks exactly as bad as it sounds. If you have an SVG, export it to a large PNG first, because the resizing here works on pixels.

Then look at the 16 pixel version before you ship it, not the 512. A logo with a wordmark, a thin outline or fine detail turns into grey mush at tab size, which is why most recognisable favicons are a single letter, a single shape, or a heavily simplified version of the full logo. If the small one is unreadable, the fix is a different image, not a different generator.

Transparency is worth a moment of thought too. A transparent background is right for the browser tab, where the icon sits on the tab's own colour. It is wrong for the Apple touch icon, which is composited onto a white or black rounded square depending on the device, so a transparent logo can come out invisible. The touch icon generated here is given a solid background for that reason.

Where the files go

Put the PNGs wherever your site serves static files and use the generated link tags with paths that match. If your site is at the root of a domain, the usual arrangement is a /icons/ folder and absolute paths, which keeps the tags identical on every page. The manifest entries only matter if you already have a web app manifest; without one, the 192 and 512 icons do no harm and no work.

One caution about caching: browsers hold on to a favicon aggressively, and a hard refresh often does not clear it. If the old icon persists after you deploy, open the icon file itself in a tab to confirm the new bytes are being served, then leave it a while rather than assuming the tags are wrong.