Mac Favicon Deprecated -- And RELEASED!

Firefox 3 Upgrade?

Mac Favicon and Mac Favicon XL themes will not be updated for Firefox 3. However, you can restore this feature in Firefox 3 using and the 'Stylish' Fiefox extension. Click your preferred style below, then click 'Load into Stylish' and follow the instructions from;

Original Article:

Iuru pointed me to a plugin on that fixes the issue Mac Favicon was designed to resolve in a far more maintainable and cleaner way than Mac Favicon ever could. Therefore I've decided to deprecate Mac Favicon and Mac Favicon XL themes for Firefox and instead encourage users to install the Stylish addon, then install the Mac bookmark toolbar favicons style from

If you prefer Mac Favicon XL, see the instructions that follow.Mac Favicon XL hides the text labels on bookmarks and allows favicon images up to 32 pixels wide and high. This is useful if you with to further optimize your bookmark toolbar experience by recognition of favicons, and removing the clutter of the text labels. It's also very useful in conjunction with the Favicon Picker 2 addon to select your own custom (large) icons for bookmarks.

Favicon Picker 2 has not yet been ported to Firefox 3, but I've contacted the author, Robert LaFont Jr, to get an indication of update plans. I'll update this thread if/when I receive word back from him.

Demoing Mac Favicon using Stylish

In the meantime, you can install the Mac Favicon XL style in Stylish by going to Stylish's preferences, clicking the "Write" button and copying and pasting the following CSS code into the space provided. I have not yet been able to get a user account on to release it there.

Thanks to;

  • Danil Einspanjer for releasing "Mac bookmark toolbar favicons" style which I used to start this.
  • Iuru for pointing me to it. (No link available.)
  • Robert LaFont Jr for creating favicon picker.
  • most of all Mozilla and the Firefox team for making such an awesome killer product!

And the Stylish code that deprecates Mac Favicon XL theme:

  /* No padding on bookmarks */
  .bookmark-item { padding: 0 1px !important; }
  /* Restore padding on folders */
  .bookmark-item[container] { padding: 0 0 0 7px !important; }
  /* And on bookmarks and folders inside folders */
  .bookmark-item[container] .bookmark-item { padding: 0 !important; }

  /* Hide the left semicircle on bookmarks */
  .bookmark-item:hover { background-image: none !important; }
  /* Restore the left semicircle on folders */
  .bookmark-item[container]:hover {
    background-image: url("chrome://global/skin/toolbar/toolbarbutton-customhover-left.png") !important;
  .bookmark-item[container]:hover:active, .bookmark-item[container][open="true"] {
    background-image: url("chrome://browser/skin/bookmark-open-left.png") !important;

  /* Show favicons on bookmarks */
  .bookmark-item > .toolbarbutton-icon {
    display: -moz-box !important;
    max-width: 38px;
    max-height: 36px;
  /* Hide favicons on folders */
  .bookmark-item[container] > .toolbarbutton-icon { display: none !important; }

  /* Show a minimalistic background on hover on bookmars */
  .bookmark-item:hover > .toolbarbutton-icon {
    background: url("chrome://global/skin/toolbar/toolbarbutton-customhover-mid.png");
  .bookmark-item:hover:active > .toolbarbutton-icon {
    background: url("chrome://browser/skin/bookmark-open-mid.png");

  /* Hide text labels on bookmarks */
  .bookmark-item > .toolbarbutton-text-stack { display: none; }
  /* Show text labels on folders */
  .bookmark-item[container] > .toolbarbutton-text-stack { display: -moz-stack; }