How to Change Firefox Bookmark Favicons Without Add-on

Mozilla Firefox

You will surely need an alternative method to personalize favicons or bookmark icons in Firefox because Bookmark Favicon Changer add-on is not available now for this very browser.

Just follow the steps and you will see fascinating results.

  1. First of all, you will have to open behind-the-scenes Profile folder of Firefox on computer. If you are using Windows 7/8, you can find this folder by following way: –

    C:/Users/Your_Username/AppData/Roaming/Mozilla/Firefox/Profiles/Your_Profile_Folder

  2. Simply make new directory ‘chrome’ in that folder, if you do not find it in this folder.
  3. After this, create a new file ‘userChrome.css’ inside this very ‘chrome’ folder.
  4. Now open the file userChrome.css and paste the following CSS code –

    /* First line of userChrome.css must be this: */

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

     

    /* Custom favicon for this bookmark */

    .bookmark-item[label=”BOOKMARK_NAME_HERE”] image {

    width:0;

    height:0;

    padding: 0 0 16px 16px ;

    background:url(BASE_64_STRING_HERE);

    }

  5. You will have to edit few things in the above code: –
    1. ‘BOOKMARK_NAME_HERE’ should be replaced with your bookmark’s title such as Reddit, which appears on the bookmark bar. Also, you should apply a label.
    2. ‘BASE_64_STRING_HERE’ should be also replaced with a base64-encoded string of target favicon. For this, you simply upload the icon on a website and get it.
    • It should be noted here that you will have to provide a label as mentioned in the previous step however; if you do not want any label, simply add the following code: –

/* Hide the text of this bookmark */.bookmark-item[label=”BOOKMARK_NAME_HERE”] {    margin-right: 0px ;    width: 22px ;}.bookmark-item[label=”BOOKMARK_NAME_HERE”] > .toolbarbutton-text {    display: none ;}.bookmark-item[label=”BOOKMARK_NAME_HERE”] image {    margin-left: 4px ;}

Here, ‘BOOKMARK_NAME_HERE’ must be replaced by your invisible bookmark label.

    • At the last, you will just have to save the file and you are finally done with this process.

Restart your Firefox browser to see the desired and customized favicon.

This post was last modified on December 13, 2020 3:08 AM

Preethi Khetani: Preethi Khetani is a well known women Blogger from India. Apart from her contribution here, she writes for NowIamupdated.com and Advices Academy as well.