You open Chrome, load your site, and the tab shows a generic globe or a blank square instead of your icon. You check the HTML, the file exists, but Chrome still refuses to show it. This is one of the most common favicon complaints we hear from developers. The good news: in most cases, the fix takes less than two minutes.

Quick fix: force a hard refresh and check the Network tab

Before you touch any code, rule out the simplest cause: Chrome is serving a cached version of your old favicon (or a cached 404). Chrome caches favicons aggressively, sometimes for days.

  1. Open your site in Chrome.
  2. Open DevTools (F12 or Cmd+Option+I).
  3. Go to the Network tab and check Disable cache.
  4. Reload the page with a hard refresh (Ctrl+Shift+R or Cmd+Shift+R).
  5. In the Network filter box, type favicon.

If you see a request for favicon.ico returning a 404, Chrome will keep showing the default globe. If you see a 200 but the icon still doesn't update, the cached image is the problem. A hard refresh usually clears it. If it doesn't, open chrome://settings/clearBrowserData, select Cached images and files, and clear. That wipes Chrome's favicon cache without nuking your passwords or history.

Root cause 1: Chrome is requesting favicon.ico and your site doesn't have one

Even if you never wrote a <link rel='icon'> tag, Chrome will still request /favicon.ico from your domain root. This is a legacy behavior that dates back to Internet Explorer, and it's still in the HTML spec. If that file doesn't exist, you get a 404 and the default globe.

The fix is simple: either place a real favicon.ico at your domain root, or add an explicit link tag in your <head>:

<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>

The HTML specification defines rel='icon' as the standard way to associate an icon with a page. Chrome will use the first valid one it finds, but providing both an SVG and an ICO fallback is the safest pattern.

Root cause 2: the link tag is in the wrong place or has a syntax error

Chrome only reads favicon link tags inside the <head>. If your tag ended up in the <body> (common with template partials or CMS injectors), Chrome ignores it silently. No console error, no warning — just a missing icon.

Check for these common mistakes:

If you're unsure whether your tag is valid, view the page source in Chrome (Ctrl+U) and search for rel=. The tag should appear inside the head block, before any body content.

Root cause 3: the file is served with the wrong MIME type or is corrupted

Chrome is strict about image files. If your server returns your .ico file as text/plain or application/octet-stream, Chrome may refuse to render it. You can verify this in DevTools: click the favicon request in the Network tab and check the Response Headers.

The correct MIME types are:

On Apache, add AddType image/x-icon .ico to your .htaccess. On Nginx, use types { image/x-icon ico; } inside your server block. If you're on a managed host or CDN, check their documentation — some strip or override MIME types by default.

Root cause 4: SVG favicons with invalid markup

SVG favicons are increasingly common because they scale cleanly and support dark mode. But Chrome's SVG parser is unforgiving. A missing namespace, an unclosed tag, or a stray HTML entity will cause the entire file to be rejected — and Chrome falls back to the default globe.

Validate your SVG by opening it directly in a browser tab. If it renders as an image, the markup is fine. If you see raw XML or an error, fix the SVG before worrying about the favicon tag. Also confirm the SVG has xmlns='http://www.w3.org/2000/svg' on the root element.

Prevention: build a favicon stack Chrome can't ignore

The most reliable setup combines multiple formats so Chrome always has a valid fallback. A minimal, modern stack looks like this:

You can generate all of these from a single source image using Mzu favicondl. Once deployed, verify each file loads with a 200 status in the Network tab.

For a deeper walkthrough of Chrome-specific caching and localhost quirks, see our guide on favicon not showing in Chrome. And if you're not sure whether your favicon is even being served, run through the checks in our favicon audit guide.

What to do if nothing works

If you've cleared the cache, fixed the link tag, confirmed the MIME type, and Chrome still shows a blank tab, try these last steps:

  1. Test in a Chrome Incognito window (extensions and profile cache are bypassed).
  2. Test in another browser (Firefox or Edge) to confirm the file is served correctly.
  3. Check for a service worker intercepting the favicon request and returning a stale response.
  4. Look for a Content Security Policy header blocking img-src for your icon domain.

If the icon appears in Incognito but not your normal profile, the issue is 100% local cache — not your server. If it fails everywhere, the problem is in your HTML, file path, or server configuration.

Chrome not showing favicons for websites is almost always one of four things: a missing root favicon.ico, a misplaced or malformed link tag, a wrong MIME type, or a cached 404. Work through them in that order and you'll have your icon back in the tab before your coffee gets cold.