favico.js

Try it:

Animate your favicon with animated badges. You can customize type of animation, background color and text color.

var favicon=new Favico({
    animation:'slide'
});
favicon.badge(1);

var favicon=new Favico({
    animation:'fade'
});
favicon.badge(2);

var favicon=new Favico({
    animation:'pop'
});
favicon.badge(3);

var favicon=new Favico({
    bgColor : '#5CB85C',
    textColor : '#ff0',
});
favicon.badge(4);

var favicon=new Favico({
    type : 'rectangle',
    animation: 'slide',
});
favicon.badge(5);

var favicon=new Favico({
    type : 'rectangle',
    elementId : 'badgeImage'
});
favicon.badge(6);

Create icon on the go from images, videos or event a webcam stream

var favicon=new Favico();
var image=document.getElementById('imageId');
favicon.image(image);

var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');

This is only for fun but it works :)

var favicon=new Favico();
favicon.webcam();
//stop
favicon.webcam('stop');

All code is open source and dual licensed under GPL and MIT. Check the individual licenses for more information.