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

关注

发布于: 2020 年 04 月 23 日

😀 😁 😂 🤣 😃 😄
﻿
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>
﻿
效果如下：
﻿
标签栏
﻿
﻿
书签栏
﻿
﻿
参考链接
﻿
Emojis as Favicons
﻿