Fixing syncthing favicons in Firefox

Foreword: This is something between a user story and a howto. Also a bit of a bug report. Choose what you want.

Favicons are a weird thing. Or maybe the web in general. You expect things to be standardized and work the same across systems, but yet every browser seems to handle things differently.

About a year ago or so, my Firefox stopped updating the syncthing favicon icon in my bookmark tab - not a big deal, so I didn’t care. But just recently I was setting up a new Firefox install and the syncthing favicon simply wouldn’t load in my bookmark. This looked annoying, since I had syncthing’s bookmark pinned on top. It looked like this:

(In this screenshot many favicons aren’t showing, because I actually had to reset the entire browser to make it “forget” cached favicons - I took this screenshot after fixing the issue, so this is a recreation)

Note how the pinned bookmark and the address autocompletion both are unable to load the favicon. This is behavior I could only see on Firefox - Chrome seemed to show all favicons correctly.

I digged a bit in the code and quickly realized what the problem was:

Syncthing sets the favicon dynamically via script magic. The favicon entry in the source code thus looks like this:

The {} should be replaced by what the JS function returns. This seems to work on Firefox, but on the initial page load you still see this:

Firefox initially literally loads the URL as-is, without invoking scripts. When the page is loaded the scripts are executed and the favicons show correctly in the tab.

But this doesn’t seem to have an effect on the cached bookmark favicon. This is only fetched from the favicon that the browser got during the initial loading process - which is a 404 in our case. So no (bookmark) favicon in Firefox :frowning:.

This is fixable though. In my case, I was using a (nginx) reverse proxy in front of syncthing’s GUI. Reverse proxys are a powerful thing - you can, for example, use them to fix favicons :slight_smile:. In my nginx config, I inserted the following directive:

location "/assets/img/favicon-{{syncthingStatus()}}.png" {
 try_files $uri /assets/img/favicon-default.png;
}

This matches the request to the invalid 404-favicon-URL and performs an internal redirect to the correct favicon url. This is transparent for the browser, as internal redirects are entirely handled within nginx. Note that nginx will parse the new URL as a new request, so this will not bypass any restrictions or settings from your virtual host, for example authentication.

After applying this all was well again.

2 Likes

Yeah this should probably be a valid image in the served HTML and then replaced on the fly for browsers where that works.

3 Likes

Confirm similar behavior in Pale Moon browser, thanks for the workaround.

1 Like

I have the Firefox v81.0.2 and it works for websites overall. However, it does not work with links that refer to Syncthing GUIs (the lower 3 in the picture).

grafik

In Goggle Browser it runs also for that items

grafik

I have found another client-side temporary fix for this problem, for those who do not want to deal with a reverse proxy. This is meant for Firefox, but there might be similar solutions for other browsers. Here are the steps:

  1. Open your Library menu, where bookmarks are stored. There are various ways of doing this, but the easiest way I know of is to press ‘Control’+‘Shift’+‘O’ on your keyboard.
  2. In the top left of the Library menu, click ‘Import and Backup’–>‘Export Bookmarks to HTML…’ and save the file somewhere you can access it.
  3. (Optional) You may want to save another copy of this file somewhere else as a backup while we edit the first one.
  4. Open the file with an HTML or text editor. Find the entry for Syncthing. The easiest way to do this is to search for localhost:8384.
  5. Add the following behind LAST_MODIFIED="[data]": ICON_URI="http://localhost:8384/assets/img/favicon-default.png". Save the file.
  6. (Optional) You may want to delete all of your bookmarks in Firefox now to avoid duplicate entries. Don’t worry, you’ll get them back in the next step.
  7. Import the file back in by clicking ‘Import and Backup’–>‘Import Bookmarks from HTML…’ and selecting the file. Restart Firefox.
  8. Open the Library menu again. Delete any miscellaneous duplicate bookmarks or folders.

Your Syncthing bookmark should now have the correct favicon! If some or all favicons are missing, try visiting the webpages to cache them again.

Credit to Kevin Arrows at Appuals.com for providing the generic steps: https://appuals.com/fix-firefox-displaying-the-wrong-bookmark-favicons/