之前做了一个 Chrome 插件，借助可以用于区分不同的成带开发环境，效果如下：
主要实现过程其实不复杂，标识首先获取网站 favicon，借助然后给 favicon 添加标识，成带重新绘制生成就行了。标识
其中，借助这里的成带图标就是通过 SVG 生成的，下面看看具体实现吧。标识
一、借助favicon 的成带获取方式
想知道获取方式，可以先了解设置方式。标识
一般有两种方式可以设置网站的借助 favicon。
第一种，成带通过 link 标签设置(需要rel="icon"属性)。标识
<link rel="icon" href="xxx.png">第二种，直接在网站根目录放一张favicon.ico(必须是这个名称，浏览器默认的)，html 中什么也不用设置。
- 网站目录
index.html
favicon.ico如果以上都没有设置，那么大概率会看到以下错误。
了解这些，获取就简单了，先通过link获取，只要rel包含icon就行了。
const link = document.querySelector(link[rel~="icon"]);如果找不到，云南idc服务商可以请求/favicon.ico，这里直接添加一个link。
function getLink(){
const link = document.querySelector(link[rel~="icon"]);
if (link) {
return link
} else {
const link = document.createElement(link);
link.rel = "icon";
link.href = "/favicon.ico"
document.head.append(link);
return link
}
}这样获取的link就保证存在了，然后就是绘制。
二、利用 canvas 进行绘制
由于需要合成图像，所以需要先绘制原有图像。提到图像绘制，可以想到 canvas 绘制，只需要一点点 canvas 基础知识就足够了。具体实现如下：
const canvas = document.createElement(canvas),
ctx = canvas.getContext(2d),
img = new Image();
img.crossOrigin = anonymous;
img.onload = () => {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
let dataURL = canvas.toDataURL("image/png");
resolve(dataURL);
canvas = null;
};
img.src = url;由于存在/favicon.ico没有设置的情况，所以需要在 img 加载失败的时候给一张默认图。
img.onerror = () => {
resolve("默认图base64");
}这样就能获取到 favicon 的图像信息了。
三、利用 SVG 进行图片合成
在上面的基础上，其实可以继续通过 canvas 进行绘制，再绘制一个标签也不是难事。不过这里可以采用 SVG 的方式来进行绘制，有以下一些优点。
成本更低，比 canvas 更易理解。
灵活性高，可以通过 CSS 进行一些样式控制。
首先，我们可以在 HTML 中自由的免费信息发布网、像正常网页开发一样，绘制这样一个布局，相信没有什么难度。
local
由于宽度有限，所以需要强制文本换行，超出隐藏，关键样式如下：
strong{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
text-transform: uppercase;
background-color: orange;
color: #fff;
padding: 0px 2px;
border-radius: 2px;
font-size: 12px;
box-sizing: border-box;
max-width: 100%;
width: max-content;
height: 16px;
line-height: 16px;
word-break: break-all;
overflow: hidden;
}接着，将这一段 html 放入 foreignObject标签中，关于 foreignObject[1] 的作用，有兴趣的可以参考张鑫旭老师的这篇文章 SVG 简介与截图等应用[2]，在这里，你可以简单理解为是可以包含 HTML 的标签，而 SVG 本身也是一种图片，这样就达到了合成图像的目的。
具体实现如下：
const link = getLink();
const icon = await img2Base64(link.href);
const favicon = `data:image/svg+xml;charset=utf-8,
html,body{
margin: 0;
height: 100%
}
div{
height: 100%;
background: pink;
animation: hue 3s infinite;
}
@keyframes hue {
to {
filter: hue-rotate(360deg)
}
}
</svg>很简单的一个背景颜色动画。在 Firefox 上是用作 favicon 是有动画的。
Firefox 下是动画状态
但是，Chrome 上却不行，亿华云只有禁止的第一帧。
Chrome 下是静止状态
所以之前想实现 favicon 文本滚动的效果可以就此打住了
