Tooooolbox
100% private
August 15, 2026 · 5 min read
A favicon is the small icon that appears in a browser tab, next to the page title, and in bookmarks. It's tiny, but it matters: a site without one looks unfinished, while a clear favicon makes your brand recognisable among a wall of open tabs. The good news is that making one from an existing logo or image takes just a couple of minutes.
This is the question almost everyone arrives with, and the honest answer is that there is no single favicon size — there is a small set of them, because different platforms display the icon at different scales. Here is every size that still matters in 2026, and where each one is actually used.
| Size | Where it appears | File |
|---|---|---|
| 16×16 | Browser tab, address bar, bookmarks list | favicon.ico |
| 32×32 | Browser tab on high-DPI screens, Windows taskbar shortcut | favicon.ico |
| 48×48 | Windows desktop site shortcuts | favicon.ico |
| 180×180 | iPhone and iPad home screen | apple-touch-icon.png |
| 192×192 | Android home screen shortcut | site.webmanifest |
| 512×512 | Android splash screen, PWA install prompt | site.webmanifest |
| Scalable | Modern browsers, sharp at any size | icon.svg |
Because it's displayed at around 16×16 to 32×32 pixels, a favicon has to work when it's very small. Simple, bold shapes read well; detailed logos with thin lines or small text turn into an unreadable blur. If your logo is complex, use just its most recognisable element — a single letter, a symbol, a monogram.
A square source image works best, since the favicon itself is square. Make sure the important part is centred with a little breathing room around it so nothing gets cropped.
Start from an image that's at least 256×256 pixels so the icon stays sharp when it's generated at each size. Working from a high-resolution square logo gives the cleanest result.
Take your square logo or image, and convert it to an .ico file. Drop the image into our converter, choose ICO as the output, and download the favicon — it runs entirely in your browser, so your logo is never uploaded. If your source isn't square, crop it to a square first so the icon isn't distorted.
For the best result across all sizes, generate the .ico from a clean, high-contrast version of your mark rather than a busy full-colour photo.
The table lists seven sizes, but that does not mean seven files. The three small sizes — 16, 32 and 48 pixels — all live inside a single favicon.ico, which is a container format designed to hold several resolutions at once. The browser opens the file and picks whichever size fits the context. That is the whole point of .ico, and it is why the format has survived for thirty years.
So the modern set is four files, not seven: one favicon.ico holding the three small sizes, one SVG for browsers that support it, one 180×180 PNG for iOS, and two entries in a web manifest for Android. Older guides that tell you to generate twenty different PNGs are describing a era of mobile fragmentation that ended years ago.
If you only ever produce one file, make it the favicon.ico. It is the only one every browser looks for automatically, and a site with just that will display correctly everywhere — it will simply look slightly soft when someone saves it to a phone home screen.
Put the files in your site's root folder and reference them in the HTML head. Four lines cover every platform:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
The order matters less than it used to, but the sizes attribute on the first line does something useful: it tells browsers that understand SVG to prefer the scalable version, while leaving the .ico as the fallback for those that don't. Browsers that support neither simply find favicon.ico at the root on their own.
The manifest is a small JSON file listing the 192 and 512 pixel icons. You only need it if you want the site to install cleanly as an app on Android — for a regular website, the first three lines are enough.
Favicons are cached far more aggressively than any other asset, which makes them frustrating to debug. Browsers keep them in a separate store that a normal hard refresh does not clear, so you can deploy a new icon and still see the old one for days. Open the icon file directly by its URL to confirm it is really there, then reload that tab — that usually forces the update faster than clearing the whole cache.
The other common cause is a source image that was never square. A rectangular logo converted to a square icon gets either stretched or cropped, and neither looks intentional. Crop to a square first, with the important element centred and a little margin around it, then convert.
Finally, check the contrast against both light and dark browser chrome. An icon with a white background is invisible on a light theme; a dark monogram vanishes on a dark one. If your mark has a transparent background, test it against both before deciding it works.
Place the file (commonly named favicon.ico) in your website's root folder. Most browsers will find it automatically, but it's good practice to also reference it in your HTML head with a link tag: <link rel="icon" href="/favicon.ico">. If you use a website builder or CMS, there's usually a "favicon" or "site icon" upload field in the settings — just upload the file you created.
Once it's live, you may need to refresh or clear your cache to see the new icon in your tab. After that, your site looks that little bit more polished everywhere it appears.