Favicon Not Showing? Find the Cause in This Order

Start with the symptom

"Favicon not showing" covers several different problems. Match what you see to the most likely cause and jump straight to that check — or work through all seven in order if you are not sure.

If you would rather have the first three checks done for you, paste your URL into the favicon checker. It requests every declared icon and reports which ones fail.

Check 1: Open the icon URL directly

Type the full address of the icon into the address bar — https://yoursite.com/favicon.ico, and the URL of any PNG or SVG your page declares. Use a private window so nothing is cached.

From a terminal, the status line and content type tell you the same thing in one go:

curl -sI https://yoursite.com/favicon.ico | head -n 5
# HTTP/2 200
# content-type: image/x-icon

A content-type: text/html reply for an icon URL is the giveaway that you are getting a page, not an image.

Check 2: Read the tags the browser actually received

Your template is not always what reaches the browser — plugins, frameworks and tag managers add and remove tags. Open DevTools on the live page, go to the Console, and run:

document.querySelectorAll('link[rel~="icon"], link[rel="apple-touch-icon"], link[rel="manifest"]')
  .forEach((l) => console.log(l.rel, l.getAttribute('sizes') || '', l.href));

Each line shows the relation, the declared size and the resolved URL. The resolved URL is the useful part: it shows exactly where a relative path ends up on the current page. Copy each one into the address bar and repeat Check 1.

No lines at all means there are no icon tags, and the browser will only try /favicon.ico. That is enough for a desktop tab, but not for iPhones, Android or high-density screens — see the favicon sizes guide for the full set.

Check 3: Rule out the cache properly

Browsers store favicons separately from pages, and a normal hard refresh (Ctrl+Shift+R or Cmd+Shift+R) reloads the page but often not its icon. If Checks 1 and 2 pass and you still see the old icon, it is cache. The fastest test is a private window: if the new icon appears there, your site is correct.

To refresh the icon in your normal window:

For your visitors, the reliable fix is a new URL. Add a version to every declared icon when you change it:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" href="/apple-touch-icon.png?v=2">

The automatic /favicon.ico request cannot be versioned, so browsers that rely on it update in their own time. A CDN in front of the site is a second cache: purge the icon URLs there too, before testing in the browser.

Check 4: Fix paths that break on inner pages

A path without a leading slash is resolved from the current page's folder:

Start every icon href with / (or use the full https:// URL). Also look for a <base href> tag in your head — it changes how every relative path on the page resolves, including icons.

Sites served from a sub-folder, such as a GitHub Pages project at username.github.io/project/, are the exception: there /favicon.png points outside the project, so the path must include the folder. The how to add a favicon guide covers that set-up.

Check 5: Remove competing icon tags

When a page declares several icons, each browser applies its own rules to choose one. Two sets pointing at different files therefore produce different icons in different browsers — and one of the sets is usually an old default you forgot about:

• Next.js — app/favicon.ico from create-next-app, alongside icons you added in public/.
• Vite — <link rel="icon" href="/vite.svg"> in index.html.
• WordPress — the Site Icon setting plus a theme or plugin that prints its own tags.
• Shopify — a hard-coded tag in theme.liquid left by an old app.

Keep one set and delete the rest. One specific trap: linking favicon.ico with sizes="any" makes Chrome choose the ICO even when an SVG favicon is declared. Use sizes="32x32" on the ICO line instead; the formats comparison explains how browsers pick between ICO, PNG and SVG.

If the SVG is the one not showing, open its URL directly. A browser that shows an XML error instead of the image has found a syntax problem in the file — often an unescaped & in a title or a missing xmlns attribute on the root element.

Check 6: Production-only problems

When the icon works locally but not after deployment, the file or the server configuration differs between the two:

• The file is not in the build output. Frameworks only copy files from their static folder (public/ in Next.js, Vite and Astro; static/ in SvelteKit and Hugo). An icon in src/assets/ will not be at /favicon.ico.
• A catch-all rewrite hides the 404. Single-page-app hosting rules such as /* → /index.html answer missing files with your app, status 200. Check 1 catches this.
• Wrong MIME type. Browsers are forgiving with ICO and PNG, but an SVG favicon needs image/svg+xml, and the manifest should be application/manifest+json. Older server configurations do not know the .webmanifest extension.

For Apache, add to .htaccess:

AddType image/svg+xml .svg
AddType image/x-icon .ico
AddType application/manifest+json .webmanifest

For nginx, inside the http or server block:

types {
    image/svg+xml               svg;
    image/x-icon                ico;
    application/manifest+json   webmanifest;
}

Note that a types block in nginx replaces the default list for that context, so add these lines to your existing mime.types file if you rely on the defaults.

Check 7: Phones, bookmarks and other places

Some icons are copied once and never refreshed:

• iPhone and iPad home-screen icons are saved when the shortcut is created. Delete the shortcut and add it again after you change the Apple touch icon.
• Android shortcuts and installed web apps use the icons listed in site.webmanifest; Chrome refreshes them only occasionally. The mobile favicon guide has the sizes and manifest settings.
• Bookmarks keep the icon from your last visit until you open the page again.
• Google Search uses its own crawler and updates on its own schedule — see favicon not showing in Google.

The short version

1. The icon URL opens as an image in a private window.
2. The tags in the live page point at those URLs, all starting with /.
3. Only one set of icon tags is on the page.
4. The server returns 200 and an image content type for every icon.
5. You tested in a private window, and versioned the URLs for everyone else.

If all five are true and an icon is still missing in one place, it is that place's cache — and it will update on its own. If you need a new set of files, the favicon generator creates all of them, with the HTML to paste.