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.

Comments

  1. EdZ says:

    Shouldn’t this be done as a theme, or is this theme-independent?

  2. Colby Russell says:

    Alternatively, just use userChrome.css, like you’re supposed to.

  3. cas says:

    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;
    }

  4. Mike Szczys says:

    Thanks for the tip Colby. You’re right and I’ve added an update to reflect it.

  5. Matt E says:

    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.

  6. Ryan Leach says:

    id assume so, would it work just to find out the variable name of the home page and just add .favicon afterwards?

  7. svofski says:

    It’s okay to abstain from posting if there’s nothing to post.

  8. Theo says:

    What is the theme?

  9. anon says:

    crap-a-day

  10. thank you very much for sharings…i really enjoy all of these posts…

  11. ryan says:

    thank!

  12. iPrath says:

    would this work with .ico icon files instead of .png images??

  13. Akhil says:

    wow its awesome.
    by the way you can even add more add-ons.To know it you should visit http://hackation.blogspot.com/2011/07/customize-your-firefox-with-useful-add.html

  14. maxtor says:

    nice hack =)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 96,699 other followers