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.
Shouldn’t this be done as a theme, or is this theme-independent?
Alternatively, just use userChrome.css, like you’re supposed to.
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;
}
Thanks for the tip Colby. You’re right and I’ve added an update to reflect it.
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.
id assume so, would it work just to find out the variable name of the home page and just add .favicon afterwards?
It’s okay to abstain from posting if there’s nothing to post.
What is the theme?
crap-a-day
thank you very much for sharings…i really enjoy all of these posts…
thank!
would this work with .ico icon files instead of .png images??
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
nice hack =)