网站页脚徽章美化

之前用shields.io制作过简单的徽章，用于备案号的美化。今天看到一个网站的备案号前面有一个工信部网站favicon图标，非常羡慕，我也想有这个图标加到自己的ICP备案号前面，让ICP备案号前面多一个小图标。

看到图标的时候，我还思考了一会儿：怎么才能拿到它的这个图标？是找站长要？还是看看网页源码有没有？先看看有没有吧，没有再找站长索取(这里还有个更简单的方法：工信部备案网站的图标不就是嘛，博文写完了才想起来的……)。

在浏览器里面查看网页源码，哈哈，有！！！找到资源URL地址，它的资源是SVG文件，这就更加方便了，直接查看源码，是一堆base64编码，把源码复制下来，去除没用的标签，就留下base64编码。直接在备忘录里面把需要的样式，颜色，内容和图标编码编辑好，完事后在浏览器里面打开。效果出来了：

很好，这就是我要的效果，但是这个备案号后面的“—3”有点不好看，应该用“-”短一点的符号。这个在制作过程中还必须得用长一点的“—”号，不过原因我已经找到了，解决办法也很简单。

带图标标签制作的方式：

https://img.shields.io/badge/左边文字-右边文字-右边颜色?logo=data:image/png;base64,

比如：

https://img.shields.io/badge/鄂ICP备-2023005939—3-orange?logo=data:image/png;base64,后面就是图片编码内容

这里如果用“-”会出现报错，因为“-”是作为参数分隔符的，整个代码里面只有两个“-”分隔符，它会将第二个分隔符后面的内容作为参数，所以会报错，得用“—”解决。

编辑完成后，在浏览器打开看看效果，没问题就查看页面源码，将svg代码复制下来，粘贴到网站页脚位置就行了。这里还有个问题，刚刚提到的“—”太长了，直接在代码里面找，找到所有出现在备案号后面的“—”，就把“—”换成“-”，完美解决。