Badges On Favicon

Add useful information to the site tab favicon

This page is no longer updated. 

Please visit for news on this extension.

What's "Badges On Favicon"?

Is an extension for Firefox 3 (Windows and Linux, Mac coming soon) that allows you to put a rounded badge over the tab favicon of some pages.

This badges will show numeric snippets of information from the page, for example your unread mails from Gmail or the stock quotes from Yahoo Finance. 

This way you can always see that data, even if you're navigating on another tab.

You can download version 0.5 from here or from AMO (still in sandbox)

How does it work?

The extension uses little scripts, called badgets. The badgets define both the appearance of the badge (color, position, size of the text, etc.) and how to get the data from the current page.

What sites are supported?

All. Somehow. "Badges On Favicon" comes with three sample badgets that work with Gmail, iGoogle Reader Gadget and Zenbe. But you can install your own badgets and even create your own for your preferred site.

Extra badgets

  • yahoo-finance-quotes.js Returns the stocks from Yahoo Finance. The badge turns red or green depending on the movements. Works for you'll need to edit the file to support other sites.
  • mobile-me-mail.js Returns the number of unread messages from Apple's Mobile Me Mail.
  • netvibes-unread-count.js Returns the number of unread items from Netvibes.
  • twitter-search-new-itemsn-count.js Returns the number of new results since the start of the Twitter search.
  • gmail-unread-count-2.js Fixes the default "Gmail Mail Count" badget to work with "Inbox count first" option from Better Gmail extension. Be sure to remove the old version before installing this one. (Thanks to Saad for helping).

How to install new Badgets?

  1. Download or create a new badget
  2. Go to Tools > Add-Ons and click on the Options for "Badges On Favicon".  
  3. Click on the "Install new Badget" button
  4. Select the badget file you just downloaded or created
  5. Click "Open" 

You'll need to refresh the page to see the badge.

How to create a Badget?

More samples and tutorial will be added soon. 

For now you can play with the samples that come with the extension or the ones above. Just select one badget on the options menu and click edit (you'll need to pick your preferred text editor the first time you edit).

Something more?

"Badges on Favicon" works great by using FaviconizeTab, that allows you to reduce the tabs to the size of its favicon. That way you can have your pages with badges opened without taking too much space on the tab bar.

Known bugs (to be solved)

  • It can be only one badge per site at the same time.
  • The number in the badge is limited is transformed into an integer.
  • You'll need to restart the browser when modifying the metadata from the badget in order to changes take effect.