Search for a favicon generator and most will hand you a zip containing an ICO file, nine PNGs, a manifest and a browser config for a Microsoft tile that was discontinued years ago. Almost none of it is needed.
The ICO format exists because Internet Explorer required it. Every current browser takes a PNG, and most prefer an SVG.
What you actually need
| File | Purpose |
|---|---|
favicon.svg |
the tab icon, sharp at any size, can respond to dark mode |
favicon-32x32.png |
fallback for anything that will not take SVG |
apple-touch-icon.png at 180px |
iOS home screen |
192 and 512 PNGs |
Android install prompt and splash screen |
Four files and four lines of HTML. An SVG favicon is the one worth adding first, because it stays crisp on any display and can carry a prefers-color-scheme rule so a dark logo becomes light in dark mode — something no PNG can do.
Why 16 pixels is the real constraint
The icon that appears in a browser tab is 16 pixels across, or 32 on a high-density screen displayed at 16. That is not enough space for a logo.
At that size you have room for one shape or one letter. Detail does not shrink, it turns to mush — a wordmark becomes a grey smear, a detailed emblem becomes a blob.
This is why so many favicons are a single initial. Not laziness: it is the only thing that reads. Design for 16 first, and if it works there it will work everywhere else.
Why a square source matters
A favicon is square. Give a generator a wide logo and it must either letterbox it — leaving bars that look like a rendering fault — or crop it, losing the ends.
Cropping to fill is the better default because bars read as broken, but the real answer is to supply a square mark. Most brands with a wide wordmark have a compact symbol for exactly this situation.
Why is my new favicon not showing?
Because browsers cache favicons far more aggressively than other assets, and often ignore a hard refresh.
The file is almost always fine. Things that work: opening the icon URL directly and refreshing that, clearing site data, or a different browser profile. Changing the filename works reliably and is the pragmatic option during development.
Questions people ask
Do I still need favicon.ico at the root? Some crawlers and feed readers request it and will log a 404 if it is missing. Harmless either way.
Can one SVG cover everything? For browsers, effectively yes. iOS still wants a PNG for the home screen.
Does the favicon affect SEO? Google shows it beside the result in mobile search, so it affects whether someone clicks. It is not a ranking factor.
What about the Microsoft tile config? Discontinued. Safe to skip.
The favicon generator produces the sizes that are used and gives you the HTML, and the image resizer and make image round help prepare a square source.