Firefox CSS Hack: Change Navigation Icons

firefox_custom_icons

Why settle for the standard home icon on your browser? If your home button brings you to hackaday.com, why not make the icon reflect that destination? This hack is quick and simple. We’ll take you through it using Firefox 3 and the default theme with standard sized icons.

We start by using our favorite graphics program to make an icon that is 24×24 pixels, and then saved is as a PNG file without compression.

To use the new image as a home icon, we edited a Cascading Style Sheet which is stored in the file classic.jar. On Ubuntu 9.04, this was found in /usr/lib/firefox-3.0.13/chrome/ but the file will be located elsewhere on other operating systems. We made a backup of classic.jar and then unzipped the contents (JARs are basically the same as zip files).

In the unzipped archive, we navigated to the folder /skin/classic/browser/ and opened browser.css using a text editor. This is where the magic happens and although we only changed the home button icon, there’s a lot more possibilities you should look into. We changed the #home-button entry so that the image URL pointed to our new file using the file:/// format. Here’s what ours looked like after the change:

#home-button {
 list-style-image: url("file:///path_to_our_icon/hackaday-icon.png");
}

We saved this file, then zipped up the file structure back into a file called classic.jar and copied it to the same location we originally found it. A quick restart of Firefox showed the new icon. Let us know your other Firefox tweaks in the comments!

Update: [Colby] pointed out that this type of CSS change should be made in the “userChrome.css” file. He’s right and here’s how:

Find your user profile directory and go to the “chrome” sub-directory inside of it. Create the file “userChrome.css”;  there may already be an example file that you can just rename.  The important bit of this CSS file is the namespace line that tells Firefox how to use it.  Here is what ours looks like:

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

#home-button {
 list-style-image: url("file:///path_to_our_icon/hackaday-icon.png") !important;
}

In order to get Firefox to listen to our new icon we had to had the “!important” keyword. Now just restart firefox and bask in the glory of your new home icon.

14 thoughts on “Firefox CSS Hack: Change Navigation Icons

  1. Yep use UserChrome.css is the more sensible option so that the changes are saved when upgrading firefox.

    Thought id add the little tip for live bookmarks that don’t change their icon:
    .bookmark-item[container=”true”][label=”Ars”] {
    list-style-image: url(‘file:///C:/ars.ico’) !important;
    -moz-image-region: rect(0px 16px 16px 0px) !important;
    }

  2. I’m no expert, but could this be setup to automatically retrieve an icon? Most of the bookmarks stored in Firefox on my Windows box automatically have an icon assigned that I assume is retrieved from the corresponding website.

Leave a Reply to Matt ECancel reply

Please be kind and respectful to help make the comments section excellent. (Comment Policy)

This site uses Akismet to reduce spam. Learn how your comment data is processed.