Firebug icons


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).
new firebug statusbar icon, disabled

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!)
safari\'s report bug button

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.

my firebug icon (disabled) and my firebug icon (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 :)

Information and Links

Join the fray by commenting, tracking what others have to say, or linking to it from your blog.


Other Posts
JSFL feature request
Flash CS3 and the case of the missing upper-left coordinates

Write a Comment

Take a moment to comment and tell us what you think. Some basic HTML is allowed for formatting.

Reader Comments

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.

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)

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

[...] - 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 [...]

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

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