今天搞了个萌ICP备案,来记录一下生成图标过程。
我站点下面那一堆技术栈展示就是用的shields。不过呢,它支持的slug里面可没有萌ICP的图标。因此我们需要自定义图标来实现萌ICP图标的展示

根据文档,图标可以是自定义的图片base64。但是里面有个缺点:太大的图片base64字符串太大了扔查询参数里会直接解析不出来
但是萌ICP的图标包里面最小的都有12kb,显然还是太大了
于是我们就可以对图片进行修改分辨率,改到能解析了就可以了
实测64x64的分辨率就行(5.08KB->6.77KB):

1
data:image/png;base64,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

至于背调颜色的话直接从图片上面吸一下就有了:#FE1384
于是我们就有了这样的图标链接:
https://img.shields.io/badge/萌ICP备-这里填你的号-FE1384?logo=data:image/png;base64,...(刚才的图标base64文本)
就像我的是这样:
https://img.shields.io/badge/萌ICP备-20251133-FE1384?logo=data:image/png;base64,...(注意logo参数里面base64的标识头部信息不能去掉)
效果图:
萌 挨谁劈 备案图标
这效果,真是绝了!是不是非常奈斯(
不过我还是建议各位在用这种方式制作完图标以后不直接引用shields.io的链接,因为每增加一个人访问它们都需要执行一次6.77KB的图片操作来生成图标。这样一来可能会比较费算力所以为了让他们长久发展建议网站访问量大起来的时候把shields图标直接下载下来扔图床上再引用


参考:
1.https://blog.wsm.moe/2024/01/%E8%90%8C%E5%A4%87%E6%A1%88/
2.https://www.xalaok.top/post/shieldsio-badge/
3.https://www.lddgo.net/convert/imagebasesix/
4.https://photokit.com/colors/eyedropper/?lang=zh