HTML Favicon.ico won't show on Google Chrome

HtmlGoogle ChromeHyperlinkFavicon

Html Problem Overview

I am making a HTML page and one of the things I wanted was a favicon appearing next to the title.

I'm using Google Chrome, I see favicons working on other websites, but the favicon on my website won't show up. The site is in a folder on my desktop named site.

The favicon.ico file is 16x16, and I used an online generator to make it.

This is the code:

<!DOCTYPE html>
<html> 
    <head>
        <title></title>
        <link rel="shortcut icon" href="/favicon.ico" />
    </head>
    <body>
    </body>
</html>

Html Solutions

Solution 1 - Html

Since you have a leading / in your href, you are referencing a file that will be in the root-folder. In case you have your page in a folder on your computer, not serving it from a local webserver, the leading / will tell the browser to look in the root folder of your filesystem. So the browser expect the file to be at C:/favicon.ico or similar, which is probably not what you've expected.

If you have the favicon.ico in the same folder as the web page, you could just remove the leading slash, and the icon should be visible.

<link rel="shortcut icon" href="favicon.ico" />

Update:

As a debug option, your could try to add a tag that you know works. I borrowed this snippet from the StackOverflow source. Try replacing your link tag with this and see if you get the SO logo as your favicon.

<link rel="shortcut icon" 
      href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">

Update 2:

It appears that there is a bug reported on Chromium where the favicon isn't displayed if the file is loaded locally, without being served through a webserver.

Solution 2 - Html

I've found that (at Chrome 56, OSX) the favicon state appears to be cached for the browser lifetime, so if a favicon isn't being loaded, it won't be until after restarting Chrome. It appears that it doesn't show up in the "application" tab in dev tools and isn't cleared by a hard reload or 'Clear site data'.

Solution 3 - Html

A common issue where the favicon will not show up when expected is cache, if your .htaccess for example reads: ExpiresByType image/x-icon "access plus 1 month"

Then simply add a random value to your favicon reference: <link rel="shortcut icon" href="https://example.com/favicon.ico?r=31241" type="image/x-icon" />

Works every time for me even with heavy caching.

Solution 4 - Html

Another reason for Chrome not displaying the favicon is that it still remembers a time when the site in question did not have a favicon or the favicon was incorrectly configured.

You're going to want to completely wipe the favicon cache:

  1. Exit all running Chrome processes.

  2. Delete the Favicons file in your user data folder. For example:

     C:\Users\me\AppData\Local\Google\Chrome\User Data\Default\Favicons

This can not be resolved by clearing the browser cache, as it does not affect the Favicons container.

Also note that, contrary to what you might read online, requests to favicon resources are not shown in the Network panel of the DevTools. Under very rare circumstances, one such request may show up there, but it is highly unlikely and the DevTools will not help you solve your favicon woes.

Solution 5 - Html

  1. Clear your chache. http://support.google.com/chrome/bin/answer.py?hl=en&answer=95582 And test another browser, lets say safari. How did you import the favicon?

  2. How you should add it:

Normal favicon:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

PNG/GIF favicon:

<link rel="icon" type="image/gif" href="favicon.gif" />
<link rel="icon" type="image/png" href="favicon.png" />

3) Another thing could be the problem that chrome can't display favicons, if it's local (not uploaded to a webserver).

  1. Try to rename it from favicon.{whatever} to {yourfaviconname}.{whatever} but I would suggest you to still have the normal favicon. This has solved my issue on IE.

  2. Found another solution for this which works great! I simply added my favicon as Base64 Encoded Image directly inside the tag like this:

Used this page here for this: http://www.motobit.com/util/base64-decoder-encoder.asp

Solution 6 - Html

For me the problem was that there was a div above it (which of course shouldn't have been in the head, but it happens). Firefox didn't mind, but Chrome did.

Solution 7 - Html

It doesn't look like Chrome allows you to display the favicon in the address bar...

http://en.wikipedia.org/wiki/Favicon#Use_of_favicon

I've also seen it done like this. Don't know if it would make a difference or not.

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

Solution 8 - Html

This is a bug in Chrome and Chrome only. To trigger the bug:

  1. Set in your HTML <head> block: <link rel="shortcut icon" type="image/ico" href="favicon.ico">
  2. Load the page with one favicon.ico image, then replace the favicon.ico file with a different one. You will not be able to get the new one to display, even if you use Classic Cache Killer or use incognito mode (security breach, anyone?). You can use another browser to confirm.

To solve the bug: Do a forced reload, by pressing shift + F5.

This is such a massive bug in Chrome, that it's already been reported to their developers, who have suggested using this method as solving the their bugs. (Source: GoogleSupport.)

Solution 9 - Html

This trick works: add this script in header or masterPage for Example

    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = '/favicon.png';

and will be cached. It's not optimal, but it works.

Solution 10 - Html

The path must be via the URI (full).

Like: http://example.com/favicon.png

so in your case:

<!DOCTYPE html>
<html> 
    <head profile="http://www.w3.org/2005/10/profile">
        <title></title>
        <link rel="shortcut icon" 
		      type="image/png" 
		      href=" http://example.com/favicon.png" />
    </head>
    <body>
    </body>
</html>

Ref: http://www.w3.org/2005/10/howto-favicon

Solution 11 - Html

Note if you have so many tabs open that Google Chrome is only showing the favicons then Google Chrome won't show the favicon for the selected tab, so if you keep reloading the tab with your page loaded in order to see your new favicon you will only see the text of your page's title.

You will need to reload your page, and then select a different tab in order to see your favicon.

enter image description here

Solution 12 - Html

I moved ico file to root folder and link it. It worked for me. Also, in chrome, I have to wait 30 mins to get cache cleared and new changes to take affect.

Solution 13 - Html

These are the locations where browsers store the Temporary data in Linux:

> Note: you can see hidden files in File Manager using Ctrl + H > > for Terminal use the command ls -la

Chromium

~/.cache/chromium/[profile]/Cache/

Google Chrome

~/.cache/google-chrome/[profile]/Cache/

Also, Chromium and Google Chrome store some additional cache at

~/.config/chromium/[profile]/Application Cache/Cache/

and

~/.config/google-chrome/[profile]/Application Cache/Cache/

and generally here:

/tmp/

so to apply new FAVICON or try to show it up is to clean them

make sure u are inside each of these directories use the command:

rm -rf *

Solution 14 - Html

There's one more possibility that no-one else seems to have mentioned: You may have exported your .ico file with settings that Chrome does not support.

Another possibility is your .ico lacks a 16px image, and so may display nothing, even though you have other resolutions.

I would suggest trying different settings on your .ico exporter, or trying another one altogether.

Solution 15 - Html

One potential problem is that the server is not replying with a correct file type when the browser fetches the favicon, using Base64 is a good workaround

Solution 16 - Html

This issue was driving me nuts! The solution is quite easy actually, just add the following to the header tag:

<link rel="profile" href="http://gmpg.org/xfn/11">

For example:

<!DOCTYPE html>
<html> 
    <head>
        <title></title>
        <link rel="profile" href="http://gmpg.org/xfn/11">
        <link rel="icon" href="/favicon.ico" />

Solution 17 - Html

Your html is completely wrong for starters, there should not be a div within your head section, nor after your body section. I suggest you look into correct html first before starting to work with favicons etc.

Categories
Recommended Html Solutions
Recommended Google Chrome Solutions
Recommended Hyperlink Solutions
Recommended Favicon Solutions

Previous Solution:

How do I find out what inotify watches have been registered?

LinuxInotify

Next Solution:

calling exports.start in same js file node.js

node.js

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionNickView Question on Stackoverflow
Solution 1 - HtmlChristofer EliassonView Answer on Stackoverflow
Solution 2 - HtmlRichView Answer on Stackoverflow
Solution 3 - HtmlpokeybitView Answer on Stackoverflow
Solution 4 - HtmlOliver SalzburgView Answer on Stackoverflow
Solution 5 - HtmlDominikAngererView Answer on Stackoverflow
Solution 6 - HtmlAsafView Answer on Stackoverflow
Solution 7 - HtmlBlakeView Answer on Stackoverflow
Solution 8 - HtmlHoldOffHungerView Answer on Stackoverflow
Solution 9 - HtmlHima View Answer on Stackoverflow
Solution 10 - HtmlmacmView Answer on Stackoverflow
Solution 11 - HtmlMatthew LockView Answer on Stackoverflow
Solution 12 - HtmlAmjithView Answer on Stackoverflow
Solution 13 - HtmlHany AfifiView Answer on Stackoverflow
Solution 14 - HtmlMiles B HuffView Answer on Stackoverflow
Solution 15 - HtmlIyad AhmedView Answer on Stackoverflow
Solution 16 - HtmlMikeView Answer on Stackoverflow
Solution 17 - HtmlJon TaylorView Answer on Stackoverflow