favico.js - 给 Favicon 来点动画和视频支持给 favicon 增加记数动画、动态视频等特效的 js

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

Video tag not supported. Download the video here.

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

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