Try it: +1 -1 Set icon Play video Start webcam Reset

Badges

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

Slide animation +1 -1 Reset var favicon=new Favico({ animation:'slide' }); favicon.badge(1); Fade animation +1 -1 Reset var favicon=new Favico({ animation:'fade' }); favicon.badge(2); Pop animation +1 -1 Reset var favicon=new Favico({ animation:'pop' }); favicon.badge(3); Pop & fade animation +1 -1 Reset var favicon=new Favico({ animation:'popFade' }); favicon.badge(1); Without animation +1 -1 Reset var favicon=new Favico({ animation:'none' }); favicon.badge(2); Position +1 -1 Reset var favicon=new Favico({ position : 'up' }); favicon.badge(3); Shape setting +1 -1 Reset 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 +1 -1 Reset 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 Set icon var favicon=new Favico(); var image=document.getElementById('imageId'); favicon.image(image); HTML5 Video to icon Video tag not supported. Download the video here. Play video in 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 Start webcam 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

More options (Badge position, animations,...)

License

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