1. favicon.js是什么

一个js库可以使用徽标、图像、视频等来设置网页的favicon，即网页标题栏上的小图标。

2. 如何使用

2.1 使用徽标

basic demo：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>favico.js study</title>

        <!--设置网页标题小图标-->

        <link rel="shortcut icon" href="imgs/favicon.png" type="image/x-icon">

    </head>

    <body>

<script type="text/javascript" src="js/favico.js"></script>

<script type="text/javascript">

    var favicon=new Favico({

        animation:"popFade"

    });

    //使用徽标

    favicon.badge(3);

</script>

    </body>

</html>

效果：

使用徽标适合用来显示未处理消息数之类的信息，比较智能的是如果传入的数是<=0的话就不会显示徽标。

支持的选项：

属性名 说明 默认值
bgColor 徽标的背景颜色 #d00
textColor 徽标的文本颜色 #fff
fontFamily 徽标使用的文本 sans-serif
fontStyle 徽标的字体样式 bold
type 徽标的形状，可以选择circle或者rectangle circle
position 徽标在整个小图标的定位，可选的有up, down, left, upleft down
animation 徽标显示的动画，可选的有slide, fade, pop, popFade, none slide
elementId 传入一个图像id可以将徽标绑定到图像上，那么标题栏的那个就不会再进行绑定了，某些时候也许会用得到吧 false
element 木研究 false
dataUrl 木研究 false

2.2 使用图像

直接传入一个图像元素，即可动态的设置favicon：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>favico.js study</title>

        <!--设置网页标题小图标-->

        <link rel="shortcut icon" href="imgs/favicon.png" type="image/x-icon">

    </head>

    <body>

        <img id="panda" src="imgs/panda.png" />

<script type="text/javascript" src="js/favico.js"></script>

<script type="text/javascript">

    var panda=document.getElementById("panda");

    var favicon=new Favico();

    favicon.image(panda);

</script>

    </body>

</html>

2.3 使用视频

使用视频可以绑定一个视频元素video标签，在播放这个视频的时候会将当前video的画面同步到网页图标上。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>favico.js study</title>

        <!--设置网页标题小图标-->

        <link rel="shortcut icon" href="imgs/favicon.png" type="image/x-icon">

    </head>

    <body>

        <video id="fooVideo" controls="controls" src="videos/004_打企鹅-更换背景.mp4">您的浏览器不滋持h5标签</video>

<script type="text/javascript" src="js/favico.js"></script>

<script type="text/javascript">

    var fooVideo=document.getElementById("fooVideo");

    var favicon=new Favico();

    favicon.video(fooVideo);

</script>

    </body>

</html>

效果：

可以使用favicon.video(“stop”); 停掉同步。

2.4 使用摄像头

摄像头坏了….（长的丑不敢露头…o(╯□╰)o）

3. 总结

使用favicon.js可以动态的操作网页图标，可以设置为徽标、图像、视频、摄像头。

一个可能的场景是在播放音乐的时候随着强弱网页图标上显示不同的信号强度，看上去可能会酷一些。

同类产品：

tinycon.js https://github.com/tommoor/tinycon

参考资料：

1. 官网  http://lab.ejci.net/favico.js/

favico.js笔记的更多相关文章

  1. Data Visualization and D3.js 笔记(1)

    课程地址: https://classroom.udacity.com/courses/ud507 什么是数据可视化? 高效传达一个故事/概念,探索数据的pattern 通过颜色.尺寸.形式在视觉上表 ...

  2. js笔记-0

    #js笔记-0 数组: indexOf方法: Array也可以通过indexOf()来搜索一个指定的元素的位置: var arr = [10, 20, '30', 'xyz']; arr.indexO ...

  3. PPK谈JS笔记第一弹

    以下内容是读书笔记,再一次温习JS好书:PPK谈JS window.load＝initializePageaddEventSimple('window','load',function(){}) lo ...

  4. 面向小白的JS笔记 - #Codecademy#学习笔记

    前言 最初浏览过<JavaScript秘密花园>,前一段时间读过一点点<JavaScript语言精粹>和一点点<JavaScript高级程序设计>(一点点是指都只是 ...

  5. require.js笔记

    笔记参考来源:阮一峰  http://www.ruanyifeng.com/blog/2012/10/javascript_module.html   1. 浏览器端的模块只能采用“异步加载”方式 = ...

  6. JS笔记 入门第四

    小测试: 注意:取消所有的设定可以直接使用 document.getElementById("txt").removeAttribute("style"); 这 ...

  7. JS笔记 入门第二

    输出内容 document.write(); alert("hello!"); alert(mynum); </script> 注:alert弹出消息对话框(包含一个确 ...

  8. Node.js笔记1

    Node.js入门笔记 1. node -help 可以显示帮助信息2. node REPL 模式(Read-eval-print loop) 输入—求值—输出循环 直接在cmd输入node 可以进入 ...

  9. JS笔记 入门第一

    WHY? 一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. 它可以让网页呈现 ...

随机推荐

  1. 转---Android Audio System 之一：AudioTrack如何与AudioFlinger交换音频数据

    引子 Android Framework的音频子系统中,每一个音频流对应着一个AudioTrack类的一个实例,每个AudioTrack会在创建时注册到 AudioFlinger中,由AudioFli ...

  2. Qt浅谈内存泄露（总结）

    Qt浅谈内存泄露(总结) 来源 http://blog.csdn.net/taiyang1987912/article/details/29271549 一.简介 Qt内存管理机制:Qt 在内部能够维 ...

  3. 【HDU4652】Dice（数学期望，动态规划）

    [HDU4652]Dice(数学期望,动态规划) 题面 Vjudge 有一个\(m\)面骰子 询问,连续出现\(n\)个相同的时候停止的期望 连续出现\(n\)个不同的时候停止的期望 题解 考虑两种分 ...

  4. NOIP2015Day1T3斗地主（DFS）

    这类题...真的写不动T T 首先可以发现没有顺子的话出牌次数是一定的, 换句话说只有顺子会影响出牌次数. 所以可以暴搜出所有顺子的方案, 搜完之后记忆化搜索求一下a张1张同色牌, b张2张同色牌,c ...

  5. java类加载过程以及双亲委派机制

    前言:最近两个月公司实行了996上班制,加上了熬了两个通宵上线,状态很不好,头疼.牙疼,一直没有时间和精力写博客,也害怕在这样的状态下写出来的东西出错.为了不让自己荒废学习的劲头和习惯,今天周日,也打 ...

  6. Winform中的Treeview动态绑定数据库

    http://bbs.csdn.net/topics/370139193 SQL code   ? 1 2 3 4 5 6 CREATE TABLE [dbo].[Company] (     [Id ...

  7. Spring MVC POJO入参过程分析

    SpringMVC确定目标方法POJO类型的入参过程 1.确认一个key: (1).若目标方法的POJO类型的参数没有使用@ModelAttribute作为修饰,则key为POJO类名第一个字母的小写 ...

  8. PID控制算法的c语言实现十二 模糊PID的参数整定

    这几天一直在考虑如何能够把这一节的内容说清楚,对于PID而言应用并没有多大难度,按照基本的算法设计思路和成熟的参数整定方法,就算是没有经过特殊训练和培训的人,也能够在较短的时间内容学会使用PID算法. ...

  9. 洛谷P3740 [HAOI2014]贴海报

    题目描述 Bytetown城市要进行市长竞选,所有的选民可以畅所欲言地对竞选市长的候选人发表言论.为了统一管理,城市委员会为选民准备了一个张贴海报的electoral墙. 张贴规则如下: electo ...

  10. Java Socket UDP编程

    package com; import java.io.IOException; import java.net.*; /** * UDP Client * * Created by Administ ...