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+

Content

1. Plugin interface
2. Animating with jQuery.favicon.animate()
3. Download
4. Examples
   1. Example 1: Change favicon
   2. Example 2: Draw something on favicon before apply
   3. Example 3: Draw something on favicon and provide custom alternative URL if drawing is not supported
   4. Example 4: Simple blink effect with jQuery.favicon.animate()

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
 *   onDraw: function (context) {}, // 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

Download

This plugins is dual licensed under the MIT and GPL licenses.

jQuery.favicon plugin was moved to GitHub repository https://github.com/viatsyshyn/jQuery.favicon.

Usage examples

Example 1: Change favicon

jQuery.favicon('mail_icon_32_active.png');

run

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);
});

run

Example 3: Draw something on favicon and provide custom alternative URL if drawing is not supported

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);
});

run

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

(function() {
  var bool = false;
  window.blink = function (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) {
        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');
      }
    });
 }
})();

run/stop