How to make a favicon that actually shows up everywhere
A favicon is the tiny icon in a browser tab, in bookmarks, in history, and next to your site in Google search results. It is often the first piece of your brand a visitor sees — and the one most sites get wrong, because a favicon is not one file any more. Different places ask for different sizes, and a single 16-pixel image stretched onto a phone home screen looks like a smudge.
Which favicon sizes matter — and why
Older generators produced twenty or more files: Windows tiles, a dozen Apple sizes, a Safari mask icon. Modern browsers have quietly dropped almost all of them. What remains:
- 16×16 px — the classic browser-tab icon. Still the size most tabs display at normal zoom.
- 32×32 px — the retina tab icon. High-density screens pick this one, and it is also what bookmarks use.
- 48×48 px — Windows shortcuts, the taskbar, and desktop bookmarks. Skip it and Windows falls back to a blurry upscale of the 16-pixel file.
- 180×180 px — the Apple touch icon, used when someone saves your site to an iPhone or iPad home screen. It must be opaque: iOS ignores transparency and fills see-through areas with black.
That is the whole set. A 512-pixel Android icon and a web manifest belong to PWA territory — useful for an installable web app, unnecessary for a normal website.
The install snippet, explained line by line
After downloading the four PNGs, upload them to your site's root folder — the same folder
your homepage lives in — then paste this into the <head> of every page,
before the closing </head> tag:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Each line does one job. rel="icon" tells the browser "this file is the site
icon"; type="image/png" states the format; sizes="32x32" says
which size this file is, so the browser picks the best match instead of resampling one
file badly. The leading slash in href="/favicon-32x32.png" means "from the
site root", so the same snippet works on every page, including deep URLs like
/blog/my-post/. The fourth line is different: rel="apple-touch-icon"
is the name Apple devices look for, and it points at the 180-pixel file. If you use
WordPress, Squarespace, or Shopify, skip the snippet and use the Site Identity or favicon
upload field in your theme or site settings instead — the CMS writes these links for you.
ICO vs PNG: which format should you use?
Use PNG for everything you link in your HTML. PNG is sharper at small sizes, supports
transparency, and every modern browser accepts it. ICO is a 1990s Microsoft container that
can hold several sizes in one file — and it still matters for exactly one reason: browsers
automatically request /favicon.ico from your site root even when no link tag
mentions it, and some feed readers and older tools only understand ICO. So the practical
answer is both, in different roles: linked PNGs are what visitors actually see, and a
favicon.ico in your root folder is a silent fallback for the tools that
still ask for it.
The Apple touch icon is not optional
When someone on an iPhone taps Share, then "Add to Home Screen", iOS looks for
apple-touch-icon.png. If it is missing, the phone screenshots your page
instead — usually a cropped, zoomed-in mess sitting next to real app icons. Two rules:
the file must be exactly 180×180 pixels, and it must have a solid background.
Transparency is ignored and renders as black, which is why this tool always draws the
180-pixel export on your chosen background colour, even if your uploaded logo has a
transparent background.
Why your new favicon isn't showing (the browser cache trap)
The most common favicon problem is not a broken file — it is caching. Browsers cache
favicons aggressively, often for weeks, because the icon rarely changes. So your new
icon can be live on the server while your tab still shows the old one, or nothing at
all. First, hard-refresh: Ctrl+Shift+R on Windows or
Cmd+Shift+R on Mac. If that fails, open the site in a
private window, which uses a fresh cache. The reliable fix is a version query: change
the snippet to href="/favicon-32x32.png?v=2" and bump the number every
time you update the icon — the browser treats it as a brand-new file.
Mistakes this tool stops you making
Too much detail at 16 px
A full logo with a tagline is unreadable at 16 pixels. Use one or two letters, or a single bold mark. Check the 16 px preview on this page before downloading — if you cannot read it there, nobody can in a tab.
Low contrast letters
Grey letters on a light background vanish in a tab. The automatic letter colour picks black or white based on your background; if you override it, keep the contrast strong.
Transparent Apple touch icon
A transparent PNG becomes a black square on an iPhone home screen. This tool always renders the 180 px export on a solid background, so the mistake cannot happen here.
Uploading to the wrong folder
The snippet uses root-relative paths like /favicon-32x32.png. If the files land in a subfolder such as /images/, every link breaks. Upload to the root, next to your homepage.
Forgetting the snippet entirely
Files in the root folder with no link tags only help browsers that guess the default path. The snippet is what guarantees the right size is used in every tab, bookmark, and home screen.
Designing for one browser
Chrome, Safari, Firefox, and Edge each pick sizes slightly differently. The four-file set covers all of them — test the tab icon in at least two browsers before calling it done.