在网站中使用表情符号作为收藏夹

Question

表情符号很棒，所以我在想如何使用link标签将其添加为收藏夹图标。

一种可能的解决方案：

我发现这个博客帖子一种可能的方式在这里。基于此，到目前为止，通过以下解决方案已经实现了我想要的。

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('');

中的link标签HTML：

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

所以我的问题：

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

Answer 1

另一种方法是：

<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/

Answer 2

现在所有主要浏览器都支持 SVG favicons，可以引用包含表情符号的 SVG：

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

像往常一样链接它：

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

Answer 3

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

你不会经常改变它，所以没有必要让人们的计算机花时间运行 JS 来生成一个始终相同的资产，最好生成一次，将其保存为您的 favicon 图像文件，并指向那。作为奖励，浏览器会缓存它，所以不是每次都重新计算它，甚至每次都下载它，作为一个 favicon，它只会被下载一次，然后再也不会被下载。

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

Answer 4

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

表情符号在不同平台上看起来可能非常不同。

一个例子：

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