Changing favicon dynamically (FF/Opera Only?).FAQ below. To see the favicon change in a background tab, try the animation demo.
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.
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 (firstname.lastname@example.org).
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 ...
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.
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.
Then there are also benefits of favicon.animate() over animated GIF:
Oh, let's see now ...
Icon Credits: Ed Babinski