How to Add a Favicon to Your Website (Every Size, Done Right)
Your favicon is the smallest image on your site and the one people see most often. It sits in every browser tab, in the bookmarks bar, in history, in search results, and on the home screen when someone saves your site to their phone. It is the only piece of your brand that survives being shrunk to 16 pixels.
And it is usually the last thing anyone sets up — which is why so many sites still show a default globe, or a blurry thumbnail of a logo that was never designed to be that small.
The files you actually need
The list is shorter than the old advice suggests, but it is not one file.
| File | Size | Where it shows up |
|---|---|---|
favicon.ico |
16, 32, 48 (multi-size) | Legacy browsers, older bookmarks, /favicon.ico requests |
favicon-32x32.png |
32×32 | Modern desktop browser tabs |
favicon-16x16.png |
16×16 | Small tabs, some bookmark bars |
apple-touch-icon.png |
180×180 | iOS home screen, Safari pinned tabs |
icon-192.png |
192×192 | Android home screen, PWA |
icon-512.png |
512×512 | PWA splash screen, app stores |
The .ico format is still worth shipping. Not because modern browsers need it — they do not, and PNG works everywhere. It is because browsers and crawlers still request /favicon.ico by default when no icon is declared, and a 404 in your logs every day is a small, permanent annoyance. A multi-size ICO covers it.
The 192 and 512 files are not for <link> tags at all. They belong in your web app manifest:
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}Surviving 16 pixels
This is the constraint that decides whether your favicon works, and it is a design problem, not a technical one.
At 16×16 you have 256 pixels to work with. A logo with a tagline, fine strokes, or more than two colours turns into mud. What survives:
One bold shape. A single letter, a simple geometric mark, or a strong silhouette. Think of the icons that stick in your memory — they are almost all one idea.
High contrast. The icon sits on a tab bar whose colour you do not control, and which changes between light and dark mode. A mark that only reads against white will vanish for half your visitors.
Transparency over a filled square. A transparent background lets the icon adapt to whatever the browser puts behind it. A solid white square looks like a broken image in dark mode.
No text below about 20px. If your brand is a word, use the initial letter. Nobody reads a 16-pixel word.
If your logo cannot be simplified this far, that is not a reason to ship a blurry version of it. Ship a simplified mark instead — a single letter in your brand colour is a perfectly good favicon, and better than a recognisable-but-illegible logo.
Generating the set
- Open the favicon generator.
- Upload your logo — a square image of 512×512 or larger gives the cleanest result. PNG with transparency works best.
- Look at the live preview at 16 and 32 pixels. This is the whole point: if it is unreadable here, it will be unreadable in a real tab.
- Download the package and drop the files in your site’s root.
If your logo is not square, the tool centres it on a square canvas with transparent padding rather than stretching or cropping it. That is the right default — a stretched logo is worse than a padded one.
Adding the tags
Paste this into your <head>:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Two things worth knowing. First, the browser picks the size it wants from this list — you are not choosing, you are offering. Second, order does not matter; sizes does.
The caching trap
You will change your favicon, refresh, and see the old one. You will refresh again. You will start to doubt the file was uploaded.
Favicons are cached harder than almost anything else on the web. Browsers keep them for days, sometimes weeks, and a normal refresh does not clear them. When you are testing:
- Hard-reload (Ctrl+Shift+R / Cmd+Shift+R) rather than a normal refresh
- Test in a private window, which starts with a clean cache
- If it still will not budge, rename the file (
favicon-v2.ico) and update the link — a new filename is a new resource, with no cache entry to fight
Do not conclude the file is broken until you have tried all three. The most common favicon bug report is not a bug at all.
Beyond the tab: the share card
The favicon is the icon people see after they arrive. The image they see before they arrive is your social share card — the preview that appears when someone pastes your URL into a chat app or a social post.
That image is 1200×630 pixels and it does far more work than the favicon: it is often the only thing standing between a click and a scroll-past. A plain screenshot with no padding or background looks like an accident. The same screenshot with a gradient backdrop, rounded corners, and a soft shadow looks deliberate — which is exactly what the screenshot mockup tool is for, and it renders at 2× so the text stays sharp on retina displays.
If your source screenshot is the wrong shape for the 1.91:1 card ratio, resize it to the social dimensions first, then frame it.
Frequently asked questions
What size should my source image be? 512×512 or larger, square, PNG with transparency. Everything in the package is generated by downscaling from that, so a bigger, cleaner source gives sharper small icons.
Do I still need favicon.ico in 2026?
Yes, for the default /favicon.ico request that browsers and crawlers still make, and for older clients. It costs nothing to include.
Why is my favicon blurry? Because fine detail does not survive downscaling to 16 pixels. Simplify the mark — a bold shape or a single letter — rather than trying to sharpen a complex logo.
My favicon is not updating. What is wrong? Almost certainly cache. Hard-reload, test in a private window, and if it persists, rename the file. Browsers hold favicons far longer than other assets.
Do I need the 192 and 512 icons?
Only if you want your site to install as a PWA or show properly on an Android home screen. They go in the manifest, not in <link> tags.
Should the favicon have a transparent background? Yes, in most cases. A transparent background adapts to both light and dark browser chrome; a solid white square turns into an ugly box in dark mode.