How to Create a Favicon That Works Everywhere
A favicon is sixteen pixels square in the place most people see it, and it is the only piece of your site that appears in a tab, a bookmark bar, a browser history list and a Google search result. It is also the piece most sites get wrong — usually by uploading one PNG, calling it done, and never noticing that half the places it appears are showing a blank page icon instead.
The fix takes about two minutes with a Favicon Generator. Here's what it needs to produce and why each piece exists.
One image is not enough
"Just add a favicon" was accurate in about 2005, when browsers wanted a single 16×16 favicon.ico at the site root. Today the same icon has to work at wildly different sizes in contexts that don't share a format:
| Where it appears | Size | Format |
|---|---|---|
| Browser tab | 16×16, 32×32 | ICO or PNG |
| Bookmark bar, history | 16×16 | ICO or PNG |
| Google search results | 48×48 minimum | Any, must be square |
| iOS home screen | 180×180 | PNG, no transparency |
| Android / PWA install | 192×192, 512×512 | PNG via web manifest |
| Windows tiles | 150×150 | PNG via browserconfig |
Two of these have teeth. Google requires at least 48×48 and a square aspect ratio — a 16×16 favicon is simply not shown in search results, which is exactly where a recognisable icon earns you clicks. And iOS ignores transparency: an icon with a transparent background gets composited onto black, so a dark logo designed to sit on white becomes a black square on the home screen.
Designing something that survives 16 pixels
Most favicons fail at design time, not export time. At 16×16 you have 256 pixels total — fewer than the characters in this paragraph.
- One shape, not a scene. A letter, a monogram, or a single silhouette. A full logo with a wordmark turns into grey mush.
- Drop the text. If your logo has words in it, use the first letter or the symbol. Nothing under about 5px tall is legible.
- High contrast, and check both directions. Browsers put tabs on light and dark chrome depending on the user's theme. A dark navy mark disappears in dark mode; a pale one disappears in light mode. A contrast checker will tell you before your users do.
- Fill the square. Padding baked into the image wastes pixels you can't spare. Let the shape reach the edges.
- Zoom out to check. Design at 512 and then look at it at 16. Almost every problem is visible immediately, and invisible at full size.
If your brand is genuinely a single character or symbol, an emoji favicon is a legitimate shortcut — emoji are designed to read at exactly this size, which is more than can be said for most logos.
Generating and installing the set
Upload a square source image, ideally 512×512 or larger, to the Favicon Generator. It produces the ICO, the PNG sizes, the Apple touch icon and the manifest entries as one bundle, along with the HTML to paste. If you already have an ICO and want the modern sizes from it, the converter goes the other direction.
The markup goes in <head> and is short:
favicon.icoat the site root — browsers request/favicon.icowhether or not you link it, and a 404 there is a wasted request on every page load- PNG links for 32×32 and 16×16
- An
apple-touch-iconat 180×180, with a solid background - A
site.webmanifestreferencing the 192 and 512 PNGs
The generator writes all of this for you; if you'd rather see the tags first, the code generator shows them on their own.
Then actually check it
This is the step people skip, and it's why so many live sites have a broken favicon they've never seen. Your own browser cached your icon weeks ago and will keep showing it long after you've changed it — favicons are cached aggressively and a hard refresh often isn't enough.
Verify from outside the browser you built it in:
- Run the URL through a favicon checker to confirm every declared file actually resolves
- Check specifically whether Google can use it — the 48×48 rule is the one that silently costs you visibility in search results
- Look at it against light and dark browser chrome
- Add it to an iOS home screen and confirm the background isn't black
The compatibility lab covers the awkward cases across browsers, and the checklist is worth a read before you call it finished.
The short version
Design one bold shape that reads at 16 pixels. Export the full set — ICO, 16, 32, 180, 192, 512 — with a Favicon Generator rather than by hand. Put favicon.ico at the root. Give the Apple icon a solid background. Then check it from outside your own cache, because the version you're looking at is almost certainly not the version your visitors are getting.