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>
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.
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'.
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.
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:
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.
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).
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:
<link href="data:image/x-icon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AIaDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wCGg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8AhoOC/////wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wCGg4L/////AHCMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/////wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wBTlsIAU5bCAFOWwgBTlsIAU5bCM1OWwnP///8AhoOC/////wD///8A////AP///wD///8A////AP///wD///8AU5bCBlOWwndTlsLHU5bC+FOWwv1TlsLR////AP///wD///8A////AP///wD///8A////AP///wD///8A////AFOWwvtTlsLuU5bCu1OWwlc2k9cANpPXqjaT19H///8A////AP///wD///8A////AP///wD///8A////AP///wBTlsIGNpPXADaT1wA2k9dINpPX8TaT1+40ktpDH4r2tB+K9hL///8A////AP///wD///8A////AP///wD///8A////ADaT1wY2k9e7NpPX/TaT16AfivYGH4r23R+K9u4tg/WQLoL1mP///wD///8A////AP///wD///8A////AP///wA2k9fuNpPX5zaT1zMfivYGH4r23R+K9uwjiPYXLoL1+S6C9W7///8A////AP///wD///8A////AP///wD///8ANpPXLjaT1wAfivYGH4r22x+K9usfivYSLoL1oC6C9esugvUA////AP///wD///8A////AP///wD///8A////AP///wD///8AH4r2zx+K9usfivYSLoL1DC6C9fwugvVXLoL1AP///wD///8A////AP///wD///8A////AP///wD///8A////AB+K9kgfivYMH4r2AC6C9bEugvXhLoL1AC6C9QD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAugvXyLoL1SC6C9QAugvUA////AP//AADgBwAA7/cAAOgXAADv9wAA6BcAAO+XAAD4HwAA+E8AAPsDAAD8AQAA/AEAAP0DAAD/AwAA/ycAAP/nAAAoAAAAIAAAAEAAAAABACAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP8AAAAA////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/wAAAAD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP/4+vsA4ujuAOLo7gDi6O4A4ujuAN3k6wDZ4OgA2eDoANng6ADZ4OgA2eDoANng6ADW3uYAJS84APj6+wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/9Xd5QBwjKgAcIyoRnCMqGRwjKhxcIyogHCMqI9wjKidcIyoq3CMqLlwjKjHcIyo1HCMqLhogpwA/f7+AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/xtHcAHCMqABwjKjAcIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo4EdZawD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+2xNMAcIyoAHCMqJhwjKjPcIyowHCMqLFwjKijcoymlXSMpIh0jKR6co2mbG+OqGFqj61zXZO4AeXv9gCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/6i5ygDF0dwAIiozACQyPQAoP1AALlBmADhlggBblLkGVJbBPFOWwnxTlsK5U5bC9FOWwv9TlsIp3erzAISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAALztHAAAAAAAuU2sAU5bCClOWwkNTlsKAU5bCwFOWwvhTlsL/U5bC/1OWwv9TlsL/U5bC/ViVvVcXOFAAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAALDhEALVFoAFOWwjpTlsL6U5bC/1OWwv9TlsL/U5bC/1OWwvxTlsLIV5W+i2CRs0xHi71TKYzUnyuM0gIJHi4AAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAACtNZABTlsIAU5bCD1OWwv1TlsL6U5bCxFOWwoRVlsBHZJKwDCNObAA8icJAKYzUwimM1P8pjNT/KYzUWCaCxgALLUsAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAApS2EAU5bCAFOWwgBTlsIAU5bCNVOWwgg+cJEAIT1QABU/XQA1isg4KYzUuymM1P8pjNT/KYzU/ymM1LAti9E0JYvmDhdouAAAAAAAAAAAAP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AFyk1AE+PuQBTlsIAU5bCAER7nwAmRVoADBojABRFaQAwi80xKYzUsymM1P8pjNT/KYzU/ymM1LgsjNE2MovXFB+K9MUfivbBH4r2BgcdNAARQH8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAQIDABIgKgAPGiIABRMcABdQeQAti9AqKYzUrCmM1P8pjNT/KYzU/ymM1MAqjNM9HmqmACWK7SIfivbZH4r2/x+K9vsuiudAFE2YACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAABhQfABtejgAoitEAKYzUACmM1JQpjNT/KYzU/ymM1MgpjNREH2mgABlosQAfivY0H4r26R+K9v8fivbyKIrtR0CB1SggevTQIHr0Nv///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAACBwsAJX2+ACmM1AApjNQAKYzUGSmM1MYpjNRMInWxABNHdQAcfuEAH4r2Sx+K9vUfivb/H4r25iGK9DE2gt4EIHr0yyB69P8gevTQ////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAOMUsAKYzUACmM1AApjNQAJX6/ABE7WgAUWJwAH4r2AB+K9mYfivb9H4r2/x+K9tYfivYfG27RACB69HsgevT/IHr0+yB69DL///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAfaJ4AJ4XKABVGagAKKkoAG3raAB+K9gEfivaEH4r2/x+K9v8fivbCH4r2EB133wAgevQsIHr0+SB69P8gevSAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAUSGwAFERwAElCOAB+J9QAfivYAH4r2lx+K9v8fivb/H4r2qR+K9gYefuoAIHr0BSB69M4gevT/IHr00CB69AUgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAkqSgAfivYAH4r2AB+K9gAfivZLH4r2/R+K9osfivYBH4PwACB69AAgevSAIHr0/yB69PkgevQwIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAAAAAAEEiAAB+K9gAfivYAH4r2AB+K9gAfivYsH4r2AB+G8wAge/QAIHr0MCB69PsgevT/IHr0eyB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAXZrYAH4r2AB+K9gAfivYAH4r2AB+K9gAfifUAIHz0ACB69AcgevTQIHr0/yB69MwgevQEIHr0ACB69AAgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAIDAB6E6gAfivYAH4r2AB+K9gAfivYAH4r2ACB+9QAgevQAIHr0fCB69P8gevT5IHr0LCB69AAgevQAIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAABBAcAEUqDAB6E6wAfivYAH4r2AB+K9gAggPUAIHr0ACB69AAgevQTIHr0qCB69HYgevQAIHr0ACB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP////////////////wAAH/8AAB//P/+f/z//n/8wAZ//MAGf/z//n/8wAZ//MAGf/zAAn/8/gJ//+AD///AAf//wEH//+cA///8AH//8BB///BgH//xwB///4If//4EP//+CD///hh///9w////4P///+H////j////////////" rel="icon" type="image/x-icon" />
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 shouldn't have been in the head, but it happens). Firefox didn't mind, but Chrome did.
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" />
This is a bug in Chrome and Chrome only. To trigger the bug:
Set in your HTML <head> block: <link rel="shortcut icon" type="image/ico" href="favicon.ico">
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.)
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.
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
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.
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.
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 *
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.
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
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" />
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.
Related
I have a problem with this favicon I generated for a local server php project. It works fine on most browsers (Google Chrome, Mozilla Firefox and Opera) but on Microsoft Edge it doesn't work (It shows the default tab favicon).
I've tried many solutions to this problem like clearing the cache, using image format (.png) instead of icon (.ico), but nothing seemed to work.
Here are the lines of code that I've included in the HTML head:
<link rel="icon" href="<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico" type="image/x-icon" />
Anyone had the same issue and solved it?
For me the problem was that on localhost it never worked in Edge. No matter what I did. It was always fine in Chrome and Firefox. The solution was that it only worked in Edge after I deployed to the webserver.
There are 2 problems in Edge. Both are avoided when deploying to a web server (that's why it started working in another answers after deploying to a web server). However, you can make it work on localhost, too.
1. Incomplete headers returned from server
It looks like for Edge the web server has to return Cache-Control header for the favicon.
E.g. this value works:
Cache-Control: public, max-age=2592000
The common web servers probably send that header automatically. However, if you have some custom solution, you have to implement it manually. E.g. in WCF:
WebOperationContext.Current.OutgoingResponse.Headers.Add("Cache-Control", "public, max-age=2592000");
2. Edge cannot access localhost because of some Windows security settings
By default, Windows store apps cannot use loopback interface. This seems to affect favicon loading, which is loaded using another means that the web page alone (so, even if the web page works, favicon does not work).
To enable loopback for Edge, run this in PowerShell as Administrator:
CheckNetIsolation LoopbackExempt -a -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe"
Edge restart is not needed - after page refresh (F5), the favicon should be loaded.
To disable loopback again:
CheckNetIsolation LoopbackExempt -d -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe"
The favicon will be cached in Edge, so it will be still visible.
Other info
If you use HTTPS, it looks like the certificate has to be valid (trusted) for the favicon to show.
I had the same issue with Edge. I have tried a lot of workarounds, but only moving the icon from local to www server was successful.
If your server is local (at localhost), try to move the icon file to a global server.
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" />
You should change the name of your favicon.ico file. Like "myFavicon.ico".
You should also add ? at the end of your link, like so:
<link rel="icon" href="<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico?" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico?" type="image/x-icon" />
Also, did you refresh the cache before testing? If not, reset the cache, or you will not see your changes.
Finally, it could also be your icon. Try using a favicon generator.
for me i added id="favicon"
the whole line looks like
<link id="favicon" href="~/favicon.png" rel="shortcut icon" type="image/x-icon" />
Solution for EDGE
TL;DR;
Host your favicon images externally.
If you don't have a favicon already, you can generate them here or here.
I have uploaded my 32x32 png to imgur.com
It works during local testing only if the favicon/png image is hosted !externally!, like imgur.com.
In the head of the page I set the favicon like this:
<link href="https://i.imgur.com/xxxx32x32.png" rel="shortcut icon" type="image/x-icon">
There is no naming convention, you can name the favicon whatever you like xyz.png but I guess it has to be 32x32!
I have also setup a hosts entry pointing to my web app in IIS like:
127.0.0.1 www.your-app.com
Steps: Close the browser, wait 30 seconds and reopen it.
Enter your url either like:
www.your-app.com or
localhost/yourApp or
localhost:xxxx/yourApp.
Try both!
Make sure you clear the cache. Hit F5. Probably you need to repeat this steps, two to three times.
It will take some time for Edge to grasp it.
This works in IIS. After that I have tested it wit IIS Express and it works there too. It doesn't matter. What matters is, you have to host the favicon externally.
For example, IE11 does not show favicons at all, no matter which site I visit.
So, forget about IE11 ;-)
It might be that your favicon is too big. According to the answer in the thread in this link should a favicon be 16 x 16 px:
https://forum.yola.com/yola/topics/edge-not-displaying-favicon
In my website (loekbergman.nl) is it working and I have a 16x16px icon indeed.
First, try the usual fixing method: clear cache, history and cookies.
If that doesn't work, try:
<html>
<head>
<title> Your Title</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body> Your content </body>
</html>
Make sure favicon.ico is in the same folder as your html file.
If it still doesn't work, it might be an issue with MS Edge. Check the website below:
https://www.wix.com/support/html5/ugc/b4b4a8f2-217d-4e25-aa55-00c19f5d5fc4/1a8ee7cd-3092-42e8-9078-dc528f8bfc87
Adding Cache-Control:public, max-age=14400 to the http header worked for me. Checked it with IE, Edge, and Chrome on Windows 10 using an ESP8266-12E running Arduino as a web server on a local network. (Haven't tried any Apple or Android-specific support yet). FWIW - Here's part of the html from the root page of my server:
<!DOCTYPE html>
<html>
<head>
<title>Favicon Test</title>
<link rel="shortcut icon" href="/faviconS.ico" type="image/x-icon">
<link id="favicon" rel="icon" href="/favicon.ico" type="image/x-icon">
<link id="favicon-16x16" rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link id="favicon-32x32" rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link id="favicon-96x96" rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
</head>
<body>
...
</body>
</html>
and here's a ESP8266/Arduino code snippet for creating the http header in the response and sending the icon data previously stored as a file using SPIFFS.
...
f = SPIFFS.open("/favicon.ico", "r");
if (!f) {
Serial.println("file open failed");
} else {
Serial.println("favicon.ico open succeeded...");
client.println("HTTP/1.1 200 OK");
client.print("Content-Length:");
client.println(String(f.size()));
client.println("Content-Type:image/x-icon");
client.println("Cache-Control: public, max-age=14400");
client.println(); // blank line indicates end of header
while (f.available()) { // send the binary for the icon
byte b = f.read();
client.write(b);
}
f.close();
...
Follow these steps
Image name should be favicon.ico and format should be ico
Place the ico in "wwwroot" folder
ico reference in index.html should be
"< link rel="icon" type="image/x-icon" href="/favicon.ico" >"
Edge doesn't show favicon while running from local. Deploy in webserver and try
This worked for me
Maybe it's a echo encapsulation issue.
I mean that href would have "request->baseUrl;" as a value
try
<?php
echo '<link rel="icon" href="'.Yii::$app->request->baseUrl.'/favicon.ico" type="image/x-icon" />';
?>
I had the same problem and how I have solved as below.
Icon name must be favicon. I have used .ico. (Different name was not working for me)
Favicon must be at the root folder where your HTML located. (Below is my folder structure)
-- src
-- app
-- images
-- css
-- favicon.ico
-- index.html
include icon in HTML
<link rel="icon" href="./favicon.ico" type="image/x-icon">
I have tested and fixed my issue in below browsers
Chrome (Version 76.0.3809.100)
Firefox (Version 68.0.1)
Safari (Version 11.1)
Internet Explorer (Version 11 &10)
Edge (Version 42.17134.1.0)
This is quite an old question, so thought I'd post an update. It now works even in Edge, as long as "favicon.ico" is located on the root, i.e. /favicon.ico.
But the issue still appears to exist, if the favicon is placed elsewhere besides the root, and included with a relative path. I saw my favicon on Firefox and Opera, but not in Edge.
However, the solution is much simpler now. As hinted by a comment from #Rui Lopes, using an absolute address worked for me, even with a localhost. I first tried my internal IP (not the loopback) and it showed up. But it also works with something like:
<link rel="icon" href="http://localhost:8000/icons/favicon.ico" type="image/x-icon">
By the way, I'm simply using the python3 -m http.server for now. I have Edge Version 92.0.902.73 (Official build) (64-bit).
The simplest solution, of course is to just add the "favicon.ico" to the web server root. And based on my observation, the <link> code is not even needed. I saw the following request on the server log, even without the code:
127.0.0.1 - - [16/Aug/2021 18:38:40] "GET /favicon.ico HTTP/1.1" 200 -
Tested with Edge, Firefox, Opera and Chrome, and they all seem to do this by default. I have not checked any reference or documentation for this though, so I'd still recommend adding the HTML <link> for it.
Try creating a 512x512 in PNG format. Worked for me.
said page located here:
http://lolisrael.co.il/betatest/index.php
favicon is located here:
http://lolisrael.co.il/betatest/favicon.ico?v=3
I've cleared the history, and reloaded the page and it still shows no favicon
<link rel="shortcut icon" href="http://lolisrael.co.il/betatest/favicon.ico?v=3" />
I think the <script> tag containing facebook code is manipulating DOM. And if you inspect with developer tools in Chrome, you can see that in the final DOM tree, your <link rel="shortcut icon" is put in <body>.
Try moving the facebook code into <body>. According to Facebook's documentation:
You should insert it directly after the opening <body> tag on each page you want to load it:
That <link> tag goes in the <head> not the <body>. It should work once you move it.
According to Favicon Checker, your ICO is corrupted. Lots of other problems detected too.
Errors are as follow:
favicon.ico seems corrupted or not in ICO format.
Some picture(s) are missing in favicon.ico
For me when trying with localhost it is working. Are you sure that you have valid image in the .ico format. If no please regenerate the ico file.
Try this code sir. This code is working for me.
<link rel="icon" href="http://lolisrael.co.il/betatest/favicon.ico?v=3" type="image/x-icon">
This question already has answers here:
HTML Favicon.ico won't show on Google Chrome
(17 answers)
Closed 8 years ago.
I have a favicon icon which isn't showing up in Chrome (I'm not sure about other browsers as I only use Chrome) but the strange thing is if I type the path to the icon in the URL bar it shows up!
Why doesn't the icon appear?
Cache
Clear your cache. http://support.google.com/chrome/bin/answer.py?hl=en&answer=95582 And test another browser.
Some where able to get an updated favicon by adding an URL parameter: ?v=1 after the link href which changes the resource link and therefore loads the favicon without cache (thanks #Stanislav).
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
Favicon Usage
How did you import the favicon? How you should add it.
Normal favicon:
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<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" />
in the <head> Tag.
Chrome local problem
Another thing could be the problem that chrome can't display favicons, if it's local (not uploaded to a webserver). Only if the file/icon would be in the downloads directory chrome is allowed to load this data - more information about this can be found here: local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
Renaming
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.
Base64 approach
Found another solution for this which works great! I simply added my favicon as Base64 Encoded Image directly inside the tag like this:
<link href="data:image/x-icon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AIaDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wCGg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8AhoOC/////wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wCGg4L/////AHCMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/////wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wBTlsIAU5bCAFOWwgBTlsIAU5bCM1OWwnP///8AhoOC/////wD///8A////AP///wD///8A////AP///wD///8AU5bCBlOWwndTlsLHU5bC+FOWwv1TlsLR////AP///wD///8A////AP///wD///8A////AP///wD///8A////AFOWwvtTlsLuU5bCu1OWwlc2k9cANpPXqjaT19H///8A////AP///wD///8A////AP///wD///8A////AP///wBTlsIGNpPXADaT1wA2k9dINpPX8TaT1+40ktpDH4r2tB+K9hL///8A////AP///wD///8A////AP///wD///8A////ADaT1wY2k9e7NpPX/TaT16AfivYGH4r23R+K9u4tg/WQLoL1mP///wD///8A////AP///wD///8A////AP///wA2k9fuNpPX5zaT1zMfivYGH4r23R+K9uwjiPYXLoL1+S6C9W7///8A////AP///wD///8A////AP///wD///8ANpPXLjaT1wAfivYGH4r22x+K9usfivYSLoL1oC6C9esugvUA////AP///wD///8A////AP///wD///8A////AP///wD///8AH4r2zx+K9usfivYSLoL1DC6C9fwugvVXLoL1AP///wD///8A////AP///wD///8A////AP///wD///8A////AB+K9kgfivYMH4r2AC6C9bEugvXhLoL1AC6C9QD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAugvXyLoL1SC6C9QAugvUA////AP//AADgBwAA7/cAAOgXAADv9wAA6BcAAO+XAAD4HwAA+E8AAPsDAAD8AQAA/AEAAP0DAAD/AwAA/ycAAP/nAAAoAAAAIAAAAEAAAAABACAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP8AAAAA////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/wAAAAD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP/4+vsA4ujuAOLo7gDi6O4A4ujuAN3k6wDZ4OgA2eDoANng6ADZ4OgA2eDoANng6ADW3uYAJS84APj6+wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/9Xd5QBwjKgAcIyoRnCMqGRwjKhxcIyogHCMqI9wjKidcIyoq3CMqLlwjKjHcIyo1HCMqLhogpwA/f7+AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/xtHcAHCMqABwjKjAcIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo4EdZawD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+2xNMAcIyoAHCMqJhwjKjPcIyowHCMqLFwjKijcoymlXSMpIh0jKR6co2mbG+OqGFqj61zXZO4AeXv9gCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/6i5ygDF0dwAIiozACQyPQAoP1AALlBmADhlggBblLkGVJbBPFOWwnxTlsK5U5bC9FOWwv9TlsIp3erzAISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAALztHAAAAAAAuU2sAU5bCClOWwkNTlsKAU5bCwFOWwvhTlsL/U5bC/1OWwv9TlsL/U5bC/ViVvVcXOFAAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAALDhEALVFoAFOWwjpTlsL6U5bC/1OWwv9TlsL/U5bC/1OWwvxTlsLIV5W+i2CRs0xHi71TKYzUnyuM0gIJHi4AAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAACtNZABTlsIAU5bCD1OWwv1TlsL6U5bCxFOWwoRVlsBHZJKwDCNObAA8icJAKYzUwimM1P8pjNT/KYzUWCaCxgALLUsAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAApS2EAU5bCAFOWwgBTlsIAU5bCNVOWwgg+cJEAIT1QABU/XQA1isg4KYzUuymM1P8pjNT/KYzU/ymM1LAti9E0JYvmDhdouAAAAAAAAAAAAP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AFyk1AE+PuQBTlsIAU5bCAER7nwAmRVoADBojABRFaQAwi80xKYzUsymM1P8pjNT/KYzU/ymM1LgsjNE2MovXFB+K9MUfivbBH4r2BgcdNAARQH8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAQIDABIgKgAPGiIABRMcABdQeQAti9AqKYzUrCmM1P8pjNT/KYzU/ymM1MAqjNM9HmqmACWK7SIfivbZH4r2/x+K9vsuiudAFE2YACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAABhQfABtejgAoitEAKYzUACmM1JQpjNT/KYzU/ymM1MgpjNREH2mgABlosQAfivY0H4r26R+K9v8fivbyKIrtR0CB1SggevTQIHr0Nv///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAACBwsAJX2+ACmM1AApjNQAKYzUGSmM1MYpjNRMInWxABNHdQAcfuEAH4r2Sx+K9vUfivb/H4r25iGK9DE2gt4EIHr0yyB69P8gevTQ////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAOMUsAKYzUACmM1AApjNQAJX6/ABE7WgAUWJwAH4r2AB+K9mYfivb9H4r2/x+K9tYfivYfG27RACB69HsgevT/IHr0+yB69DL///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAfaJ4AJ4XKABVGagAKKkoAG3raAB+K9gEfivaEH4r2/x+K9v8fivbCH4r2EB133wAgevQsIHr0+SB69P8gevSAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAUSGwAFERwAElCOAB+J9QAfivYAH4r2lx+K9v8fivb/H4r2qR+K9gYefuoAIHr0BSB69M4gevT/IHr00CB69AUgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAkqSgAfivYAH4r2AB+K9gAfivZLH4r2/R+K9osfivYBH4PwACB69AAgevSAIHr0/yB69PkgevQwIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAAAAAAEEiAAB+K9gAfivYAH4r2AB+K9gAfivYsH4r2AB+G8wAge/QAIHr0MCB69PsgevT/IHr0eyB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAXZrYAH4r2AB+K9gAfivYAH4r2AB+K9gAfifUAIHz0ACB69AcgevTQIHr0/yB69MwgevQEIHr0ACB69AAgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAIDAB6E6gAfivYAH4r2AB+K9gAfivYAH4r2ACB+9QAgevQAIHr0fCB69P8gevT5IHr0LCB69AAgevQAIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAABBAcAEUqDAB6E6wAfivYAH4r2AB+K9gAggPUAIHr0ACB69AAgevQTIHr0qCB69HYgevQAIHr0ACB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP////////////////wAAH/8AAB//P/+f/z//n/8wAZ//MAGf/z//n/8wAZ//MAGf/zAAn/8/gJ//+AD///AAf//wEH//+cA///8AH//8BB///BgH//xwB///4If//4EP//+CD///hh///9w////4P///+H////j////////////" rel="icon" type="image/x-icon" />
Used this page here for this: http://www.motobit.com/util/base64-decoder-encoder.asp
Generate favicons
I can really suggest you this page: http://www.favicon-generator.org/ to create all types of favicons you need.
I read a bunch of different entries till I finally found a solution that worked for my scenario (ASP.NET MVC4 project).
Instead of using the filename favicon.ico for my icon, I renamed it to something else, ie myIcon.ico. Then I just used exactly what Domi posted:
<link rel="shortcut icon" href="myIcon.ico" type="image/x-icon" />
And this worked!
It's not a caching issue because I tested this with Fiddler - a request for favicon never occurred, even if I cleared my cache "From the beginning of time". I believe it's just some odd bug with chrome?
Upload your favicon.ico to the root directory of your website and that should work with Chrome. Some browsers disregard the meta tag and just use /favicon.ico
Go figure?.....
I also experienced the same thing. I found out that my favicon.ico had not been processed as a legitimate shortcut icon. I understand that favicons must be scaled to 16x16 and follow the Microsoft Icon format.
I have copied my favicon.ico file to my Apache document root. I had to add an Apache Rewrite exception for it and now it is accessible from www.example.com/favicon.ico. But when I hit my main URL it does not show up.
I thought all you had to do was copy the file with the correct permissions into the doc root? Do I need to make php changes? Thanks!
Try throwing this tag in the head of your document:
<link href="/favicon.ico" type="image/x-icon" rel="icon" />
IE and Firefox can behave differently (not sure which one you are using). Try to add the page as a bookmark, then click the bookmark (to load the page). After you do that exit your browser and see if the if shows up then.
If that does not work try to clear your browser cache and repeat the above steps that should fix it. I have seen your problem before!
the favicon.ico reference must be an absolute URL, not relative.
Using this:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
My status was
favicon.ico () shows up in:
IE 9.0.8
Safari 5.1.7
Fails in:
FF 28.0
Google Chrome 34.0
changing to absolute values
<link rel="icon" href="http://127.0.0.1/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://127.0.0.1/favicon.ico" type="image/x-icon">
causes all browsers to locate and display the favicon.ico
Could it be that you uploaded the favicon after your browser has remembered that your domain doesn't have one and therefore doesn't issue a new request?
favicon icon behaves differently for different browswrs & sometimes if it works in FF & does not work in IE.
Try after Clearing the cache of the browser and standard code for favicon ico is,
Just put below tag in your index file OR whichever common file for your project.
<link rel="FaviconIcon" href="favicon.ico" type="image/x-icon">
Although new browsers support GIF and PNG images , but , I would suggest always saving the image as favicon.ico.
Try placing the ico file in an images folder in your root. That's where many browsers look for favicon. And that's something to keep in mind. Favicon is a very loose standard, if you can even call it that, which is supported by browsers, not by the server. The browsers themselves actually fetch favicons in separate calls to display on their favorites bars, or tabs... The favicon file just has to be placed somewhere that the browsers can find it.
Some browsers will pick up the icon if its in the root directory without adding anything to the page, however IE and FF don't. Add this code to the head section of your page
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
It seems like in Chrome that you cannot use a link (ex. https://) rather must you have the favicon.ico in the same folder as the index.html. For any other file, it seems to work with a link.
I am using the following:
<link rel="shortcut icon" href="/images/favicon.ico" />
It is a true 'ico'. When I visit http://mydomain.com, the icon loads. But when I visit the 'www' subdomain: www.mydomain.com...it won't load. Any ideas what is going on?
I found that I had to clear my Firefox cache [CTRL]+[SHIFT]+[DEL], and then restart Firefox before I could see the favicon, which I put in the root of the web server and called favicon.ico.
Note that in recent versions of Firefox the favicon is only displayed on the tab icon and bookmark, not in the address bar icon.
It's part of a bigger firefox bug. If I am in mysite.com and say link rel="shortcut icon" href="/myicon.ico" it works. But this is the only way it works. If am in mysite.com and say link rel="shortcut icon" href="myicon.ico" or any other relative link, it fails. HOWEVER, if I am in www.mysite.com and use relative links, they work fine. Further, if I am in mysite.com and say link rel="shortcut icon" href="http://www.mysite.com/mypath/myicon.ico" it works. Firefox has forgotten how to deal with websites where www.mysite.com IS mysite.com. It used to work, and it doesn't anymore. You can also see that if you flip between www.mysite.com and mysite.com links will change from "visited" to "unvisited" style. FF is broken on this one, and has been for a couple of versions now, though once it worked.
This sounds like a configuration issue on your end which we can't solve without more information. Have you tried using an absolute URL instead of a relative one?
Example:
<link rel="shortcut icon" href="http://mydomain.com/images/favicon.ico" />
This is a result of how Firefox currently handles the caching of the favicon file. To solve you have a few options:
Add GET parameters
You can add an arbitrary GET parameter and value to the end of your favicon URI
(Tip: This trick can be used for any other css/js files when you want to make sure the user's browser is not serving a locally cached version.)
<link rel="shortcut icon" href="/images/favicon.ico?updated=20150818" />
Rename the file
Rename your favicon file and reference the renamed file in your href attribute.
<link rel="shortcut icon" href="/images/favicon_version_2.ico" />
Hard Refresh
A hard refresh may work on some browsers if you are only concerned with updating your local machines favicon. Usually Ctrl+Shift+R or Ctrl+F5 for Windows/*NIX and Command+R or Command+Shift+R on Mac will do the trick.
Explanation: The end result is you need to force the browser to pull a fresh copy of the file instead of using a locally cached file. Adding a ?somevariable=uniquevalue to the end of the file URI tricks your browser into thinking it's dealing with a new file, and new files by nature can't already be cached. The same effect is created when you rename a file.
Extra nerdy technical notes: Using a timestamp, or unique file version number for the GET parameter value is best because it will encourage variable uniqueness. It's possible if the user has already loaded that URI with the exact same GET parameter and value (?updated=20150818 in my example), the browser will not pull a fresh copy, because it may understand it's still dealing with the same file.
The option to cache files based on the GET parameters in a URI is browser specific as the rules are somewhat left up to the browser vendor's to discern between how they handle that particular caching instance (see RFC at http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html#sec13.9). So, just keep in mind it's possible in some browsers if you are using a date as a value, you may want to include the time as well if you are changing your file multiple times throughout the day.
For security reasons favicons are not used in the address bar anymore starting with firefox 15, but are still used in tabs and bookmarks etc
See http://www.ghacks.net/2012/04/25/mozilla-to-remove-favicons-from-firefox-url-bar/
you can try to put the icon to the root.
For me putting two link refs in the header worked.
FF did not display the icon until the second line was added
<!-- browser icon -->
<link type="image/x-icon" href="/favicon.ico" rel="shortcut icon" >
<link type="image/x-icon" href="/favicon.png" rel="shortcut icon" >
Removing or leaving in the first / made no difference to how FF handled the icon.
The console reported
[Exception... "Favicon at "https://<myhost>/favicon.ico" failed to load:
Forbidden." nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame ::
resource:///modules/FaviconLoader.jsm :: onStopRequest :: line 227" data: no]
But it loaded the .png file anyway, without complaining in the browser window.
Perhaps the first slash in href="/images/favicon.ico" is causing a problem?
Have you tried
<link rel="shortcut icon" href="images/favicon.ico" />
?
What is the directory structure for www subdomain? Can you access other image files using the absolute path?
Fireworks often picks up the favicon.ico file automatically without any code, so long as it is the same folder as the document. Try moving your file up a level to avoid referencing issues.
This problem is annoying...
I usually just add a 16x16 PNG favicon to solve this.
Firefox's way to deal with favicons seems a bit odd and that workaround is, to me, the simplest.
Hope this helps.
Firefox looks for "favicon.png" rather than "favicon.ico" in root folder of your website. I recommend including both for compatibility with more browsers.
The protocol relative URL could be a good option (archived, you never know).
It is about network-path reference (explanation there), try:
<link rel="shortcut icon" href="//images/favicon.ico" />
for firefox you have to use a special tag:
<link rel="image/x-icon" type="image/png" href="/favicon/favicon-196x196.png" />
Now when you drag it to bookmark bar the icon shows.