Yesterday I stumbled across this post about showing favicons for bookmarks which appear on the bookmarks toolbar of a Mac version of Firefox. This reminded me of a long-standing bugbear I’ve had with the bookmarks toolbar: sometimes I want to create a bookmark without a favicon.

This may seem like a strange thing to want – after all, the presence of a favicon makes it easier to identify specific bookmarks by sight so is, in general, an improvement to the user interface. However there are a couple of possible reasons for wanting the favicons gone:

1. Sometimes they don’t actually help you to recognise the bookmark
2. They take up space in the toolbar that could be better used by an additional bookmark

The first problem is usually a result of bookmarking a site that doesn’t provide its own favicon. Firefox simply uses a generic favicon for these bookmarks, which does nothing to help you uniquely identify the bookmark in amongst a sea of similarly generic icons. You also get the generic icon if your bookmark isn’t to a site, but rather to a bookmarklet.

The second problem is simply one of space. The space on the bookmarks toolbar is limited, and using it to display favicons that aren’t useful is just wasteful.

My particular issue is a combination of both of these problems: I have a few bookmarklets on my toolbar which I’ve taken from the Pornzilla website. The site itself contains no pornography, just a collection of bookmarklets and links to extensions which make it easier to surf the web for porn – however what works well for porn also works well for images and links in general, so I find that some of the bookmarklets there are handy for day-to-day browsing as well. In particular I have the following five bookmarklets on the left of my bookmarks toolbar:

Bookmarklet	Label on the toolbar
Zoom images out	–
Zoom images in	+
Decrement URL	<
Increment URL	>
Make a Numbered List of links	NL

Look at the labels I use. Short and to the point. So short, in fact, that the addition of a favicon causes the bookmark buttons to be twice the size they need to be. Here’s what the left-hand end of my toolbar looks like by default:

For those of you that don’t know, the user interface of Firefox – including the bookmarks toolbar – is specified using a language that is similar to HTML, the language used to write web pages. It’s also possible to style it using CSS, the same language that is used to add styling to HTML. So if you know how to write CSS (which I do), it’s possible to override the default Firefox user interface quite easily. In fact they even provide an official way for you to do this: the userChrome.css file.

I won’t go into a lot of detail about the userChrome.css file, but suffice to say that any CSS in that file can be used to override the default Firefox styling. The file doesn’t exist by default, but there’s an example file provided with Firefox which lives in the correct place on your hard drive: details of finding that file can be found here.

Once you’ve found the right place on your hard drive, and created a userChrome.css file, simply put the following CSS in there to get rid of those pesky favicons:


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

.bookmark-item[label="+"] > .toolbarbutton-icon,
.bookmark-item[label="-"] > .toolbarbutton-icon,
.bookmark-item[label="< "] > .toolbarbutton-icon,
.bookmark-item[label=">"] > .toolbarbutton-icon,
.bookmark-item[label="NL"] > .toolbarbutton-icon
{
display: none !important;
}


The main thing to note is that the label that you provide for a bookmark in Firefox is actually applied to the “label” attribute of the bookmark – which is a fancy HTML way of saying that you can make your CSS match particular bookmarks by using code like that above, where the “label” parts of the first few lines are populated with the actual labels you’re using in your bookmarks.

The result of this jiggery pokery, after restarting Firefox, is a bookmarks toolbar that looks something like this:

Much better 🙂