How to create missing favicons for your bookmarks in Firefox Quantum for Linux

Prior to the advent of Firefox Quantum, several add-ons were available that enabled you to replace the favicons of bookmarks in Firefox, or to create custom favicons for bookmarks lacking a favicon. One of my favourite such add-ons was Favicon Picker 3. However, Firefox Quantum currently lacks an add-on that would enable you to insert a favicon of your choice for bookmarks without one. This has annoyed me for some time, as my bookmarks menu in Firefox includes several Web sites without favicons. Today I found a 2013 post ‘How to change Firefox bookmark icons (favicons) without extensions or addons!‘ for Windows predating Firefox Quantum. I have applied a similar procedure for Firefox Quantum in Linux in order to add a custom favicon to each bookmark in my bookmarks menu that did not already have a favicon. The procedure I used is given below.

1. Launch Firefox and enter ‘about:support’ (without the quotes) in the address bar.

2. Click on ‘Profile Directory’ > ‘Open Directory’ (which, in my case, is the directory /home/fitzcarraldo/.mozilla/firefox/l7nt0jx2.default).

3. Create the sub-directory ‘chrome‘.

4. Open the new directory’s folder.

5. Create the file ‘userChrome.css‘ in the new directory.

6. Open the file userChrome.css with a text editor and paste the following CSS code into it:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.bookmark-item[label="<bookmark name>"] image {
    width:0!important;
    height:0!important;
    padding: 0 0 16px 16px !important;
    background:url(<base64 string>)!important; 
}

7. Make the following changes to the above code:

7.1 Replace ‘<bookmark name>’ with the name of the bookmark as it appears in the bookmarks menu. You must supply a name, even if you do not want a name to appear.

7.2 Replace ‘<base64 string>’ with the base64-encoded string of the desired favicon, which you can obtain by uploading the 16×16 pixel image file to a website such as https://www.base64-image.de/.

Example

Below are the steps I took to create a favicon for the bookmark for Hotmail I have in Firefox:

1. I used a search engine to find an image of the Microsoft ‘flag’ logo. The image happened to be a 200×200 pixels PNG file. I downloaded it to my home directory and named it ‘Microsoft.png‘.

2. I loaded the image file into the GIMP, scaled it to 16×16 pixels and exported it as Microsoft.png to overwrite the original downloaded file.

3. I viewed the Web page https://www.base64-image.de/ in a Web browser and clicked on the button ‘OR CLICK HERE’ to upload my image file Microsoft.png to that site. Then I clicked on the button ‘</> show code’, selected and copied the text displayed underneath ‘For use as CSS background:’ that looked like this:

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAOVBMVEXxURv7vAmAzCgAre/////xTxf8wB8csfD7wCXyXjDyWyuHzzaJ0Dohs/DyWSj0Zz2Q00b8xDMxt/HxkgKEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4goMEQsUc/RzwQAAAB5JREFUGNNjYIAAViYoYKCPACsUwAWYoYARCgZIAADfYwHMYVta3QAAAABJRU5ErkJggg==')

4. I created the directory ~/.mozilla/firefox/l7nt0jx2.default/chrome and the file userChrome.css containing the following:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.bookmark-item[label="Hotmail"] image {
    width:0!important;
    height:0!important;
    padding: 0 0 16px 16px !important;
    background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAOVBMVEXxURv7vAmAzCgAre/////xTxf8wB8csfD7wCXyXjDyWyuHzzaJ0Dohs/DyWSj0Zz2Q00b8xDMxt/HxkgKEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4goMEQsUc/RzwQAAAB5JREFUGNNjYIAAViYoYKCPACsUwAWYoYARCgZIAADfYwHMYVta3QAAAABJRU5ErkJggg==')!important; 
}

5. I restarted Firefox, and my custom favicon is now visible for the Hotmail entry in the Bookmarks Menu. I then deleted the file ~/Microsoft.png as it is no longer required.

6. I also wanted to create a custom favicon for another bookmark I have, the Web site of a Brazilian newspaper Correio Popular. As I was unable to find an image that would be suitable for a favicon, I created one myself (16×16 pixels) using the GIMP, and exported it as the file ‘~/Correio Popular.png‘.

7. I followed the same procedure to encode the image file as a Base64 image, and I added another entry to the file ~/.mozilla/firefox/l7nt0jx2.default/chrome/userChrome.css, which now contains the following:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.bookmark-item[label="Hotmail"] image {
    width:0!important;
    height:0!important;
    padding: 0 0 16px 16px !important;
    background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAOVBMVEXxURv7vAmAzCgAre/////xTxf8wB8csfD7wCXyXjDyWyuHzzaJ0Dohs/DyWSj0Zz2Q00b8xDMxt/HxkgKEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4goMEQsUc/RzwQAAAB5JREFUGNNjYIAAViYoYKCPACsUwAWYoYARCgZIAADfYwHMYVta3QAAAABJRU5ErkJggg==')!important; 
}

.bookmark-item[label="Correio Popular"] image {
    width:0!important;
    height:0!important;
    padding: 0 0 16px 16px !important;
    background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4goMFzEqk7HMoQAAAQdJREFUKM/NkrGKg0AURd+EwSkMBPwLSxlI5dR+haSxFE0T7KxtghCwtfNH7FLZpkkXgvMDophwtzArYUMWUizsad7j8i7cC48BoE9Y0If8vYFPo+u6MAxXq9VyubxcLoyxsiz3+31VVUqp6/WqlIqiiIgIAADO+el0wje73W5a5oP1el0UBQACUBSF67p4ou97ALfbbTakaer7PoAFER2PR8dxnoMKIX5Er+taSvnoMI4j5/xdy+12ez6fpZRxHD86ZFnmed7vkWYIwDAMRKS1ntUkSQDc7/dXAyciwzC01kEQ2LZtmmbbtk3TENHhcBBC5Hm+2Wwsy5oSsne/BIAx9qqz//d8XzCj1kv+0nVJAAAAAElFTkSuQmCC')!important; 
}

8. For any other bookmarks that do not have a favicon, I will just repeat the procedure to add further entries to the file ~/.mozilla/firefox/l7nt0jx2.default/chrome/userChrome.css. It is not as easy as using an add-on, but, until someone creates one, the process described above at least allows me to fill those annoying favicon gaps in the Firefox bookmark menus on my machines.