Fix: Firefox Displaying the Wrong Bookmark Favicons

Some users have been encountering a weird issue on Mozilla Firefox where they see a wrong favicon for each site that they had bookmarked. For example, instead of displaying the Reddit icon for Reddit bookmarked threads, the browser shows a YouTube favicon (or something else). The issue doesn’t seem to be related to a particular Windows version as it’s reported to occur on Windows 7, Windows 8 and Windows 10.

What is causing the favicons issue on Firefox?

We investigated this particular issue by looking at various user reports and the repair strategies that are commonly used to fix this particular issue on Windows computers. As it turns out, there are several different reasons why this particular issue occurs:

Method 1: Updating Firefox to the latest version

This particular issue is almost as old as the browser itself. Firefox has released several updates that included a hotfix for this issue, but some users are still encountering it on the latest builds. However, since the issue has been addressed, you’re first starting point should be to make sure that you’re using the latest Firefox build. Starting with build 58, the developers have announced that they have patched most instances that are known to trigger this particular issues.

While this won’t necessarily resolve the issue if your favicons are already messed up, it will ensure that it won’t happen again in the future. Here’s a quick guide on updating Firefox to the latest version:

1. Open Firefox and click the action button in the top-right corner.
2. Then, from the newly appeared menu, click on Help and select About Firefox.
3. Inside the next window, wait until the update is downloaded, then click on Restart to update Firefox to commence the updating process.

   

4. Once the updating process is complete, restart your computer and see if the issue has been resolved.

If your Firefox browser was already updated to the latest version or this method didn’t fix your broken favicons, move down to the next method below.

Method 2: Adding a ‘/’ behind the link

This might seem like a silly fix, but a lot of affected users have reported that simply adding an at the end of the URL before visiting it ended up resolving the issue for them. Hoverer, some users reported that this fix was only temporary as the issue returned several days later.

Let’s say that the favicon belonging to www.google.com/ is messed up. To fix it, type www.google.com// in the navigation bar and press Enter to refresh the icon. The icon should be replaced as soon as the website is loaded.

If this issue wasn’t effective or you’re looking for a permanent approach, move down to the next method below.

Method 3: Deleting the favicons.sqlite file

The quickest and most efficient solution that will resolve the issue in most cases is to simply navigate to the AppData folder of Firefox, find your profile folder and delete the file name favicons.sqlite while Firefox is closed.

This process will force Firefox to create a new favicon .sqlite file at the next browser startup. But keep in mind that after this operation is complete, all your bookmarks will have a generic favicon. Only after you visit a bookmark the icon will be updated to the site’s favicon.

Here’s a quick guide on fixing the issue by deleting the favicons.sqlite file:

1. Make sure that Firefox and any associated add-ins are completely closed.
2. Use File Explorer to navigate to the following location:

   C:\Users\*YourUser*\AppData\Local\Mozilla\Firefox\Profiles\*YourProfile*

   Note: Keep in mind that *YourUsers* and *YourProfile* are merely placeholders and should be replaced with your own info. Also, the AppData folder will be hidden by default – if you haven’t made the hidden folders visible yet – use the ribbon at the top of the File Explorer window to click on View, then ensure that the box associated with Hidden Items is checked.

   

3. Once you arrive inside your FireFox profile, use the search function (top-right corner) to search for favicons.sqlite.
4. When the file is found, right-click on it and choose Delete to get rid of it.

   

5. Once the file has been deleted, open Firefox again to allow the browser to create a new favicon .sqlite from scratch.
6. You should now notice that all your bookmarks have a generic favicon. You can fix this by clicking on each bookmark individually. As soon as the website is visited, you’ll see that the correct favicon will be put in place.

If you’re still encountering the same exact issue, move down to the next method below.

Method 4: Clearing web cache

Another way to go around resolving this issue is to clear the web cache of Firefox. Similarly to the first method, this will force it to download the favicons all over again. Several affected users have reported that this method finally enabled them to resolve the issue for good.

Here’s a quick guide on how to clear Firefox’s web cache in order to fix the favicon issue:

1. Close all other Firefox tabs except for a new tab.
2. Click the action button in the top-right corner of the screen, then select Options from the newly appeared menu.
3. inside the settings menu, select Privacy & Security from the left-hand table. Then, scroll down to the Cookies and Site Data menu and click on Clear Data.
4. Inside the Clear data menu, uncheck the box associated with Cookies and Site Data and check the one next to Cached Web Content.
5. Hit Clear to begin the process of cleaning your web content data.
6. Restart your browser and see if the issue has been resolved.

If you’re still encountering this issue or you’re looking for a way to modify your favicons manually, move down to the next method below.

Method 5: Forcing Firefox to update the favicons

If your issue is slightly different – Firefox fails to update older website logos with new versions – you can actually force the browser to think that all your favicons have expired and update them automatically. Several affected users have reported that this method finally allowed them to fix the favicon issue on Mozilla Firefox.

Here’s what you need to do:

1. Open Firefox, type “about:config” in the navigation bar and press Enter to open up the experimental settings of Firefox.
2. When you’re prompted by the warning prompt, click on I accept the risk!.
3. Use the search function to search for “devtools.chrome.enabled”. 
4. Once the preference is found, double-click on devtools.chrome.enabled to change it’s value to true.
5. Exit the Advanced Settings of Firefox and click the action button in the top-right section of the screen. Then, access the Web Developer menu, then click on Browser Console.
6. Inside the newly appeared browser console, paste the following code and hit Enter to register it:

   var fS = Components.classes["@mozilla.org/browser/favicon-service;1"] .getService(Components.interfaces.nsIFaviconService); fS.expireAllFavicons();

   Note: You’ll get an error, but it’s normal, so don’t be alarmed. The steps we just did will force all favicons to expire.

7. Visit the bookmarks that were previously failing to update with the newer version. The issue should now be fixed and you should be seeing the new icons as soon as the page loads.

If this method wasn’t successful or you’re looking for a manual way of fixing your Firefox favicon not displaying correctly, move down to the next method below.

Method 6: Fixing the affected favicons manually

This is definitely not the best solution for those that are not tech savvy, but there is a manual way that will allow you to fix your broken favicons. Several affected users have managed to resolve the issue by exporting the entire bookmark list in an HTML file and modifying the icon before importing the bookmark list right back.

This method is perfect to use in those instances where you’re only dealing with one or a couple of broken favicons. Here’s a quick guide on fixing the affected favicons manually:

1. Open Firefox and click the Bookmark icon from the top-right corner of the screen.
2. From the newly appeared menu, click on Bookmarks and then click on Show All bookmarks in the bottom-right section of the screen.
3. Inside the Library menu, select Bookmarks Toolbar from the left, then go to Import and Backup and choose Export Bookmarks to HTML.
4. Choose a suitable location for the exported HTML file, then click the Save button.
5. Right-click on the HTML file that you’ve just exported and edit it with a utility like Notepad++ or similar. You can also use the built-in notepad utility, but the code will not be that readable.
6. Once the Bookmarks page is opened, find the corresponding bookmark entry and change the associated ICON_URI=”{URL} and ICON=”data:image/png;base64,{data} with the correct URL of the icon and the based 64 encoded icon. You will be able to deduct which ICON is belonging to which favicon by looking at the name.
7. Make sure that you save the modifications you just did on the Bookmarks page you previously exported.
8. Return to the Library window (Step 2), click on Bookmarks Toolbar, then go to Import and Backup and choose Import Bookmarks from HTML
9. Select the page that you previously modified and click Open.

After completing this process, your favicon icons should be fixed.