Make use of your Easy-Regie Logo & Favicon with badges, images or videos
Try it:
Works on Chrome, Firefox, Opera and IE11+ |
Animate your favicon with animated badges. You can customize type of animation, position, 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({ animation:'popFade' }); favicon.badge(1);
var favicon=new Favico({ animation:'none' }); favicon.badge(2);
var favicon=new Favico({ position : 'up' }); favicon.badge(3);
var favicon=new Favico({ type : 'rectangle', animation: 'slide', }); favicon.badge(1);
var favicon=new Favico({ fontFamily : 'FontAwesome', elementId : 'badgeFont' }); favicon.badge('\f0a2');
var favicon=new Favico({ bgColor : '#5CB85C', textColor : '#ff0', }); favicon.badge(3);
Create icon on the go from images, videos or even 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 :)
Works on Chrome, Firefox and Opera
var favicon=new Favico(); favicon.webcam(); //stop favicon.webcam('stop');
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 install favico.js
Check out also Tinycon, Notify Better or favicon.js.
All code is open source and dual licensed under GPL and MIT. Check the individual licenses for more information.