设置网页图标:favico.js

favico.js是一款网页图标插件,让网页图标动起来。通过此插件您可以:将图片设置为网页图标、在图标上增加角标,甚至在图标上播放视频和启动摄像头!

官网GitHubAwesomes

使用方法

将图片设置为网页图标

使用 favicon.image() 将图片设置为网页图标。

<img src="./100.jpg" alt="" id="icon">
let favicon=new Favico();
let image=document.getElementById('icon');
favicon.image(image);

将视频设置为网页图标

使用 favicon.video() 将HTML5视频设置为动态网页图标。

<video src="./test.mp4" id="video" controls></video>
<button id="stopBtn">stop</button>
let favicon = new Favico();
let video = document.getElementById('video')
favicon.video(video)
document.getElementById('stopBtn').onclick = function () {
  favicon.video('stop');
}

设置图标徽章

使用 favicon.badge() 设置图标徽章。

let favicon=new Favico({
  type : 'rectangle', // 设置徽标形状,常用的有: rectangle, circle, 默认为circle
  animation: 'slide', // 设置过渡动画,常用的有: slide, fade, pop, popFade, none,默认为none
  bgColor : '#5CB85C', // 设置背景颜色
  textColor : '#ff0', // 设置徽标颜色
  position : 'upleft' // 设置徽标位置,常用的有: up, down, left, upleft,默认为 down
});
let num = 1
let interval = setInterval(() => {
  favicon.badge(num ++);
  if (num > 5) {
    clearInterval(interval)
  }
}, 1000)

徽章配置选项 :

选项名称 默认值 说明
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 如果要把角标作为一个元素显示(图像元素),可以在这里选择元素(用选择器)
dataUrl false 图标发生变动时执行的脚本

使用摄像头捕捉视频图标

启动摄像头

favicon.webcam();

停止摄像头

favicon.webcam('stop');

重置图标(恢复网页原图标)

favicon.reset();

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress