Why your favicon is not showing

Start by typing the icon's address straight into your browser. If the file doesn't open, the problem is the file or its path. If it opens fine, the problem is how your page points to it.

That one test saves a lot of guessing.

What you need

• Your site's address and the icon's file name.
• Access to your page template, so you can read the head.
• Your browser's developer tools, if you're comfortable opening them. They list failed file requests.

The checklist

1. The file isn't where the tag says

A typo in the file name or a wrong folder will do it. The link tag's href must point to the real location. If you moved the file, update the tag.

A missing file shows up in your server log. Browsers have long asked for favicon.ico in a fixed place, which leads to unnecessary 404 entries in the server log if the file doesn't exist¹. A 404 means "not found". If you see these in your log, that's a clue.

2. There's no link tag, or it's in the wrong place

Google tells you to add a link tag to the header of your home page². Browsers may also fall back to a favicon.ico in the site root, which Wikipedia says is still supported by all browsers for now¹. Put the tag in a shared template so every page declares the icon. Open "view source" on a page with a blank tab and look for a link line with rel="icon" in the head.

3. The file type isn't supported by that browser

Internet Explorer 5 to 10 support only the ICO file format¹. Internet Explorer also doesn't support SVG favicons¹. If a visitor on an old browser sees nothing, an ICO file as a back-up helps. The formats page has more.

4. The sizes attribute is wrong

The sizes attribute must be present only if the rel contains a value of icon, or a non-standard type such as Apple's apple-touch-icon³. Check that any sizes value you give matches the real file. A size that lies about the file can mislead the browser.

5. Your security policy blocks the image

Some sites send a Content Security Policy, a header that limits where the page can load things from. MDN says the policy applies to the favicon. If the favicon isn't loading, verify that the img-src directive isn't preventing access to it³. Ask whoever manages your hosting to look. Don't switch the policy off. Add what the icon needs.

6. The browser kept an old copy

A blank tab right after a change can be a stored copy. That's a different problem, covered in Why the old favicon still shows after a change.

If it's only Google that's missing it

A tab icon and a Google search result icon are separate things. Google warns that an icon can be missing from search even when every guideline is met². It also says the home page and the icon file must not be blocked from crawling². Crawling means Google's robots visit your pages and files.

If your robots.txt file blocks the icon folder, Google may never see the icon. The Google icon notes go further.

A quick order to work through

1. Open the icon address by itself.
2. View the page source and read the link tag.
3. Check the format against the browser you're testing.
4. Ask your host about any security header.
5. Try a private window to rule out a stored copy.

Change one thing at a time and reload after each. Otherwise you won't know which fix worked.