当你切换标签时，这是你的眼睛看到的第一件事。
这是解释favicon是什么的一种方式。标签区域是一个比大多数人认为的更珍贵的屏幕空间。如果做得好，除了是带有图标的标签外，它还可以成为表示网页内容或内容发生情况的完美广告牌。
css-tricks favicon
当你在标签上没有活动时，favicons实际上是最有用的。这是一个例子：
想象一下，您正在将最近暑假期间的照片备份到云服务中。在他们上传时，您已打开一个新标签，以收集有关您去度假的地方的详细信息，以便稍后注释这些照片。有一件事导致了另一件事，现在你正在第七个标签上看casey neistat。但是，如果没有重新检查云服务页面以查看照片是否已上传，您将无法继续进行youtube马拉松。
正是这种情况我们才能发挥创意！如果我们可以动态更改该图标中的像素并显示上传进度，该怎么办？这正是我们在本文中要做的。
在支持的浏览器中，我们可以借助javascript，html?<canvas>和几个世纪以来的几何体来显示加载/进度动画作为图标。
直接进入，我们将从最简单的部分开始：将图标和画布元素添加到html中。
<head>
<link rel=icon type=image/png href= width=32px>
</head>
<body>
<canvas width=32 height=32></canvas>
</body>在实际使用中，您可能希望隐藏<canvas>页面，其中一种方法是使用html?hidden属性。
<canvas hidden width=32 height=32></canvas>我将<canvas>在页面上留下可见的内容，让您看到favicon和canvas图像一起动画。
favicon和canvas都有一个标准的favicon尺寸：32平方像素。
为了演示目的，为了触发加载动画，我在页面上添加一个按钮，点击时将启动动画。这也包含在html中：
<button>load</button>现在让我们设置javascript。首先，检查画布支持：
onload = ()=> {
canvas = document.queryselector('canvas'),
context = canvas.getcontext('2d');
if (!!context) {
/* if canvas is supported */
}
};接下来，添加按钮单击事件处理程序，该处理程序将在画布中提示动画。
button = document.queryselector('button');
button.addeventlistener('click', function() {
/* a variable to track the drawing intervals */
n = 0,
/* interval speed for the animation */
loadinginterval = setinterval(drawloader, 60);
});drawloader将是以每个60毫秒的间隔进行绘图的函数，但在我们编码之前，我想要定义要绘制的正方形线的样式。我们做一个渐变。
/* style of the lines of the square that'll be drawn */
let gradient = context.createlineargradient(0, 0, 32, 32);
gradient.addcolorstop(0, '#c7f0fe');
gradient.addcolorstop(1, '#56d3c9');
context.strokestyle = gradient;
context.linewidth = 8;在drawloader，我们将按百分比绘制线条：在前25个区间内，顶线将逐渐绘制;?在第二季度，将绘制右线;?等等。
动画效果是通过实现擦除的<canvas>每个间隔之前重绘从先前区间的路线长一点。
在每个间隔期间，一旦在画布中完成绘制，它就会快速转换为png图像以指定为图标。
function drawloader() {
with(context) {
clearrect(0, 0, 32, 32);
beginpath();
/* up to 25% */
if (n<=25){
/*
(0,0)-----(32,0)
*/
// code to draw the top line, incrementally
}
/* between 25 to 50 percent */
else if(n>25 && n<=50){
/*
(0,0)-----(32,0)
|
|
(32,32)
*/
// code to draw the top and right lines.
}
/* between 50 to 75 percent */
else if(n>50 && n<= 75){
/*
(0,0)-----(32,0)
|
|
(0,32)----(32,32)
*/
// code to draw the top, right and bottom lines.
}
/* between 75 to 100 percent */
else if(n>75 && n<=100){
/*
(0,0)-----(32,0)
| |
| |
(0,32)----(32,32)
*/
// code to draw all four lines of the square.
}
stroke();
}
// convert the canvas drawing to png and assign it to the favicon
favicon.href = canvas.todataurl('image/png');
/* when finished drawing */
if (n === 100) {
clearinterval(loadinginterval);
return;
}
// increment the variable used to keep track of the drawing intervals
n++;
}现在到数学和绘制线条的代码。
以下是我们如何在前25个区间内逐渐绘制每个区间的顶线：
n = current interval,
x = x-coordinate of the line’s end point at a given interval.
(y-coordinate of the end point is 0 and start point of the line is 0,0)在所有25个间隔完成时，x的值为32（favicon和画布的大小。）
所以…
x/n = 32/25
x = (32/25) * n应用此数学并绘制线的代码是：
moveto(0, 0); lineto((32/25)*n, 0);对于接下来的25个区间（右线），我们类似地以y坐标为目标。
moveto(0, 0); lineto(32, 0);
moveto(32, 0); lineto(32, (32/25)*(n-25));这是使用其余代码绘制所有四行的指令。
function drawloader() {
with(context) {
clearrect(0, 0, 32, 32);
beginpath();
/* up to 25% of the time assigned to draw */
if (n<=25){
/*
(0,0)-----(32,0)
*/
moveto(0, 0); lineto((32/25)*n, 0);
}
/* between 25 to 50 percent */
else if(n>25 && n<=50){