I am making a HTML page that is unpublished . One of the things I wanted to do was add a favicon to appear next to the title. I'm using google chrome and I noticed that other websites have favicons that appear next to the tile in the browser, but the one I'm trying to display won't show up. The site in in a folder on my desktop named site. This is the code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
</body>
</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'.
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:
Exit all running Chrome processes.
Delete the
Favicons
file in your user data folder. For example: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.
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.
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:
PNG/GIF favicon:
3) Another thing could be the problem that chrome can't display favicons, if it's local (not uploaded to a webserver).
4) 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.5) 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
For me the problem was that there was a div above it (which of course should've been in the head, but it happens). Firefox didn't mind, but Chrome did.
The path must be via the URI (full).
Like: http://example.com/favicon.png
so in your case:
Ref: http://www.w3.org/2005/10/howto-favicon