Why is my favicon not showing
Tools Nimbus is a free, no-signup developer toolkit that runs entirely in your browser, so your data is never uploaded to a server. A favicon that does not appear is almost always cached rather than missing: Chrome keeps favicons in its own database, so a hard refresh never touches them. Confirm the file exists by loading /favicon.ico directly, then rule out a wrong path, an unsupported format and a link tag outside the head. Regenerate a correct multi-size icon with the Tools Nimbus Favicon Generator.
Last updated August 2026
First, decide which fault you have
"Favicon not showing" describes three different problems, and they have nothing in common except the symptom. Separate them before you edit any markup.
- The file is not being served. Open the icon URL directly, for example
https://yoursite.com/favicon.ico. If you get a 404, or HTML instead of an image, the browser is not hiding anything. The file genuinely is not there. - The file is served but the browser shows an old one. The URL returns the new image, yet the tab keeps the previous icon or a blank globe. This is caching, and it is the most common case by a wide margin.
- The file is served but the browser rejects it. The URL returns something, but it is a renamed PNG, an SVG the client will not use, or an image whose dimensions the browser will not accept.
A private window is the fastest way to tell case 2 from case 3. Private windows start with an empty favicon store, so if the icon appears there and not in your normal window, you have a cache to clear and no code to change.
Symptoms, causes and fixes
| Symptom | Most likely cause | Fix |
|---|---|---|
| Old icon persists after a hard refresh | Favicons live in a separate store that a hard refresh does not clear | Open the icon URL directly in a tab, or add ?v=2 to the href |
| Blank or default globe on every browser | File missing at the requested path, or a 404 returning HTML | Load the URL directly and confirm it returns an image, not a page |
| Works in Chrome, missing in Safari | SVG-only icon with no ICO or PNG fallback | Ship a favicon.ico alongside the SVG |
| Missing on an iPhone home screen | No apple-touch-icon tag, since iOS ignores favicon.ico | Add a 180x180 PNG and the matching link tag |
| A different project's icon on localhost | All localhost ports share one origin in the favicon store | Ignore it locally and verify on a deploy preview or private window |
| Fine locally, gone in production | File not published by the build, or a stale CDN response | Check the live URL, then purge the CDN cache |
| No icon beside the Google search result | Icon blocked in robots.txt, or not a multiple of 48px square | Allow crawling and supply a 48x48 or larger square |
Cause 1: the cache a hard refresh cannot reach
This is the one that wastes the most time, because the usual remedy genuinely does not work. Browsers do not keep favicons with ordinary page assets. Chrome stores them in a dedicated database inside the browser profile, and a hard reload clears the page cache while leaving that store untouched. You reload, nothing changes, and it looks like the new file was never deployed.
Three approaches that do work, in order of how much they prove:
- Open the icon URL in its own tab. This forces a fresh network fetch and tells you what the server is actually returning right now. Do this first, always, because it also settles whether you have a caching problem or a missing file.
- Version the href. Change the tag to
/favicon.ico?v=2. To the browser that is a new URL with no cache entry, so it fetches immediately. This is also the only fix that helps your existing visitors, who cannot clear their caches on your behalf. - Test in a private window or a fresh profile. Useful for confirming that a change worked without polluting the result with your own cache history.
Cause 2: the browser is looking somewhere else
Browsers request /favicon.ico from the site root by default, even when no link tag exists. A link tag overrides that, and the path in it is where the trouble usually starts.
- Relative paths.
href="favicon.ico"resolves against the current page, so it works on the homepage and breaks on/blog/post. Use a root-relative/favicon.ico. - Sites served from a subdirectory. A project published at
/docs/needs paths that include that prefix, or abasesetting that adds it. - A 404 page that returns 200. Some hosts answer a missing asset with the app shell. The browser receives HTML where it expected an image, and shows nothing. Check the content type, not just that something loaded.
- Auth or IP restrictions. On a staging site behind a login, the icon request can be redirected to a sign-in page.
Cause 3: the format or the size
A favicon.ico is a container, not a single image, and the point of it is that it holds several sizes at once. Ship 16x16, 32x32 and 48x48 in the one file and browsers pick what they need for the tab, the bookmark bar and the Windows shortcut. Renaming a PNG to .ico is the classic version of this fault, and it works often enough in one browser to be misleading.
Two more format rules worth knowing. iOS does not read ICO files at all, so a home screen icon needs a PNG, conventionally 180x180, referenced with rel="apple-touch-icon". And an SVG icon is fine as the primary, but keep an ICO or PNG fallback rather than shipping SVG alone, because support is not universal and the failure is silent.
The Tools Nimbus Favicon Generator builds the multi-size ICO plus the 180x180 Apple touch icon from one source image and gives you the link tags to paste, and the resizing runs on the Canvas API in your own browser so the source image is never uploaded. If your source file is in a format you cannot feed it, the Image Format Converter will change it locally first.
Cause 4: the markup
Assuming the file is right, a handful of markup mistakes stop it being used:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">- The tag is outside the head. A link element in the body is ignored. It is easy to do when the tag is added by a template fragment.
relis wrong. The modern value isicon. The oldshortcut iconstill works, but a typo such asrel="favicon"means nothing at all.- The type does not match the file. Declaring
type="image/svg+xml"on a PNG can get the entry skipped. - Duplicate tags. If several icons are declared, the browser picks one by its own rules, which may not be the one you edited. Delete the leftovers instead of adding another.
- The tag is injected by JavaScript. That works for browsers but not for crawlers that read the raw HTML, which is one reason a search listing can lack an icon the tab has.
Cause 5: local development is lying to you
Every project you serve from http://localhost:3000 looks like the same site to the browser, and the favicon store is keyed by origin. So the icon from the last project you ran can appear over the one you are working on now, and a project with no icon at all can appear to have one. This is not a bug in your site and no amount of editing will fix it.
Frameworks add their own layer. Several conventions place a file such as icon.png or favicon.ico in a specific directory and generate the link tag for you, in which case a hand written tag can be overridden or duplicated. If the head of the rendered page does not contain what you wrote, that is where to look. Judge the result on a deploy preview, where the origin is unique and the build is the real one.
A checklist
- Open the icon URL directly on the live domain. A 404 is a path or build problem, not a cache problem.
- Confirm the response is an image and not the HTML of an error page.
- Check the rendered head, not the source template, for the link tag.
- Use root-relative paths that survive being on a nested URL.
- Ship a multi-size
favicon.icoplus a 180x180 apple-touch-icon. - Version the href when you change the file, so visitors refetch it.
- Verify in a private window before concluding anything.
If you are choosing a source format for the icon, JPG vs PNG covers why transparency and flat colour matter at 16 pixels. For a related asset that fails just as quietly, see why is my QR code not scanning. The share card has its own version of this problem, with its own caches that a refresh cannot reach: why is my link preview not showing covers it. If your source artwork arrived as a .webp that your editor will not even open, why is my WebP image not opening gets it into a format the icon pipeline accepts. Or browse all Tools Nimbus guides.