Common fix · Files
Make a favicon for your site
The small icon in the browser tab, on the phone home screen, and in the bookmark list.
By Suprabhat Updated How we write these
2 min read
A favicon is one of those jobs that looks like it should take a minute and then eats an afternoon, because every guide lists a different set of files. Most of those lists are a decade old: they cover Windows tiles and iOS versions nobody runs.
Today it is four files and four lines of HTML. The one that trips people up is not making them — it is where they go, and the fact that browsers cache the old one hard enough to make you think nothing happened.
What to do
-
Start from a square image
An SVG is ideal, because every size is rendered fresh from it. Otherwise use a PNG of 512 px or more. If the logo runs right to its own edges, add a little breathing room so it is not clipped when Android crops it to a circle.
Open the favicon tool -
Cut the background out, if it has one
A favicon sits on whatever color the browser uses, which is not always white. If your logo came on a white box, make that transparent first and the icon will look right in dark mode too.
Remove the background -
Put the files in the top folder and paste the HTML
Everything goes in the folder that answers “/”, so the addresses read yoursite.com/favicon.ico. Then paste the four lines into the <head> of every page. Browsers look for /favicon.ico on their own, which is why that one keeps its name.
-
Check it before you believe it
Open yoursite.com/favicon.ico directly. If the file loads but the tab still shows the old icon, it is the cache: reload ignoring the cache, or open the site in a private window.
Settings that work
| Source | SVG, or a square PNG of 512 px or more |
|---|---|
| Breathing room | 0% for a mark that already has margin, 10–20% for one that does not |
| Background | Transparent, except the Apple icon, which iOS fills in anyway |
Worth knowing
- The Apple touch icon is always flattened onto a color. iOS renders transparency as black, so a transparent one looks like a hole.
- If you also want an installable app icon, the manifest file lists the 192 and 512 px PNGs. Edit its name and colors before uploading it.
Questions
What size should a favicon be?
There is no single size any more. The ICO holds 16, 32 and 48 px for old browsers; modern ones use an SVG or a PNG of 96 px and up, and phones want 180 px and 192/512 px. Start from one square source of 512 px or more and every size comes from it.
Why is my favicon not updating?
Browsers cache favicons far longer than pages. Open the icon file directly to confirm it is live, then reload ignoring the cache or use a private window. Changing the file name is the sledgehammer that always works.
Do I still need favicon.ico?
Yes, but only as one small file. Browsers and feed readers still request /favicon.ico by name even when your HTML points elsewhere, and returning a 404 for it litters your logs.