Fork me on GitHub
Progress bars out of your tab favicons.
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.
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.
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.
RUN
Multiple shapes available
shape can be either a 'circle', a 'doughnut' or a 'square'.
Try changing the shape to a square.
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.
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.
RUN
Callbacks
Set a callback to control the animation workflow.
Try going from 0 to 50 and back.
RUN
Reset
Call reset() to restore the original icon.
Try going from 0 to 100 then reseting page icon.
RUN
Status Icons
Call complete([fgCol], [bgCol]) for success.
Call fail([fgCol], [bgCol]) for failure.
Try displaying a failure status.
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


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.