Favicons for Firefox 3 in Mac OS X

I’ve made the big switch to Apple Macs. For me, Mac OS X leaves Windows dead in the water, but there are a few annoyances. Here’s how to fix one of them.

Firefox favicons

The browser bookmarks toolbar is very useful to me, but on the Mac it doesn’t show favicons by default in Firefox or Safari. One picture is worth a thousand words, so it’s not easy to distinguish quickly between bookmarks without them. To get them to display in Firefox as shown above is easy, I found out how here. You need to paste the following code into the userChrome.css file.

/* This allows bookmark favicons on the bookmark toolbar */

.bookmark-item > .toolbarbutton-icon {
display: -moz-box ! important;
background-position: 0px 1px !important;
padding-right: 1px ! important;

/* Disable this rule to see folder icons for containers */
.bookmark-item[container] > .toolbarbutton-icon {
display: none ! important

.bookmark-item:hover > .toolbarbutton-icon {
background: url("chrome://global/skin/toolbar/toolbarbutton-customhover-mid.png") repeat-x;

.bookmark-item[container]:hover:active > .toolbarbutton-icon,
.bookmark-item[container][open="true"] > .toolbarbutton-icon {
background: url("chrome://browser/skin/bookmark-open-mid.png") repeat-x !important;

Userchrome.css is here:
/Users/<your_user_acct>/Library/Application Support/Firefox/Profiles/<random>.default/chrome/

If you don’t find userchrome.css just use userchrome-example.css and after you’ve made the change save it (to the same directory) as userchrome.css.


Note that the code must be inserted after this line:

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

That’s it. Easy.

By default the favicon and the URL text description will be displayed. If you just want the favicon, right or Cmd-click on the favicon and edit the properties by deleting the name: entry.