bunnyhero dev

Since I recently upgraded Firefox to version 3, I updated my Firebug install to version 1.2 Beta. One of the first things I noticed was that the little icon in the status bar had changed from a checkmark (or a grey slash when disabled) to the little insect icon (it’s grey when disabled, and colour when enabled).

I don’t mind seeing the Firebug icon occasionally (like when the Firebug panel is open), but I find it a bit distracting and, yes, disturbing to have that little bug always onscreen. Oddly, I never found Safari’s “report bug” button distracting in the same way—perhaps it’s because the Safari bug icon is more abstract than the more finely detailed Firebug icon. (Although I admit that looking at these two screenshots side by side, there doesn’t seem to be much of an obvious difference!)

In any case, I decided to create my own status bar icon for the new Firebug. As you can see, my icons are very abstract, to get away from the creepy-crawliness of it all. The six legs are represented by six stubby horizontal lines, and the body has become a sphere.

(disabled) and (enabled)

If you want to install these alternate icons yourself, here is what you’ll need to do:

1. Download the Firebug 1.2 Beta XPI file from https://addons.mozilla.org/en-US/firefox/addon/1843 (right-click [or CTRL-click on a Mac] on the “Install Now” button and choose “Save Link As…”)
2. Change the file’s .XPI extension to .ZIP
3. Extract the contents of the ZIP file into a new folder
4. Download the two icon files: firebug16.png and firebug-gray-16.png
5. Copy the two PNG files into the folder skin/classic. When prompted if you want to replace the existing files, say “Yes”
6. Zip the folder into a new archive (for example, you might call it firebug-1.2.0b3-myicons-fx.zip). Make sure that the directory hierarchy of the archive is the same as the original (i.e. the top level includes the files chrome.manifest, intall.rdf, etc)
7. Change the ZIP file’s extension to .XPI
8. In Firefox, open the Add-Ons window
9. Drag your customized XPI file from your Explorer/Finder window into the Add-Ons window
10. Click “Install” in the dialog box
11. Restart Firefox!

If all goes well, you will no longer have a creepy-crawly bug in your status bar :)

Tagged firebug, firefox

§ 6 Responses to Firebug icons"

• Brian says:

  2008 June 25 at 12:32 am

  Dude, I really like those alternative icons. I probably wouldn’t have thought too much of the new icon if you hadn’t pointed it out, but I definitely agree now that you have.

• uberfuzzy says:

  2008 June 30 at 10:22 pm

  wanna save some work? unless you need that xpi for reinstall later (which will be a pain if/when they update firebug, you’ll have to re-icon it again), you can just drop your nice little icons inside the same skin/classic folder inside the extensions install folder under your firefox profile (google how to find yours)

• bunnyhero says:

  2008 June 30 at 10:57 pm

  Oh, cool! Thanks for the tip, uberfuzzy! I didn’t know you could do that :D

• Bookmarks about Firebug says:

  2008 August 19 at 11:45 am

  […] – bookmarked by 2 members originally found by RFSharpe on 2008-08-06 Firebug icons http://www.bunnyhero.org/2008/06/24/firebug-icons/ – bookmarked by 3 members originally found by […]

• Michael Aulia says:

  2008 September 4 at 9:59 am

  It’s actually kinda cool, although I hate cockroaches :D

  Thank goodness that icon doesn’t crawl on your screen lol

• Chun says:

  2009 September 7 at 12:05 pm

  Thank you very much for this fixer. I am extremely snippy about my desktop being clean, and having an insect like it’s been dead in the corner during all browsing was uncomfortable.