I am a dedicated Firefox user, and I keep my bookmarks toolbar loaded with the sites I visit most often. Most of the time, when you drag a bookmark down to the toolbar, Firefox will automatically create a link with the bookmarked site’s icon, along with a description of the page.

I like to keep a lot of stuff in my tool bar, so I usually delete the description, leaving only the icon. While you can easily change or delete the text associated with your links by right clicking the bookmark and going to its properties page, Firefox doesn’t provide an easy way to change the icon your bookmark uses.

This can be a problem if the site doesn’t have an icon. You’re left with an ugly image of a blank page, like with this PBS Kids link. It’s also a problem if you have multiple links to the same site. All your links to google pages, for example, will use the same ‘G’ logo. This annoys me, as it denies me my god-given right to cram my toolbar full of pretty colorful links. Like any good American, I decided to take the law into my own hands.

There might be an easier or more elegant way to do this, but I was interested in finding out how the bookmarks toolbar worked, so I took a brute force approach. I added a bookmark to my toolbar, and then checked to see which files on my computer had been updated. I’m using a windows machine, so I found the bookmarks stored here:

C:\Documents and Settings\[your user name]\Application Data\Mozilla\Firefox\Profiles\[your profile name].default

Obviously, the values [your user name] and [your profile] will vary from machine to machine and from user to user. The file is called bookmarks.html. At the top of the file, there is a warning advising against what I am about to describe:

<!– This is an automatically generated file.
It will be read and overwritten.
DO NOT EDIT! –>

So if you decide to do this, you are on your own. Make a backup copy of your bookmarks. I will not help you fix your computer.

Each bookmark has an entry marked with a term definition tag (<DT>), followed by the link. The link has several attributes you can modify, but the one we care about is called ‘icon’.

Every icon you have is converted to base64 encoding, and then stored as text data in your bookmarks html file. That means that you can take any image you want, convert it to base64, and paste the results in this icon tag. I used this PBS icon for the missing PBS Kids icon. This is what the syntax looks like:

ICON=”data:image/x-icon;base64,[base64 data goes here]”

The base64 encoded string is going to be really, really long, and will replace the [base64 data goes here] in my example. There may be line breaks in the base64 string. You can strip those out if you like, or leave them in. Firefox will likely ignore them, but I stripped the line breaks anyway.

So here’s how to replace a lame or nonexistent icon in your toolbar.

1. Make a backup copy of your bookmarks.html file
2. Find an icon you like and save it to your computer
3. Encode it to base64 using an online base64 encoder. I used the one at http://www.motobit.com/util/base64-decoder-encoder.asp.
4. Close Firefox
5. Find the <DT> tag for the bookmark you want to edit
6. Find the ICON=”" parameter in the anchor tag (This will begin with <a href=”). If the ICON paramater isn’t present, you will need to add it manually.
7. Set the value for the ICON parameter like this: ICON=”data:image/x-icon;base64,[base64 data goes here]“
8. Replace [base64 data goes here] with the base64 encoded string you got from the encoder
9. Restart Firefox
10. You should see the updated image loaded in the toolbar

When I finished the missing PBS Kids icon was replaced with the icon I created.

Enjoy!