Changing favicon dynamically (FF/Opera Only?).

FAQ below. To see the favicon change in a background tab, try the animation demo.

1. Type a letter. Hold shift key to change title as well (Firefox).
2. Look up. Favicon has changed.

FAQ

What's Favicon?

Favicon is the little icon that appears in the browser to represent a website, as long as the website owner has taken the time to create one. You'll see favicons in the address bar, browser tabs, bookmarks/favorites menu, windows task bar.

What's favicon.js?

favicon.js is a little Javascript library to manipulate favicon dynamically. The call is trivial - just pass the icon URL into favicon.change(), e.g. "favicon.change("/icons/active.ico")". It's also "overloaded", so you can pass a second argument representing a new document title. It works by dynamically manipulating the DOM with a similar technique to On-Demand Javascript - changing link elements within the document head.

How Portable?

Unfortunately, the Favicon feature varies across browsers and it seems that dynamic changes are simply impossible for IE and Safari and maybe others. The library does what it can do for maximum portability by using rel="shortcut icon" (and not just rel="icon"), but there's not much you can do if the browser ignores link tags and only looks for a file called "favicon.ico" at startup, or if the browser ignores updates to the link tag. For now, it seems to work on Firefox and Opera only. Any help here would be appreciated (michael@mahemoff.com).

Performance Issues?

You have the usual performance issues with loading images. The first time you load a new icon, you'll see a delay. A good practice for a real-world system would be to Predictively Fetch any images you need.

No digg. Why on earth would anyone want to change favicon dynamically?

Ajax Chat (like Meebo, Campfire, Gmail's Google Talk, etc.) as well as live wikis/editors (like Jotspot, Writely) is what inspired this. Changing the favico is a nice way for a background tab to unobtrusively signal something's happening. For example, your buddy is trying to contact you.

Other than chat? Sure, plenty of other usages. Change when a transaction has completed. Change to show percent complete. Change when some news has appeared (Comet goodness). When an email has arrived. I'm sure people can think of other applications ...

How about changing the document title instead?

You can also make a similar announement by manipulating document.title, and that's supported as an optional argument. However, that's often not visible, or only partially visible, when there are lots of tabs. Furthermore, it lacks all the things we like about icons - they are recognised immediately, better for international audiences, pretty, brandworthy, etc. Also, there are portability issues with document.title - seems to only work with Firefox and Safari.

But how would I know when the tab's no longer in the background? For instance, if a special favicon is showing a message has arrived, how would I know when to return to the default icon?

In an ideal world, browsers would notify you when the tab's bee foregrounded and backgrounded. But they don't, so you have to use some good-enough workarounds. Two I can think of: Catch document.onmouseover() - this will activate when the mouse goes anywhere inside the document. This might be a performance hog, so de-register it as soon as it's called. Another possibility is to use a time delay - e.g. show a quick animated image and then return back to normal. Sometimes, you can wait for a particular user action. For instance, the favicon suggests there's a new task to perform. So you only switch it off when all tasks have been performed. Or you could just arrange for the favicon to always show the number of remaining tasks. Neither are ideal, to be sure.

I'm thinking "animated favicons"

Yes. Though it wasn't really the main point, the library now supports animation by way of the favicon.animate() library function (demo). It cycles through a list of images indefinitely, and also prefetches all the images as soon as it's called. Firefox handles animated gif icons anyway, so you might reasonably ask, "Why bother?". Well, in many cases, you're probably better off using neither. But when you do have a reason to do it, here's a comparison to help you decide which to use. First, benefits of animated GIFs over the present favicon.animate() approach:

You don't have to import favicon.js and your browser script won't use resources to run the animation (though the browser itself will).
The initial appearance might be smoother - with Favicon.js, each image must be downloaded, so there's a possibility of a delay the first time it's shown. However, note that favicon.animate() prefetches all images in the sequence, so this is probably a minor concern.
If there are many quick frames, it's probably going to be smoother.
You can be certain the image is only downloaded once. With favicon.animate(), there's a risk caching won't happen, leading to many, many, downloads.

Then there are also benefits of favicon.animate() over animated GIF:

You have control over sequencing and timing - your script can dynamically define how the animation plays out, as opposed to "here's an animated GIF we made earlier".
For casual use, it's nice that you don't have to produce an animated GIF; just point to a few icon URLs, and tweak the timing by changing a single parameter.
While both work with Firefox and neither with Safari or IE, favicon.animate() also works with Opera (and maybe others?)

Cool, how else can I waste time playing with Ajax features no-one in their right mind would ever need?

Oh, let's see now ...

Icon Credits: Ed Babinski