Yuanji's Blog

Official

把 emoji 当作 favicon

📅 ( 更新 ) | 🏷️ ,
文章目录

平时逛 V2EX 的时候会注意到这个网站一些设计上的细节,其中之一就是不同的节点页面会有自己特有的 favicon,这相对于全站只使用一个统一的图案来说活泼不少,对于喜欢在浏览器里打开许多标签的用户来说也非常友好。

另外日常使用的 Slacklogseq(包括之前使用的 Notion)之类的软件,emoji 的存在对我来说也是让人乐于使用的一个重要原因。

于是我就想是不是可以把 emoji 作为 favicon 给我这个博客也加入一点儿这样的生机?

原理

稍微搜索了一下 Google,很快找到了答案,具体感兴趣的朋友可以参考 絵文字をファビコンとして表示する簡単な方法 这篇文章。

1<link
2  rel="icon"
3  href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%2250%%22 y=%2250%%22 style=%22dominant-baseline:central;text-anchor:middle;font-size:90px;%22>😸</text></svg>"
4/>

简单来说因为现在很多现代浏览器支持 SVG 作为 favicon,而 emoji(或是普通文字)可以直接嵌入 <text> 中,于是 emoji 就直接在 favicon 上显示出来了。

Hugo 模板

首先定义用法,就是在 Mardkown 文件的 Front Matter,定义一个 icon 属性像是这样:icon: 🎉,然后更新相应的模板即可,代码如下:

 1diff --git a/layouts/partials/head/icon.html b/layouts/partials/head/icon.html
 2index cab9c41..1f47494 100644
 3--- a/layouts/partials/head/icon.html
 4+++ b/layouts/partials/head/icon.html
 5@@ -1,5 +1,8 @@
 6 <link rel="apple-touch-icon" sizes="180x180" href="{{ "apple-touch-icon.png" | relURL }}" />
 7 <link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon-32x32.png" | relURL }}" />
 8 <link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | relURL }}" />
 9+{{ with .Params.icon }}
10+<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%2250%%22 y=%2250%%22 style=%22dominant-baseline:central;text-anchor:middle;font-size:90px;%22>{{ . }}</text></svg>">
11+{{ end }}
12 <link rel="manifest" href="{{ "site.webmanifest" | relURL }}" />
13-<link rel="shortcut icon" href="{{ "favicon.ico" | relURL }}" />
14+<link rel="icon" sizes="16x16" href="{{ "favicon.ico" | relURL }}" />

顺便用此机会回顾了一下模板里 link 标签的使用:

  1. 按照最新 MDN 的 Links types 文档shortcut 已经不推荐使用(原文是 must not use it anymore)
  2. 我才发现一直以来 Chrome 无论如何都只会下载 favicon.ico 而不是其他 png 文件,研究了一下加上 sizes=16x16 就好了。

问题

虽然说大部分现代浏览器都支持在 favicon 里显示 SVG,但目前(2022 年现在)为止 Safari 浏览器并不支持,不过最多也就是沿用原有的逻辑使用全站统一的图标而已。当然也可以用一些公共 CDN 提供的 emoji png 图片作为 fallback,这个就日后再研究吧。

最后

今天晚上托妻子的福,看到了来日本之后的第一次烟火大会,本文就使用 🎆 作为 favicon 吧。

2022/10/08 更新

发现改完之后 Nu Html Checker 提示有错误,原因是 linkhref 属性需要转义特殊字符,更新见 bf04517a

参考: https://stackoverflow.com/a/7109208

2022/10/09 更新

又发现了一个有关 Hugo 的 minify 带来的副作用,它会转义 % 符号本身,为了避免这一问题发生,于是在模板里直接输出 emoji 而非 URL encoding 之后的编码。这个代码就显得很丑陋了,我甚至有点儿后悔加上这个 emoji 功能了 😂,代码见 7417fe78