【HTML】用你喜欢的 emoji 作为页面的 favicon 吧 🎉

1,008 阅读1分钟

😀 😁 😂 🤣 😃 😄

Emoji 表情种类丰富,生动形象,如果你没有专业的设计师为网站设计专属 favicon , 可以用下面这个方法挑选一个 Emoji 表情作为 favicon 。

下面的实现方法取决于浏览器对于 “用 svg 元素作为 favicon ” 的支持。 各浏览器的支持情况见: Can I Use

实现方法很简单,将想要使用的 Emoji 表情包括在一个 svg<text> 标签里就可以了:

<html>
<head>
  <title>Emoji Favicon Demo</title>
  <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>">
</head>
<body>
  <h1>Hello, Emoji Favicon!</h1>
</body>
</html>

效果如下:

  • 标签栏

  • 书签栏

参考链接