favico.js - 动态改变浏览器标签栏中的网站图标

更多信息请查看 这里.

作者 Miroslav Magda 版本 0.3.9

贡献者: Serge Barysiuk, pissflaps, Yaroslav Yakovlev, LoicMahieu, Renan Gonçalves, Adam Savitzky, Jory Graham

使用方法

1、下载favico.js

可以直接从github上下载 favico.js 文件或者用 bower 安装

bower install favico.js

2、引用 favico.js 文件

3、调用方法

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

浏览器支持

Chrome, Firefox, Opera 和 IE11+

徽章

动画

给徽章加上动画效果来让你的网站图标动起来。你可以自定义动画类型，位置，北京颜色和文字颜色。

滑动动画

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

淡入淡出动画

var favicon=new Favico({
    animation:'fade'
});
favicon.badge(1);

弹出动画

var favicon=new Favico({
    animation:'pop'
});
favicon.badge(1);

弹出 淡入淡出动画

var favicon=new Favico({
    animation:'popFade'
});
favicon.badge(1);

无动画效果

var favicon=new Favico({
    animation:'none'
});
favicon.badge(1);

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

图像 / 视频 / 网络摄像头

var favicon=new Favico();
var image=document.getElementById('imageId');
favicon.image(image);

HTML5视频

var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');

网络摄像头

仅支持 Chrome, Firefox 和 Opera

var favicon=new Favico();
favicon.webcam();
//stop
favicon.webcam('stop');

徽章选项

属性	默认值	描述
bgColor	#d00	徽章背景颜色
textColor	#fff	徽章文字颜色
fontFamily	sans-serif	文字字体 (Arial, Verdana, Times New Roman, serif, sans-serif,...)
fontStyle	bold	字体样式 (normal, italic, oblique, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900)
type	circle	徽章形状 (circle, rectangle)
position	down	徽章位置 (up, down, left, upleft)
animation	slide	徽章动画效果 (slide, fade, pop, popFade, none )
elementId	false	用于将图片作为徽章时指定图片元素ID
element	false	改变 "href" 属性的 DOM 元素 (在多个图标元素链接时有用)
dataUrl	false	Method that will be called for each animation from with data URI parameter