Dynamic Favicon Library Updated

Ajax, AjaxPatterns, Favicon, HTML, Javascript, Web, Web 2.0

I updated the favicon library a while ago, for a couple of projects I haven’t released for various reasons. Anyway, Phil asked me about it, so I thought it’s a good time to package it up and release it properly. And in the process wrote up Taking Browser Tabs Seriously which has also been on the backburner.

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.

See the original post for more info. The new features are:

  • 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.

Demos:

API (also in the code):

javascript

  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.  
  5.     favicon.animate(["icon1.ico", "icon2.ico", ...]);
  6.     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.  
  11.     favicon.scrollTitle("new title");
  12.     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.  
  17.     favicon.unscroll();
  18.  
  19.     favicon.unanimate();

Maybe in another two years, I’ll update it again. The main enhancement would be to combine it with audio notifications (with or without Flash, depending on the browser). So you could make a single call that (a) changes favicon; (b) scrolls the title; (c) plays a sound. Now that will get their attention!!!