Badges

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

Slide animation

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

Fade animation

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

Pop animation

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

Pop & fade animation

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

Without animation

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

Color settings

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

Shape setting

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

Attach to regular image

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

Images / Video / Webcam

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

Regular image to icon

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

HTML5 Video to icon

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

Webcam video to icon

This is only for fun but it works :)
Works on Chrome, Firefox and Opera

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

Bower

bower install favico.js


Check out also Tinycon, Notify Better or favicon.js.


Roadmap

Issues

License

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