Firefox doesn't show favicon - html

I created favicon.ico file and declared it in my HTML head tag:
<link type="image/x-icon" href="favicon.ico" rel="icon" />
<link type="image/x-icon" href="favicon.ico" rel="shortcut icon" />
IE 8 and Opera handle it great but FireFox does not even try to load it (as I see from my Fiddler debug proxy). I've tried many different type (image/ico etc.) and href params but no luck.
What did I miss?

Like most things in the browser, favicons (or lack thereof) are common candidates for caching.
Try clearing your browser cache.
In Mozilla Firefox, the keyboard shortcut to "Reload (override cache)" is
Ctrl + F5 OR
Ctrl + Shift + R

Firefox has separate cache for favicon and this does not work properly. The favicon is not updated easily in firefox. This is a small issue but troubles many of us for long time.
The solution is to clear the favicon cache so that the favicon is update. There are many solutions you can find if you go through the internet or stackoverflow. Most of the solution imvolves deleteing the favicon cache manually or using some plugins. Some saying deleting the file from temp internet files. But there is one really simple and easy way to fix the problem.
Type in www.yoursite.com/favicon.ico (or www.yoursite.com/apple-touch-icon.png, etc.)
CTRL + F5 or CTRL + R
This will immediately update the favicon.
This solution was originally posted by 'alex' at this link:
How do I force a favicon refresh

That's strange, because I just copy/pasted your code to a blank document, opened with firefox and some random image I renamed to favicon.ico loaded up as the favicon.
Maybe try this?
http://help.godaddy.com/article/4145

My problem was that I had another favicon.ico in a web root directory.
If You have a favicon in template directory "/template/favicon.ico" and another one in "/favicon.ico" firefox will use the favicon from root direcory even though you've used a link for favicon in template folder. Solution is delete the favicon in root directory.
My current version of firefox is 58.0b6 (Quantum).

So just had an issue with favicons not showing in Firefox v70.0.1.
Now this will probably only be an issue for a very few people and most likely only if you have modified the about:config settings in FF
This issue for me was the setting privacy.resistfingerprinting was set to true on some sites this will block favicons.
The other issue I noticed and what lead me to find out what was causing the issue was using dropzone.js on a site I was creating the uploaded images had a blank preview. The previews are base64 encoded and were being blocked by this.
Like I said most likely wont be an issue for most but wanted to post this somewhere so it may help others that may be facing a similar issue as I did.
See more here: https://wiki.mozilla.org/Security/Fingerprinting
And Here: https://bugzilla.mozilla.org/show_bug.cgi?id=1452391

I am not much of a programmer but I had a similar problem and here is the simple thing that finally worked for me...
I admin several simple websites but Firefox refused to load the favicon of one in particular site. I looked online, tried everything I was able to understand. Nothing worked. The code was exactly the same (copied in fact) from the other websites whose icons worked well.
Eventually it dawned on me that maybe Firefox did not like the path I used to get there. This site was a forwarded URL being hosted on my own domain. (i.e. personal domain is myplace.ca and the favicon that would not load was part of registered URL something.com which was actually located at myplace.ca/PutItHere/) If I used the registered URL (something.com) no favicon. If I use the real path in the browser, suddenly favicon! All I had to do was bookmark the absolute path rather than the registered domain!

I also found, that if you reference the full URL path, you may need to reference the URL WITH www. in it, otherwise it may not load.

Here it's in 2017. Firefox didn't pick up my favicon called "favicon-32x32.png", while Chrome was showing. I changed the file name to "favicon.png", AND refreshed as folks showed above, it worked great. I'm using:
Firefox version 55.0
Chrome version 60.0

Related

I was creating a website, but my favicon isn't working [duplicate]

I have a Grails application running locally using its own tomcat and I have just changed the favicon for a new one. Problem is that I can not see it in any browser. The old favicon shows up or I get no favicon at all, but not my new one. I do not think this is a Grails issue per se, more an issue with favicons.
What is supposed to happen with favicons? How are they supposed to work? I have numerous bookmarks in my browser which have the wrong icons and they never seem to get refreshed. How do I force the server/browser to stop caching them? It seems pretty silly to always cache them given they are normally only 16x16. Why not just upload them with every visit to the page? It is not exactly a huge overhead.
To refresh your site's favicon you can force browsers to download a new version using the link tag and a query string on your filename.
This is especially helpful in production environments to make sure your users get the update.
<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />
Adapted from lineofbird's answer beloew, you can do the following:
Go directly to the favicon url in the address bar by typing in it's address e.g.
www.yoursite.com/favicon.ico
www.yoursite.com/apple-touch-icon.png
etc.
Navigate to the url by pressing Enter
Refresh with Ctrl+F5
Restart your browser (e.g. Chrome, Firefox)
This answer has not been given yet so I thought I'd post it. I looked all around the web, and didn't find a good answer for testing favicons in local development.
In current version of chrome (on OSX) if you do the following you will get an instant favicon refresh:
Hover over tab
Right Click
Select reload
Your favicon should now be refreshed
This is the easiest way I've found to refresh the favicon locally.
By destroying the file your browser uses to store old favicons, you can force new ones to be loaded.
Close your browser. Make sure there are no longer browser processes running (e.g. check Task Manager for chrome.exe or firefox.exe).
Navigate to where your browser stores user files:
For Chrome, go to the Chrome data directory.
For Firefox, go to the Firefox profile folder.
Delete the favicon cache.
For Chrome, remove Favicons and Favicons-journal
For Firefox, remove favicons.sqlite
This will almost definitely work. If not:
Possibility 1: An update to your browser has changed how the favicon cache works. Please edit this answer with new instructions.
Possibility 2: Your favicon problem has nothing to do with overaggressive caching. It may instead be a resource-loading problem – using Developer Tools, make sure the new favicon is downloading properly.
Rename the favicon file and add an html header with the new name, such as:
<link rel="SHORTCUT ICON" href="http://www.yoursite.com/favicon2.ico" />
If you use PHP you could also use the MD5-Hash of the favicon as a query-string:
<link rel="shortcut icon" href="favicon.ico?v=<?php echo md5_file('favicon.ico') ?>" />
This way the Favicon will always refresh when it has been changed.
As pointed out in the comments you can also use the last modified date instead of the MD5-Hash to achieve the same thing and save a bit on server performance:
<link rel="shortcut icon" href="favicon.ico?v=<?php echo filemtime('favicon.ico') ?>" />
In Chrome on Mac OS X one can remove file with favicon cache
${user.home}/Library/Application Support/Google/Chrome/Default/Favicons
Depending on the browser they are handled differently, but typically I find that going to the default page of the site, and doing a hard refresh. CTRL + F5 (or ⌘ Command + SHIFT + F5 on macOS), will typically get it to update.
Well, overhead is overhead, but yes, not too big.
Also, browsers are sometimes "greedy" about cached files. You could clear cache and/or restart your browser and may see the change. If that fails though...
My cheapo solution is to:
Visit your file at http://example.com/favicon.ico in your browser.
Delete the favicon.ico from your webroot.
Visit http://example.com/favicon.ico again in a browser, verify it's missing.
Upload new one to your webroot.
Visit http://example.com/favicon.ico again in a browser, verify it's the new one.
If that sequence doesn't work, then something else is going on.
ON MAC:
⌘ + Shift-R or hold down Ctrl and click the reload button in the browser.
For Internet Explorer, there is another solution:
Open internet explorer.
Click menu > tools > internet options.
Click general > temporary internet files > "settings" button.
Click "view files" button.
Find your old favicon.ico file and delete it.
Restart browser(internet explorer).
More than likely a web browser issue. You will have to delete your cache from your browser, close your browser and reopen it. That should fix it.
I don't believe your favicons will get refreshed on your favorites until you revisit that page, and assuming that you had previously cleared your browsers cache.
Your web browser will not go out to the internet to check for a new favicon on its own... thank goodness.
Try Opening In a New Tab
I tried many of the things above (resetting cache, refreshing, using the link tag, etc), I even checked my .htaccess file and reset the ExpiresByType variable.
But this is what finally worked for me in both Chrome (25.0.x) and Safari (6.0.1):
Flushing cache
Hard-linking the favicon with the <link> tag
Navigating to mysite.com/favicon.ico
Opening mysite.com in a new tab
(Up until step 3, refreshing in the same tab kept reproducing the old icon.)
Chrome Version: 68.0.3440.106
Just restart Chrome (in your address bar):
chrome://restart
For Chrome on macOS, if you don't want to delete the entire Chrome favicon database as suggested already here, you can delete only the conflicting icons:
Quit Chrome
Load the favicons database (using sqlite here):
sqlite3 ~/Library/Application\ Support/Google/Chrome/Default/Favicons
Search for the file that is causing issues
select * from favicons where url = 'http://mysite.dev/favicon.ico';
If you are happy with the output:
delete from favicons where url = 'http://mysite.dev/favicon.ico';
Alternatively, you can search for a pattern that you can reuse to delete multiple entries:
Search for multiple files that are causing issues
select * from favicons where url like 'http://mysite.dev%';
And again if you are happy with what this returns:
delete from favicons where url like 'http://mysite.dev%';
Type .exit and hit return to quit sqlite
Restart Chrome
When you request the favicon from Google, you can take a look at the response headers.
Last-Modified: Fri, 09 Jan 2009 16:35:02 GMT
Date: Thu, 01 Dec 2010 00:00:01 GMT
Expires: Fri, 01 Dec 2011 00:00:01 GMT
Cache-Control: public, max-age=31536000
Age: 7
If you put an "Expires: " header on the response, client browsers will re-request the icon after that timestamp. While doing active development, you could set the expires timestamp to a second or two in the future, and always have it fetch this, although that's a poor longterm plan.
Chrome's favicon support is buggy - disregard this answer
I wrote this answer under the impression that this is what it took to refresh favicons in Google Chrome. However, it turns out that this only works for the first five minutes or so, until the icon gets irretrievably lost in Chrome's history synchronization.
Original answer
You don't have to clear your cache, restart your browser, or rewrite your HTML - you just need to change the icon's URL, once, so that the browser will forget the previously-cached icon.
Assuming that you've defined your icon via <link> elements in your page's <head>, you can do that by running this standard-JS one-liner in the console:
[].slice.call(document.querySelectorAll('head>link[rel$="icon"]')).map(function(ln){ln.href+='?v=2'});
For a more advanced implementation of this that can automatically do this for end users in production, see freshicon.js.
I recently restored my bookmarks and was looking for a way to restore the FavIcons without visiting each page. My search brought me to this thread.
For those in a similar circumstance merely download the FAVICON RELOADER addon. Once installed you will find the "reload favorite icons" command in your BOOKMARKS dropdown menu.
https://addons.mozilla.org/en-US/firefox/addon/faviconreloader/?src=api
If you are using PHP .. then you can also use this line.
<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=<?php echo time() ?>" />
It will refresh your favicon on each page load.
If you are just interested in debugging it to make sure it has changed, you can just add a dummy entry to your /etc/hosts file and hit the new URL. That favicon wouldnt be cached already and you can make sure you new one is working.
Short of changing the name of the favicon, there is no way you can force your users to get a new copy
This is a workaround for the chrome bug: change the rel attribute to stylesheet! Keep the original link though. Works like a charm:
I came up with this workaround because we also have a requirement to be able to update customer's sites / production code and I didn't find any of the other solutions to work.
This works for Chrome:
on Mac: delete file
${user.home}/Library/Application Support/Google/Chrome/Default/Favicons
on Windows: delete files
C:\Users[username]\AppData\Local\Google\Chrome\User Data\Default\Favicons
C:\Users[username]\AppData\Local\Google\Chrome\User Data\Default\Favicons-journal
source
I know this is a really old question but it is also one that is still relevant, though these days applies only to mozilla. (I have no idea what explorer does coz we don't code for non standard browsers).
Chrome is well behaved if one includes an icon tag in the header.
Although mozilla are well aware of the issue, as usual, they never fix the annoying small stuff. Even 6 years later.
So, there are two ways of forcing an icon refresh with firefox.
Have all your clients uninstall firefox. Then re-install.
Manually type just the domain in the url bar - do not use http or www
just the domain (mydomain.com).
This assumes of course that your ns records include resolution for the domain name only.
Simple,
1: I don't want to fiddle around with codes (ps my site builder doesn't use codes, it uses "upload file" button and it does it itself)
2: I tried the CTRL+F5 and it doesn't work for me so....
I HAVE A SOLUTION:
IE: Clear All browser history and cookies by going to the settings cog O
Chrome: Go to the menu in the top right corner below the X that looks like a = , then go to settings, history, CLEAR BROWSING DATA and check all of the boxes that apply (I did history, cookies and empty the catche from the beginning of time)
Just change this filename='favicon1.ico'
Here's how I managed it with a simply animated favicon and FireFox 3.6.13 (beta version) It will probably work for other versions of FireFox as well, let me know if it doesn't.
It's basically artlung's solution, but addressing the .gif file as well:
I opened by FTP program, downloaded my favicon.ico AND favicon.gif files,
then DELETED them from my server's files.
Then I opened them in my browser as artlung suggested:
http://mysite.com/favicon.ico AND http://mysite.com/favicon.gif Once those addresses loaded and displayed 404 error pages ("page not found")
I THEN uploaded both files back onto my server, and PRESTO - the correct icons were instantly displayed.
Also make sure you put the full image URL not just its relative path:
http://www.example.com/images/favicon.ico
And not:
images/favicon.ico
Use query string at the end of the file path. Query string variable value must be different with every build.
if previous build is:
<link rel="icon" href="http://example.com/favicon.ico?v=v1" />
OR
<link rel="icon" href="http://example.com/favicon.ico?v=stringA" />
then next build should be:
<link rel="icon" href="http://example.com/favicon.ico?v=v2" />
OR
<link rel="icon" href="http://example.com/favicon.ico?v=stringB" />
Close all Google Chrome windows
Adding one more answer that I do not see here. I tried flushing my Google Chrome cache, reloading the tab, refreshing the tab, opening in a new tab, and even opening a new window. Nothing worked for me. What did finally work for me was to close all Google Chrome windows (if you're like me, you probably have 3+ windows with a bunch of tabs, and maybe even have more windows/tabs in another desktop, don't forget those!). Once all of your windows are closed, then try opening a fresh new window and reloading your site.
Hope this helps someone!
Bonus tip: If you'd like to get all your windows back, you can press "Ctrl + Shift + Up Arrow + T" to get your windows and tabs back.
If the problem continues despite of applying some steps above:
try to restart the IIS Server.

favicon.ico 404 (Not Found)

Chrome - source code tab - I see the following in console:
GET http://localhost/favicon.ico 404 (Not Found)
Inside head tag I have the following:
<link href='ico/favicon.ico' rel='icon'>
Click on the above link - opens a new tab with the ico image.
Also tried - without succes:
<link rel="shortcut icon" href="ico/favicon.ico">
Click on the above link says- doesn't exists.
Also I noticed the error message appears only at start and after pressing Ctrl F5, and after pressing F5 only - it dissapears.
Anyway, there is no icon on the browser's tab in any case.
On page tab - console is empty.
Other browsers not tested.
So what is the right way to have an icon and how to avoid the above message?
I've had problems like this with web servers running Linux. Sometimes you need to set the execute bit on the favicon.ico file:
chmod +rx favicon.ico
I've also had to give permissions to the web server service/account to the file:
sudo chown www-data:www-data /var/www/favicon.ico
Make sure your favicon does exist by going to http://localhost/ico/favicon.ico
and then try ctrl + f5, sometimes caching can ruin things up.
TL; DR
Things you should try:
Test with Firefox. If that works, you probably have a body-only markup in your head.
Use an absolute path (ie. /ico/favicon.ico)
Explanations
Browsers try to get favicon.ico in the root directory by convention. So this line in the dev console does not mean your browser doesn't understand ico/favicon.ico. This is more a sign that the favicon markup didn't work for any reason, so your browser is using the "root folder convention" as a fallback.
Using an absolute path (ie. /ico/favicon.ico instead of ico/favicon.ico) might help you pinpoint the issue, especially if your test page is not /.
Chrome has a particular behavior regarding forbidden markups in head (eg. div, p... which are body-only markups). When this happens, it considers the head section to be closed and thus ignores all head-only markups... such as link. Consequence: favicon sometimes works everywhere but fails on Chrome. So this is a good idea to test on another browser. It the favicon works elsewhere, look carefully at your head and try to spot a markup that shouldn't be here. W3C validator might help.
As Philippe said check that you don't have any wrong in your head tag. In my case I was printing a value with an echo function (php code). Removing it resolves this issue.
I was using tailwind and encountered the above error, I simply fixed it by
going back to my public folder and deleted the index.html page and recreated it back then paste
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css"rel="stylesheet"/>
in the head section and it was fixed.

Favicon Only Works with IP

EDIT:Solved, had to restart Firefox twice for some odd reason.
Note: I use firefox on my main computer.
I made a favicon recently for my website, so I put it into the root directory as "favicon.ico" as you would usually do. I refreshed my page, and it didn't work. I cleared my cache, still didn't work. Then I just type in my IP into the address bar, and it worked. I go to my chromebook and type my url, and I get the Freenom logo as a favicon in chrome. I have tried using the <link> tag in my headspace, and that does not work either. Does anybody know what's going on? Since Freenom's favicon is showing, they might have something to do with it.
Ill put the link here, but I'm removing it when my problem is solved.
This site is awesome to use https://realfavicongenerator.net/
It generates all the favicons for all devices out now. This page has a good example

Firefox showing wrong favicon first time [duplicate]

I have a Grails application running locally using its own tomcat and I have just changed the favicon for a new one. Problem is that I can not see it in any browser. The old favicon shows up or I get no favicon at all, but not my new one. I do not think this is a Grails issue per se, more an issue with favicons.
What is supposed to happen with favicons? How are they supposed to work? I have numerous bookmarks in my browser which have the wrong icons and they never seem to get refreshed. How do I force the server/browser to stop caching them? It seems pretty silly to always cache them given they are normally only 16x16. Why not just upload them with every visit to the page? It is not exactly a huge overhead.
To refresh your site's favicon you can force browsers to download a new version using the link tag and a query string on your filename.
This is especially helpful in production environments to make sure your users get the update.
<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />
Adapted from lineofbird's answer beloew, you can do the following:
Go directly to the favicon url in the address bar by typing in it's address e.g.
www.yoursite.com/favicon.ico
www.yoursite.com/apple-touch-icon.png
etc.
Navigate to the url by pressing Enter
Refresh with Ctrl+F5
Restart your browser (e.g. Chrome, Firefox)
This answer has not been given yet so I thought I'd post it. I looked all around the web, and didn't find a good answer for testing favicons in local development.
In current version of chrome (on OSX) if you do the following you will get an instant favicon refresh:
Hover over tab
Right Click
Select reload
Your favicon should now be refreshed
This is the easiest way I've found to refresh the favicon locally.
By destroying the file your browser uses to store old favicons, you can force new ones to be loaded.
Close your browser. Make sure there are no longer browser processes running (e.g. check Task Manager for chrome.exe or firefox.exe).
Navigate to where your browser stores user files:
For Chrome, go to the Chrome data directory.
For Firefox, go to the Firefox profile folder.
Delete the favicon cache.
For Chrome, remove Favicons and Favicons-journal
For Firefox, remove favicons.sqlite
This will almost definitely work. If not:
Possibility 1: An update to your browser has changed how the favicon cache works. Please edit this answer with new instructions.
Possibility 2: Your favicon problem has nothing to do with overaggressive caching. It may instead be a resource-loading problem – using Developer Tools, make sure the new favicon is downloading properly.
Rename the favicon file and add an html header with the new name, such as:
<link rel="SHORTCUT ICON" href="http://www.yoursite.com/favicon2.ico" />
If you use PHP you could also use the MD5-Hash of the favicon as a query-string:
<link rel="shortcut icon" href="favicon.ico?v=<?php echo md5_file('favicon.ico') ?>" />
This way the Favicon will always refresh when it has been changed.
As pointed out in the comments you can also use the last modified date instead of the MD5-Hash to achieve the same thing and save a bit on server performance:
<link rel="shortcut icon" href="favicon.ico?v=<?php echo filemtime('favicon.ico') ?>" />
In Chrome on Mac OS X one can remove file with favicon cache
${user.home}/Library/Application Support/Google/Chrome/Default/Favicons
Depending on the browser they are handled differently, but typically I find that going to the default page of the site, and doing a hard refresh. CTRL + F5 (or ⌘ Command + SHIFT + F5 on macOS), will typically get it to update.
Well, overhead is overhead, but yes, not too big.
Also, browsers are sometimes "greedy" about cached files. You could clear cache and/or restart your browser and may see the change. If that fails though...
My cheapo solution is to:
Visit your file at http://example.com/favicon.ico in your browser.
Delete the favicon.ico from your webroot.
Visit http://example.com/favicon.ico again in a browser, verify it's missing.
Upload new one to your webroot.
Visit http://example.com/favicon.ico again in a browser, verify it's the new one.
If that sequence doesn't work, then something else is going on.
ON MAC:
⌘ + Shift-R or hold down Ctrl and click the reload button in the browser.
For Internet Explorer, there is another solution:
Open internet explorer.
Click menu > tools > internet options.
Click general > temporary internet files > "settings" button.
Click "view files" button.
Find your old favicon.ico file and delete it.
Restart browser(internet explorer).
More than likely a web browser issue. You will have to delete your cache from your browser, close your browser and reopen it. That should fix it.
I don't believe your favicons will get refreshed on your favorites until you revisit that page, and assuming that you had previously cleared your browsers cache.
Your web browser will not go out to the internet to check for a new favicon on its own... thank goodness.
Try Opening In a New Tab
I tried many of the things above (resetting cache, refreshing, using the link tag, etc), I even checked my .htaccess file and reset the ExpiresByType variable.
But this is what finally worked for me in both Chrome (25.0.x) and Safari (6.0.1):
Flushing cache
Hard-linking the favicon with the <link> tag
Navigating to mysite.com/favicon.ico
Opening mysite.com in a new tab
(Up until step 3, refreshing in the same tab kept reproducing the old icon.)
Chrome Version: 68.0.3440.106
Just restart Chrome (in your address bar):
chrome://restart
For Chrome on macOS, if you don't want to delete the entire Chrome favicon database as suggested already here, you can delete only the conflicting icons:
Quit Chrome
Load the favicons database (using sqlite here):
sqlite3 ~/Library/Application\ Support/Google/Chrome/Default/Favicons
Search for the file that is causing issues
select * from favicons where url = 'http://mysite.dev/favicon.ico';
If you are happy with the output:
delete from favicons where url = 'http://mysite.dev/favicon.ico';
Alternatively, you can search for a pattern that you can reuse to delete multiple entries:
Search for multiple files that are causing issues
select * from favicons where url like 'http://mysite.dev%';
And again if you are happy with what this returns:
delete from favicons where url like 'http://mysite.dev%';
Type .exit and hit return to quit sqlite
Restart Chrome
When you request the favicon from Google, you can take a look at the response headers.
Last-Modified: Fri, 09 Jan 2009 16:35:02 GMT
Date: Thu, 01 Dec 2010 00:00:01 GMT
Expires: Fri, 01 Dec 2011 00:00:01 GMT
Cache-Control: public, max-age=31536000
Age: 7
If you put an "Expires: " header on the response, client browsers will re-request the icon after that timestamp. While doing active development, you could set the expires timestamp to a second or two in the future, and always have it fetch this, although that's a poor longterm plan.
Chrome's favicon support is buggy - disregard this answer
I wrote this answer under the impression that this is what it took to refresh favicons in Google Chrome. However, it turns out that this only works for the first five minutes or so, until the icon gets irretrievably lost in Chrome's history synchronization.
Original answer
You don't have to clear your cache, restart your browser, or rewrite your HTML - you just need to change the icon's URL, once, so that the browser will forget the previously-cached icon.
Assuming that you've defined your icon via <link> elements in your page's <head>, you can do that by running this standard-JS one-liner in the console:
[].slice.call(document.querySelectorAll('head>link[rel$="icon"]')).map(function(ln){ln.href+='?v=2'});
For a more advanced implementation of this that can automatically do this for end users in production, see freshicon.js.
I recently restored my bookmarks and was looking for a way to restore the FavIcons without visiting each page. My search brought me to this thread.
For those in a similar circumstance merely download the FAVICON RELOADER addon. Once installed you will find the "reload favorite icons" command in your BOOKMARKS dropdown menu.
https://addons.mozilla.org/en-US/firefox/addon/faviconreloader/?src=api
If you are using PHP .. then you can also use this line.
<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=<?php echo time() ?>" />
It will refresh your favicon on each page load.
If you are just interested in debugging it to make sure it has changed, you can just add a dummy entry to your /etc/hosts file and hit the new URL. That favicon wouldnt be cached already and you can make sure you new one is working.
Short of changing the name of the favicon, there is no way you can force your users to get a new copy
This is a workaround for the chrome bug: change the rel attribute to stylesheet! Keep the original link though. Works like a charm:
I came up with this workaround because we also have a requirement to be able to update customer's sites / production code and I didn't find any of the other solutions to work.
This works for Chrome:
on Mac: delete file
${user.home}/Library/Application Support/Google/Chrome/Default/Favicons
on Windows: delete files
C:\Users[username]\AppData\Local\Google\Chrome\User Data\Default\Favicons
C:\Users[username]\AppData\Local\Google\Chrome\User Data\Default\Favicons-journal
source
I know this is a really old question but it is also one that is still relevant, though these days applies only to mozilla. (I have no idea what explorer does coz we don't code for non standard browsers).
Chrome is well behaved if one includes an icon tag in the header.
Although mozilla are well aware of the issue, as usual, they never fix the annoying small stuff. Even 6 years later.
So, there are two ways of forcing an icon refresh with firefox.
Have all your clients uninstall firefox. Then re-install.
Manually type just the domain in the url bar - do not use http or www
just the domain (mydomain.com).
This assumes of course that your ns records include resolution for the domain name only.
Simple,
1: I don't want to fiddle around with codes (ps my site builder doesn't use codes, it uses "upload file" button and it does it itself)
2: I tried the CTRL+F5 and it doesn't work for me so....
I HAVE A SOLUTION:
IE: Clear All browser history and cookies by going to the settings cog O
Chrome: Go to the menu in the top right corner below the X that looks like a = , then go to settings, history, CLEAR BROWSING DATA and check all of the boxes that apply (I did history, cookies and empty the catche from the beginning of time)
Just change this filename='favicon1.ico'
Here's how I managed it with a simply animated favicon and FireFox 3.6.13 (beta version) It will probably work for other versions of FireFox as well, let me know if it doesn't.
It's basically artlung's solution, but addressing the .gif file as well:
I opened by FTP program, downloaded my favicon.ico AND favicon.gif files,
then DELETED them from my server's files.
Then I opened them in my browser as artlung suggested:
http://mysite.com/favicon.ico AND http://mysite.com/favicon.gif Once those addresses loaded and displayed 404 error pages ("page not found")
I THEN uploaded both files back onto my server, and PRESTO - the correct icons were instantly displayed.
Also make sure you put the full image URL not just its relative path:
http://www.example.com/images/favicon.ico
And not:
images/favicon.ico
Use query string at the end of the file path. Query string variable value must be different with every build.
if previous build is:
<link rel="icon" href="http://example.com/favicon.ico?v=v1" />
OR
<link rel="icon" href="http://example.com/favicon.ico?v=stringA" />
then next build should be:
<link rel="icon" href="http://example.com/favicon.ico?v=v2" />
OR
<link rel="icon" href="http://example.com/favicon.ico?v=stringB" />
Close all Google Chrome windows
Adding one more answer that I do not see here. I tried flushing my Google Chrome cache, reloading the tab, refreshing the tab, opening in a new tab, and even opening a new window. Nothing worked for me. What did finally work for me was to close all Google Chrome windows (if you're like me, you probably have 3+ windows with a bunch of tabs, and maybe even have more windows/tabs in another desktop, don't forget those!). Once all of your windows are closed, then try opening a fresh new window and reloading your site.
Hope this helps someone!
Bonus tip: If you'd like to get all your windows back, you can press "Ctrl + Shift + Up Arrow + T" to get your windows and tabs back.
If the problem continues despite of applying some steps above:
try to restart the IIS Server.

Can't find favicon in web page source

Maybe a stupid question, but for the life of me I can't find a reference to the favicon "ico" file on this website:
http://www.fitnessutah.com/
They obviously have one because it displays in the browser tab/window. I've tried Chrome developer tools, Network tab which shows all images on a page -- but no favicon there either. Where is it hiding?
It does seem to be being pulled in differently, but it is typically always in the default location - which this one is as well.
http://www.fitnessutah.com/favicon.ico
There are two ways to specify the favicon for a website:
1) Give a link to the favicon
<link rel="icon" type="image/png" href="/somepath/favicon.png" />
2) Put it in a prefefined URL, this is relative to the server root. So in this case will be http://www.fitnessutah.com/favicon.ico
This website seems to be using the second method so you will find the favicon in that link.
You do not need to add a link element with your favicon image for it to appear on your website.
Quote:
A second method for specifying a favicon relies on using a predefined URI to identify the image: "/favicon", which is relative to the server root.
Source:
http://www.w3.org/2005/10/howto-favicon
Further to Keir's and Carlos' answers - to spell it out - most browsers are programmed to also look for a favicon here:
http://yourwebsitename.com/favicon.ico
If the favicon image is named/stored as above, there is no need to mention it in the HTML code.
Therefore, if you are looking at a website and you can't find any reference to their favicon in the HTML source, just type the website's base URL in the browser address bar followed by /favicon.ico:
http://example.com/favicon.ico
Real-life example - try to find the favicon in the source code:
http://www.fuelly.com/favicon.ico
Use Chrome Dev Tools Network tab.
Filter by favicon
reload the page with Shift+F5
You will get the icon regardless it was loaded with link or from default location