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.Mozilla Firefox

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: –


  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(“”);


    /* Custom favicon for this bookmark */

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



    padding: 0 0 16px 16px !important;



  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 !important;    width: 22px !important;}.bookmark-item[label=”BOOKMARK_NAME_HERE”] > .toolbarbutton-text {    display: none !important;}.bookmark-item[label=”BOOKMARK_NAME_HERE”] image {    margin-left: 4px !important;}

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.