Now that the Bookmark Favicon Changer extension for Firefox no longer works, you need an alternative way to customize the favicons of your bookmark items. And here it is!
1. Open up Firefox’s behind-the-scenes “profile” folder on your computer. On Windows 7/8, this is located at:
C:\Users\Your_Username\AppData\Roaming\Mozilla\Firefox\Profiles\Your_Profile_Folder
2. In that folder, create a new directory called “chrome”, if it doesn’t already exist.
3. Inside the “chrome” folder, create a new file called “userChrome.css”.
4. Open up 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!important; height:0!important; padding: 0 0 16px 16px !important; background:url(BASE_64_STRING_HERE)!important; }
5. In the above code, there’s a few things you have to to edit:
i) Replace “BOOKMARK_NAME_HERE” with the title of your bookmark as it appears on your bookmark bar (e.g. “Reddit”).
You must supply a label, even if you don’t want any label to appear – see below for how to make this happen.
ii) Replace “BASE_64_STRING_HERE” with a base64-encoded string of your desired favicon, which you can obtain by uploading the icon to a website like this one.
6. You must give your bookmark a label in step 5 for this to work – but if you don’t want your icon to have a label (text), just add some more 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; }
Remember to replace “BOOKMARK_NAME_HERE” with your (now invisible) bookmark label!
7. Save the file and restart Firefox.
Done.