jQuery Favicon plugin

Favicon is jQuery plugin that helps you manipulate browser's favicon. It allows you to change favicon dynamicly. If browser supports HTML5 Canvas element you can draw on icon before using it. Also you can provide alternative icon if broswer do not support canvas.

Browser support: Firefox 3.5, Opera 9, Chrome 4.
Note: IE and Safari do not support dynamic favicon change.

Note: Canvas is supported by Firefox 4.0b1+, Opera 10+, Chrome 6+, Safari 5+, IE9+

Plugin interface

/**
 * Interface of onDrawCallback
 * @param {Context} context		HTML5 Canvas 2d Context
 */
var DrawCallback = function (context) {};
/**

jQuery.favicon interface
@param {String} iconURL
@param {String} alternativeURL			(optional) URL to use instead of iconURL if browser do NOT support HTML5 Canvas elem
@param {DrawCallback} onDrawCallback		(optional) Callback that draws something on icon before apply

function (iconURL)
function (iconURL, onDraw)
function (iconURL, alternateURL, onDraw)
*/
jQuery.favicon = function (iconURL, alternativeURL, onDrawCallback) {};

/**

jQuery.favicon.animate - starts frames based animation

@param {String}      animationURL    Should be image that contains frames joined horizontally
@param {String}      alternateURL    Normal one frame image that will be used if Canvas is not supported
@param {Object}      options         optional

function (animationURL, alternateURL)
function (animationURL, alternateURL, {
interval: 1000, // change frame in X ms, default is 1000ms
onStart: function () {}, // is called after image is ready
onDraw: function (context, frame) {}, // is called each frame
onStop: function () {}, // is called on animation stop
frames: [1,3,5] // display frames in this exact order, defaults is all frames
})
*/
jQuery.favicon.animate = function (animationURL, alternateURL, options) {};

/**

jQuery.favicon.unanimate - stops current animation
*/
jQuery.favicon.unanimate = function () {};

Animating with jQuery.favicon.animate()

jQuery.favicon.animate is simple frames based animation implementation. This aproach requires image with all animation frames joined horizontally, like on image bellow

Sample 2 frames animation image used in example 4

Usage examples

Example 1: Change favicon

jQuery.favicon('mail_icon_32_active.png');"

Example 2: Draw something on favicon before apply

jQuery.favicon('mail_icon_32_new_message_active_g.png', function (ctx) {
  ctx.font = 'bold 15px "helvetica", sans-serif';
  ctx.fillStyle = '#FF0000';
  ctx.fillText('XX', 10, 27);
});

Example 3: Draw something on favicon and provide custom alternative URL

jQuery.favicon('mail_icon_32_new_message_active_w.png', 'mail_icon_32_active.png', function (ctx) {
  ctx.font = 'bold 15px "helvetica", sans-serif';
  ctx.fillStyle = '#FF00FF';
  ctx.fillText('10', 10, 27);
});

Example 4: Simple blink effect jQuery.favicon.animate()

  var bool = false;
  function blink(button) {
    if (bool) {
       bool = false;
       jQuery.favicon.unanimate();
       return ;
    }
jQuery.favicon.animate('mail_icon_32_new_message_animation.png', 'mail_icon_32_new_message.png', {
  frames: [1, 0],
  interval: 500,
  onDraw: function (ctx, frame) {
    ctx.font = 'bold 15px "helvetica", sans-serif';
    ctx.fillStyle = '#333333';
    ctx.fillText(count, 10, 27);
    if (Math.random() > .95)
      count++;
  },
  onStop: function () {
    jQuery.favicon('mail_icon_32.png');
  }
});

}