Warning: if you are on mobile / tablet, you won't see anything as the browser tabs don't display icons next to the titles

Examples and Usage.

Use the editors on the right to play around with the library. View the results in the current browser tab.

Setting a simple value

Values should be anywhere between 0 and 100.
Try changing the value to 60 and click RUN.

FavIconX.setValue(40);

RUN

Using custom styles

You can change the borderColor, the borderWidth, the fillColor or the shadowColor.
Try making a green circle. Color names are accepted.

FavIconX.config({
  borderColor: '#333',
  borderWidth: 2,
  shadowColor: '#CCCCCC',
  fillColor: '#B00E0E'
});

RUN

Control the title

Prevent any changes by setting updateTitle to false, or customize what is displayed using titleRenderer.
Try to set a value without changing the title.

FavIconX.config({
  updateTitle: true,
  titleRenderer: function(v, t){
    return '(' + v + '%) ' + t;
  }
}).setValue(20);

RUN

Multiple shapes available

shape can be either a 'circle', a 'doughnut' or a 'square'.
Try changing the shape to a square.

FavIconX.config({
  shape: 'doughnut'
}).setValue(65);

RUN

Animate changes

Turn animated on by setting it to true. Control how fast it should go from its original value to another value using animationSpeed (in ms).
Try making the animation go a bit faster.

FavIconX.config({
  animated: true,
  animationSpeed: 3000
}).setValue(80);

RUN

Gradients

Set borderColor2 and fillColor2 to have the icon change colors relative to the current value.
Try making it evolve from red to green.

FavIconX.config({
  animated: true,
  fillColor2: '#1EFF00'
}).setValue(10);

RUN

Callbacks

Set a callback to control the animation workflow.
Try going from 0 to 50 and back.

FavIconX.config({
  animated: true,
  callback: function(){
    alert('Bonjour!');
  }
}).setValue(80);

RUN

Reset

Call reset() to restore the original icon.
Try going from 0 to 100 then reseting page icon.

FavIconX.reset();

RUN

Status Icons

Call complete([fgCol], [bgCol]) for success.
Call fail([fgCol], [bgCol]) for failure.
Try displaying a failure status.

FavIconX.config({
  animated: true,
  callback: function(){
    FavIconX.complete();
  }
}).setValue(100);

RUN

FavIconX is written in vanilla javascript (7kb) and does not require any external library to work.

Installation

Using Bower

bower install faviconx

Manual Install

Download the latest version here
Place the file faviconx-min.js in your assets folder.
Add <script type="text/javascript" src="lib/faviconx-min.js"></script> to your page.

Documentation

Browser support: Chrome 16+, Firefox 8+, Opera 11+. (Others only update their titles)

Licence: MIT Licence. Use at will.

As soon as the script is loaded in the page, the object FavIconX will exist and be directly available. No need to instantiate anything. You can then alter the favicon by using one of the methods below. Each method is chainable:

FavIconX.config(object)

Configures the FavIconX widget through one or multiple properties. Refreshes the icon as well:

shape

any of the following: 'circle' (default), 'doughnut', or 'square'

animated

set to true or false (default) to enable / disable animations

animationSpeed

any number in ms (default 2000) that will be taken by the widget to go from value 1 to value 2

borderColor

any html color (default '#3A70B1') to define the shape border color

borderColor2

any html color (default null) to define the shape border color at max value

fillColor

any html color (default '#3A70B1') to define the shape fill color

fillColor2

any html color (default null) to define the shape fill color at max value

borderWidth

any number between 0 and 8 (default 1) to define the shape border width

shadowColor

any html color (default 'rgba(255, 0, 0, 0)') to define the shape shadow color

updateTitle

set to true (default) or false to enable / disable title modifications

titleRenderer

a function used to configure how the tab title is rendered.
the function has 2 optional arguments, the current value and the title.
defaults to function(v, t){ return '[' + v + '%] - ' + t; };

callback

a function called at the end of the animation. defaults to null

FavIconX.setValue(value, [animated], [animationSpeed], [callback])

Sets the value of the favicon. If animated, the value will progressively get to it with time.

value

any number between 0 and 100.

animated

(optional) : will override the associated config property for this call.

animationSpeed

(optional) : will override the associated config property for this call.

callback

(optional) : will override the associated config property for this call.

FavIconX.getValue()

Returns the current value as displayed in the tab.
If the icon is currently being animated, it returns the intermediate value, not the destination value.

FavIconX.reset()

Resets the configuration to its default properties and recovers the initial favicon.

FavIconX.complete([foreColor], [backColor])

Sets the favicon to a success check icon.

foreColor

(optional) : the shape color (defaults to '#FFFFFF').

backColor

(optional) : the circle color (defaults to '#53C516').

FavIconX.fail([foreColor], [backColor])

Sets the favicon to a failure cross icon.

foreColor

(optional) : the shape color (defaults to '#FFFFFF').

backColor

(optional) : the circle color (defaults to '#F6491F').

Contribute

Leave comments on my blog.

Report any bugs on github.