Friday, February 1st, 2008

Favicon access via JavaScript

Category: Browsers, JavaScript, Library

Michael Mahemoff has released an update to his JavaScript library that gives you access to play with favicons from script.

The main point of this library is to update the favicon via Javascript, but at a higher level, its main objective is to provide some support for notifying the user of events in another tab. For example, if you start playing music in another tab, you can make a one-liner call to change the favicon to a sound. Or if you really need to alert the user, you can start animating it.

The new features include:

  • Scrolling title. The window/tab title scrolls. (Title blink is coming. No, really!)
  • Stop functions. unanimate() and unscroll() will stop animation and scrolling, respectively. Previously you had to do stop animation indirectly, by calling change().
  • Rails/Scriptaculous style options Changed config to be fn(mainarg, optionalHash). Read the library or demo source to see the details.

Usage code:


  1. favicon.change("/icon/active.ico", "new title"); // Cancels any animation/scrolling
  2. favicon.change("/icon/active.ico"); // leaves title alone. Cancels any animation.
  3. favicon.change(null, "new title"); // leaves icon alone. Cancels any scrolling.
  4. favicon.animate(["icon1.ico", "icon2.ico", ...]);
  5. favicon.animate(["icon1.ico", "icon2.ico", ...], {delay: 500} );
  7. // Tip: Use "" as the last element to make an empty icon between cycles.
  8. // Default delay is 2000ms
  9. // animate() cancels any previous animation
  10. favicon.scrollTitle("new title");
  11. favicon.scrollTitle("new title", { delay: 200, gap: "------"} )
  13. // delay is delay between each scroll unit
  14. // gap is string appended to title (default: "    ")
  15. // scrollTitle() cancels any previous scrolling
  16. favicon.unscroll();
  17. favicon.unanimate();

Check out a couple of demos:

This also caused Michael to talk about taking tabs seriously and how:

The browser is the new operating system, the tab is the new system process, the tab bar is the new taskbar.

He gives us a slew of ways in which he would like to see tabs improved upon: notifications, hunting sound, custom favicons, summary list, smart colour, javascript events, open forms, search, virtual desktop, and auto-remove.

Posted by Dion Almaer at 12:01 am

4 rating from 40 votes


Comments feed TrackBack URI

Nice library! BTW, the link to the animation demo is broken. It should be

The upcoming blinking title is useful. I implemented it for a browser game that needed to notify events to players. However players didn’t notice it much, because sometimes the browser is below other windows (maybe other browser windows!). They kept asking for an audio alarm and we eventually implemented it using Soundmanager 2.

How about adding optional sounds to the favicon.* functions? They could be made to work only if an audio library is loaded, i.e. if (soundManager) { … }

Comment by pmontrasio — February 1, 2008

Scrolling and animating doesn’t work with Opera (or is it the German keyboard?). Otherwise a nice gadget.

Comment by wortwart — February 1, 2008

This is the beginning of the end!

Comment by Tim Cooijmans — February 4, 2008

Leave a comment

You must be logged in to post a comment.