Favicon Not Showing? How to Check & Fix It

Q: How do I force my browser to reload a new favicon?

Open the favicon URL directly (for example https://yoursite.com/favicon.ico ) and hard-refresh it, then hard-refresh the page. The most reliable fix is changing the URL with a version query string — href='/favicon.ico?v=2' — because the browser treats it as a brand-new file and re-downloads it.

Q: How do I check if my favicon file actually exists?

Type the file URL straight into the address bar, e.g. https://yoursite.com/favicon.ico . If the icon displays, the file exists and is reachable; if you get a 404, the file is missing or at the wrong path. Then open DevTools ( Network tab ) and reload to confirm the request returns status 200.

Q: Why is my favicon a black square on iPhone?

Your apple-touch-icon.png has a transparent background. iOS composites the icon onto a solid tile, so transparency renders as black. Re-export the 180×180 Apple touch icon as opaque with a solid background colour. See the transparent favicons guide for the rules.

Published December 9, 2025 · Updated June 9, 2026

Favicon not showing? The usual cause is aggressive browser or CDN caching. Hard-refresh, add a cache-busting query string, then check the path, tags, and MIME type.

If your favicon isn’t showing, the cause is almost always caching, not a broken file. Browsers cache favicons separately from the rest of your site and hold them aggressively. So before you change any code: hard-refresh the page (Ctrl/Cmd + Shift + R), then load the icon directly at https://yoursite.com/favicon.ico. If it’s there but the tab still shows the old one, force a fresh download with a cache-busting query string — href="/favicon.ico?v=2". That fixes most “favicon not working” reports in under a minute.

In one line: a favicon that won’t update is usually cached, not broken — bust the cache first, debug second.

Want it checked for you? Run your site through the favicon checker — it fetches your page, reads your favicon tags, downloads each icon and tells you exactly what’s missing, wrong, or out of date (and what’s actually fine), with a one-click fix.

If the cache-buster doesn’t fix it, the problem is real: a wrong path, a missing or malformed <link> tag, an invalid .ico, or a bad MIME type. The table below maps each common symptom to its cause and fix.

Fastest fix: bust the cache

Caching is the number-one reason a favicon “isn’t working.” Three layers can each hold a stale copy:

Your browser. Favicons live in a dedicated cache and survive a normal reload. A hard refresh with Ctrl/Cmd + Shift + R (Safari: Cmd + Option + R) bypasses it.
Your CDN. Cloudflare, Fastly, and similar caches serve the old file to everyone until you purge it. In Cloudflare, use Caching → Configuration → Purge Cache and purge the favicon files specifically.
Google’s search index. Google keeps its own favicon cache, separate from any browser, and re-crawls on its own schedule — so search results can lag your tab by days or weeks.

The cleanest fix for browser and CDN caching is to change the URL so it counts as a new file:

<link rel="icon" href="/favicon.ico?v=2">

Bump the version (?v=3, ?v=4) each time you change the icon. To confirm a stubborn cache rather than a real bug, open your site in an incognito/private window — that bypasses the browser favicon cache entirely. If the new icon shows there but not in your normal window, it’s cache, full stop.

Symptom → cause → fix

Find your symptom, then jump to the matching fix below.

Symptom	Likely cause	Fix
Old icon still shows after an update	Browser favicon cache	Hard refresh; add `?v=2`; test in incognito
New icon live for you, old one for visitors	CDN/Cloudflare cache	Purge the favicon files at the CDN
Correct in tab, wrong/missing in Google	Google’s separate SERP cache	Ensure valid root `favicon.ico` ≥48×48; wait for re-crawl
Generic blank-page icon in the tab	Wrong path or missing `<link>`	Check the path and tags; confirm 200 in Network tab
`/favicon.ico` returns 404	File not uploaded or wrong directory	Upload to the site root
Loads (200) but renders blank	Invalid or 0-byte `.ico`	Regenerate the file
Downloads instead of rendering	Wrong MIME type from server	Set the correct `Content-Type`
Black square on iPhone home screen	Transparent `apple-touch-icon.png`	Re-export it opaque, with padding

How to check whether the favicon is actually working

Three quick checks tell you whether you’re chasing a cache ghost or a real bug.

Open the file directly. Visit https://yoursite.com/favicon.ico (and /favicon.svg). If the icon renders, the file exists and is reachable at the root. A 404 means it’s missing or in the wrong folder.
View source. Press Ctrl/Cmd + U and search for rel="icon". The <link> tags must be inside <head>, use href (not src), and point at paths that resolve.
Check the Network tab. Open DevTools (F12, or Cmd + Option + I on Mac) → Network, type favicon in the filter, and reload. Read the status code:
- 200 — loaded fine; if it still doesn’t show, it’s cache or an invalid file.
- 404 — wrong path or the file isn’t uploaded.
- 403 — blocked by permissions or server config.
- No request at all — your HTML has no valid favicon <link>, or it’s outside <head>.

Run those three and you’ll know which fix below you need.

Wrong file path

Browsers expect favicons at the site root. The auto-requested favicon.ico must live at https://yoursite.com/favicon.ico, not in /assets/ or /images/. If your HTML says href="/favicon.ico" but the file sits in a subfolder, the request 404s.

Fix it by moving the files to the root (recommended, since browsers auto-request that path anyway) or updating every href. Root-relative paths starting with / are safest — a relative favicon.ico resolves differently on nested URLs.

Missing or malformed `<link>` tags

If the Network tab shows no favicon request, the browser never found a tag to act on. Common culprits:

<!-- Wrong attribute: favicons use href, not src -->
<link rel="icon" src="/favicon.ico">

<!-- Never valid — drop it -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Outside <head>, so it's ignored -->
</head>
<body>
  <link rel="icon" href="/favicon.ico">

rel="shortcut icon" is a legacy mistake — “shortcut” was never a valid relation, so delete it and use rel="icon". Put all favicon tags inside <head>. The clean, verified set is at the bottom of this guide; see the favicon HTML reference for every tag and attribute.

Invalid or 0-byte .ico file

A request can return 200 OK and the icon still won’t render — because the file itself is broken. This happens when an .ico was renamed from a .png (renaming doesn’t convert it), saved at 0 bytes, or exported by a tool that produced a malformed file. The browser downloads it, fails to decode it, and falls back to the blank-page icon. Confirm it by opening /favicon.ico directly: a valid file shows your icon, a broken one shows nothing. The fix is to regenerate a real multi-size .ico bundling 16/32/48, not a renamed PNG. See how to convert PNG to ICO.

Rather than debug a broken file, regenerate the whole set. FaviconBuilder takes one upload (SVG preferred, or a PNG/JPG at 512×512 or larger) and outputs a valid multi-size .ico, an SVG, the opaque Apple touch icon, the PWA icons, the manifest, and the exact HTML — free, no account, and your image never leaves your browser.

Wrong MIME type from the server

If the favicon downloads instead of displaying, your server is sending the wrong Content-Type. Check it in DevTools → Network → click the favicon request → Response Headers → Content-Type. Correct values:

.ico → image/x-icon (or image/vnd.microsoft.icon)
.png → image/png
.svg → image/svg+xml

If it’s wrong, declare the types on the server:

# Apache (.htaccess)
AddType image/x-icon .ico
AddType image/svg+xml .svg

# Nginx
types {
    image/x-icon ico;
    image/svg+xml svg;
}

An SVG favicon served as text/plain or text/html will never render — the MIME type is what tells the browser it’s an image.

Showing in the tab but not in Google

This is its own problem, and it’s not a bug on your end. Google maintains a separate favicon cache for search results and refreshes it only when it re-crawls your site, which can take days to weeks. Your tab updating instantly while Google lags is normal.

To give Google the best chance:

Keep a valid favicon.ico at the site root — Google’s documented fallback.
Make it at least 48×48; Google ignores icons it considers too small.
Reference it with a standard rel="icon" tag, and don’t block it in robots.txt.

Then wait — there’s no button to force a refresh; the next crawl picks it up. More in favicon SEO & browser support.

The clean, verified HTML

If you’re regenerating anyway, drop in this set. It’s the modern standard — no rel="shortcut icon", no long list of per-size PNG tags:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

The .ico covers legacy browsers, desktop tabs, and Google’s fallback; the SVG is the sharp primary icon; the Apple touch icon handles iOS; the manifest carries the PWA sizes. Place all four in <head>. (Step-by-step setup →)

Summary

When a favicon won’t show, work in this order:

Bust the cache first — hard refresh, add ?v=2, purge your CDN, and test in incognito. This resolves most cases.
Open /favicon.ico directly to confirm the file exists and is reachable at the root.
View source and the Network tab — check for a valid rel="icon" tag in <head> and a 200 status.
Fix the real bug if it persists: wrong path, malformed/shortcut icon tag, invalid .ico, or wrong MIME type.
For Google, keep a valid root favicon.ico ≥48×48 and wait for the next crawl — its cache is separate.
When in doubt, regenerate the whole set so every file and tag is correct from the start.

Continue reading:

Frequently asked questions

Why is my favicon not showing after I uploaded it?

Almost always aggressive caching. Browsers cache favicons separately and hold them for days, so a hard refresh (Ctrl/Cmd + Shift + R) plus a cache-busting query string like /favicon.ico?v=2 fixes it. If the icon shows in an incognito window but not your normal one, it's confirmed cache.

How do I force my browser to reload a new favicon?

Open the favicon URL directly (for example https://yoursite.com/favicon.ico) and hard-refresh it, then hard-refresh the page. The most reliable fix is changing the URL with a version query string — href='/favicon.ico?v=2' — because the browser treats it as a brand-new file and re-downloads it.

Why does my favicon show in the browser tab but not in Google search?

Google keeps its own favicon cache, completely separate from your browser. It re-crawls the icon on its own schedule, so a new favicon can take days or weeks to appear in search results even when your tab is already correct. Make sure a valid favicon.ico exists at your site root and is at least 48×48, then wait for the next crawl.

How do I check if my favicon file actually exists?

Type the file URL straight into the address bar, e.g. https://yoursite.com/favicon.ico. If the icon displays, the file exists and is reachable; if you get a 404, the file is missing or at the wrong path. Then open DevTools (Network tab) and reload to confirm the request returns status 200.

Why is my favicon a black square on iPhone?

Your apple-touch-icon.png has a transparent background. iOS composites the icon onto a solid tile, so transparency renders as black. Re-export the 180×180 Apple touch icon as opaque with a solid background colour. See the transparent favicons guide for the rules.

Related guides

← All guides