再也不愁 favicon 了,直接 inline SVG

每次在一个网页里, F12 或 Cmd+Opt+I 最痛苦的是什么?

/favicon.ico:1 GET favicon.ico 404 (Not Found)

简直逼死强迫症~前段时间折腾SVG,觉得用 xml 写一组 favicon.svg 或许不错。今天撸AI它丫的直接给我个最粗暴简单的:

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://w3.org/2000/svg' viewBox='0 0 19 19'><text y=16>🤣</text></svg>">

预览一下这个SVG:

🤣

精简的地方:
1. www.w3.org 去掉 www
2. y=16去掉引号
3. viewBox 为19而 y=16 是因为该死的拉丁字母显示有个 baseline 问题。随便调整下懒得管了。
4. 节约了 font-size="16" 因为 默认就16px

直接用 emoji 作为 favicon。我贴这个版本应该是全网最精简最易读的,挑战有没有大神能进一步缩短这个 favicon 写法。

Comments