Favico.js 让你的网站与众不同！

Favico.js 是一个神奇的JS库，他可以在页面的favicon上增加角标，展示图像，甚至播放视频。好吧，在这个前端泛滥的年代，或许这个能给你的网站带来不一样的亮点。

你的favico够屌吗？不够？那就继续往下看！

Favico.js 可以让你在favicon上增加角标，还能动态改变角标的内容，你可以弄个数字或者其他图像，你还可以弄个视频在上。详细方法如下：

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

 

Attach to regular image

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

 

Color settings

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

 

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

Refer：
http://www.bojinxiaozhu.com/2013/1013/69.html
http://lab.ejci.net/favico.js/