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