Badges

Animate your favicon with animated badges. You can customize type of animation, position, 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);

Position

var favicon=new Favico({
    position : 'up'
});
favicon.badge(3);

Shape setting

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

Custom font support

var favicon=new Favico({
    fontFamily : 'FontAwesome',
    elementId : 'badgeFont'
});
favicon.badge('\f0a2');

Color settings

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

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');

Badge options

Attribute Default
bgColor #d00 Badge background color
textColor #fff Badge text color
fontFamily sans-serif Text font family (Arial, Verdana, Times New Roman, serif, sans-serif,...)
fontStyle bold Font style (normal, italic, oblique, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900)
type circle Badge shape (circle, rectangle)
position down Badge position (up, down, left, upleft)
animation slide Badge animation type (slide, fade, pop, popFade, none )
elementId false Image element ID if there is need to attach badge to regular image
element false DOM element where to change "href" attribute (useful in case of multiple link icon elements)
dataUrl false Method that will be called for each animation from with data URI parameter

Bower

bower install favico.js


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


Roadmap

License

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