在网站中使用表情符号作为图标

Question

表情符号很棒，所以我在想如何使用 link 标签添加一个作为网站图标。

一种可能的解决方案：

我在这篇博客中找到了一种可行的方法 post here。基于此，到目前为止，我已经通过以下解决方案实现了我想要的。

JavaScript 代码片段：

const setFavicon = (emoji) => {
  const canvas = document.createElement('canvas');
  canvas.height = 32;
  canvas.width = 32;

  const ctx = canvas.getContext('2d');
  ctx.font = '28px serif';
  ctx.fillText(emoji, -2, 24);

  const favicon = document.querySelector('link[rel=icon]');
  if (favicon) { favicon.href = canvas.toDataURL(); }
}

setFavicon('');

HTML中的link标签：

<link rel="icon" type="image/png" href="favicon.ico"/>

所以我的问题是：

也许为此目的创建 favicon.ico 文件也可以做到这一点。有没有更好的方法可以在不转换代码或在代码中添加额外的 JavaScript 片段的情况下实现这一目标？谢谢！

Answer 1

Favicon 是图像，所以只需制作静态图像并使用它。

你不会经常改的，所以没必要让人家的电脑花时间运行JS生成一个永远一样的资源，最好生成一次，保存作为您的网站图标图像文件，并指向它。作为奖励，浏览器会缓存它，所以不是每次都重新计算它，甚至每次都下载它，作为一个图标，它只会被下载一次，然后再也不会。

另请注意，您不需要 .ico 扩展名（这是一种古老图像格式的扩展名），只需使用图像应该具有的扩展名，并将 type 设置为正确的图像 mime 类型。

Answer 2

制作屏幕截图可能是更好、更简单的解决方案（正如 Mike 提到的）。此解决方案还有一个优点：

表情符号在不同平台上的外观可能大不相同。

一个例子：

你也不需要处理那个问题..

Answer 3

现在 all major browsers support SVG favicons，可以引用包含内部表情符号的 SVG：

<!-- favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
  <text y="32" font-size="32"></text>
</svg>

Link 像往常一样：

<link rel="icon" href="/favicon.svg" />

Answer 4

另一种方法是：

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22></text></svg>">

发件人：https://css-tricks.com/emojis-as-favicons/

在网站中使用表情符号作为图标

Use emoji as favicon in websites

html

javascript

favicon

emoji