favicon not displayed by Firefox

Solution 1:

First, make sure you don't have a "normal" cache problem by loading the favicon URL directly (put it into the browser's URL bar) and force-refreshing it. If that does the job, no need for the complicated solution below.

IMPORTANT:

My original problem cannot have been a cache issue: First, I did clear the cache, second, as I mentioned above, I already successfully loaded the icon file into Firefox through its URL http://website/favicon.ico

So I do (did) get the right icon in the browser when loaded directly! But I still have (had) the wrong icon displayed as "favicon". Loading the icon file directly is (or was) independent of the display in the actual favicon location (except for when it is loaded for the very first time of course).

However, if you only have a cache issue and force-refresh works for your than this question/issue is NOT yours! And your answer isn't an answer for this issue.

People should not ignore facts. When you are bombarded with lots of already answered and/or useless questions the quality of the question suffers for the moment and for the archive too. It is amazing how I have to fight with people who still insist that a force-refresh is the answer!

Note: You can avoid this issue entirely by using a cache-buster URL just like StackOverflow does, their favicon URL ends in .../img/favicon.ico?v=4f32ecc8f43d.

If normal cache clearing measures fail (just like they did for me) an answer is given here: "Clearing All Favicons From Firefox 3 Cache [How-To]" -- and here is an archive.org version of the link (probably slower, but it won't go away).

The steps from that page reproduced here:

1. Install the Firefox add-on SQLite Manager
2. Launch it from Tools -> SQLite Manager
3. Click the "Database" menu item (top left) and select "Connect Database", enter %APPDATA%\Mozilla\Firefox
4. Open the Profiles folder and go to the profile you use
5. Select places.sqlite as the database file to edit (Firefox 61 and later: favicons.sqlite)
6. Either choose the moz_favicons table. From the right-click context menu use "Empty table", do not use "Drop table" (the table must be there) or use the right-click context menu over the data and select "Delete" over only the one entry that you want to remove (see screenshot below)

I started suspecting that Firefox caches favicons separate from everything else - it was the only explanation matching the observed behavior. So I googled for confirmation and found the above URL. Next I'll try clearing that particular extra cache and see what happens.

UPDATE - SOLVED: After deleting the favicon cache using the "SQLite Manager" Firefox add-on all works as it should.

So the secret was the EXTRA (sqlite) CACHE FOR FAVICONS in Firefox, WHICH IS NOT CLEARED BY THE REGULAR "Clear Cache" command.

Update March 2017: I checked this Firefox add-on and also the standalone app suggested in this answer below and both do the job. The SQLite Manager add-on was last updated ~2 years ago according to its Github project page, but it still does what it's needed for in this context. There are updates available from people who have forked the project, but that is just an aside.

Solution 2:

Long time ago, I know, but the cache clear procedure on FF 31.0/Windows works for me - maybe it's new. Options -> network -> cached web content -> clear now. Shut down FF, restart. No messing about with SqLite, new favicon loads.

However, there is another potential problem. The server for the site which I was trying to refresh the icon for had a DocumentRoot of /var/www. This site was at foo.com/fubar, where var/www/fubar symlinked to somewhere else. In other words, the site is one level down from DocumentRoot. This works for Chrome, Opera, and IE, but not Safari or FF:

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

FF looks for the favicon in /var/www, instead of /var/www/fubar. This works for all 5 browsers:

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

Solution 3:

was facing similar issue. Just break the cache of image. I am using MVC Razor View.

    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = "/images/[email protected]";
    var head = document.head || document.getElementsByTagName('head')[0];
    head.appendChild(link);