Firefox CSS hack: change navigation 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:

1	#home-button {

2	list-style-image: url("file:///path_to_our_icon/hackaday-icon.png");

3

}

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:

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

2

3	#home-button {

4	list-style-image: url("file:///path_to_our_icon/hackaday-icon.png") !important;

5

}

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.