What is a favicon and why does mine not show?
Caching, wrong sizes and missing formats — the three reasons, and the small set of files that actually covers every platform.
A favicon is the small icon in the browser tab, bookmarks and search results. It usually fails to appear because browsers cache favicons aggressively, because the file is the wrong size or format, or because only one size was provided and the platform wanted another.
Where it appears
- The browser tab and window.
- Bookmarks and the history list.
- Google search results on mobile, next to your listing.
- The home screen icon when someone saves your site on a phone.
- Link previews in some chat applications.
The search result appearance is the one people forget. A missing or broken favicon leaves a blank placeholder next to your result while competitors show a logo.
Why yours is not showing
Caching
Browsers cache favicons far more aggressively than other assets, sometimes ignoring normal cache headers entirely. After changing one:
- Hard reload does not always clear it.
- Visit the icon URL directly and reload that.
- Try a private window, or a different browser.
- Give it days rather than minutes before concluding it is broken.
Wrong size or format
Google requires a favicon to be a multiple of 48×48 for search results — a 16×16 icon is ignored there. Home screen icons want 180×180 or larger. One small file does not cover everything.
Not actually reachable
Check the URL directly. A path that 404s, a file blocked by robots.txt, or an icon served with the wrong content type will all silently fail.
A set that covers everything
<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"><!-- 180x180 -->
<link rel="manifest" href="/site.webmanifest">| File | Size | Used by |
|---|---|---|
favicon.ico | 32×32 (may contain 16 and 48 too) | Legacy browsers; still requested at the root |
icon.svg | Scalable | Modern browsers; can adapt to dark mode |
apple-touch-icon.png | 180×180 | iOS home screen |
site.webmanifest | References 192 and 512 PNGs | Android home screen, installable web apps |
An SVG favicon is worth having: one file at every size, and it can respond to the user's colour scheme with a media query inside the SVG.
/favicon.ico at the root even when you declare something else, so keeping a real file there avoids a stream of 404s in your logs. It is also the fallback when your HTML is not what is being displayed — in some feed readers and link previews.Design considerations
- It renders at 16×16. Detail disappears. A full logo with text becomes a smudge.
- Use a single mark, letter or simple shape.
- Check it against both light and dark tab backgrounds — a black icon vanishes in dark mode.
- Keep contrast high. Subtle gradients turn to mud at this size.
What our audit reports about this
Every item below is measured directly, not inferred. Run it against your own site and the result names the exact rule or header responsible.
- Every icon declared, with its rel, sizes, type and whether it loads.
- Whether an apple-touch-icon and a web manifest are present.
- Whether
/favicon.icoexists at the root. - A rendered preview of each icon at 16, 32, 64 and 180 pixels, against light and dark backgrounds.
For agents and scripts, the same measurement is at
/api/v1/design?url=yoursite.com —
see the API documentation.
Related questions
Why does my favicon show locally but not in Google results?
Google requires a size that is a multiple of 48×48 and recrawls favicons on its own schedule, which can take weeks. It also needs the icon to be crawlable — check it is not blocked in robots.txt.
Do I still need favicon.ico?
It is worth keeping. Browsers request it at the root regardless of what you declare, and some contexts fall back to it. One small file avoids a lot of noise.
Can a favicon adapt to dark mode?
With an SVG favicon, yes — put a prefers-color-scheme media query inside the SVG. It is one of the better reasons to use the SVG format here.
Read next
Why does my link preview look wrong on WhatsApp?
Missing Open Graph tags, an image that is too big or the wrong shape, or a cache holding the version from before you fixed it.
ReadWhy is my site not mobile-friendly?
The specific faults that break sites on phones — starting with the viewport tag and the tables nobody tested at 375 pixels.
ReadHow do I make my website look trustworthy?
The signals people and machines actually use — most of which cost nothing and are missing from most small sites.
ReadWhat does a good 404 page need?
The right status code first, then a way out. Most 404 pages fail on the first one and nobody notices.
Read