Formats
用 Emoji 作为 Favicon
你可以把一个 emoji 设为 favicon，方法是让 icon link 指向一个内联 SVG data URI，其中把 emoji 作为文本容纳，根本没有图像文件。它在现代浏览器里即刻生效。它是一个很棒的占位符，但 emoji 是由操作系统自己的字体绘制的，所以它在 Windows、macOS、Android 和 iOS 上看起来各不相同，而且它满足不了 /favicon.ico 或主屏幕图标。除了快速起步之外，都要导出一套真实文件。
一行，无文件
诀窍是一个内联 SVG data URI：link 的 href 是一段把 emoji 画成文本元素的 SVG，所以没有单独的图像要托管。现代浏览器会立即在标签页里渲染它，这让它成为你构建期间的一个完美占位符。
emoji 本身由查看者操作系统所附带的任何 emoji 字体绘制，所以同一个 favicon 在每个平台上看起来会有微妙（或不那么微妙）的不同。
这一行代码
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦊</text></svg>"
/>换成任何 emoji。在生产环境中，对特殊字符做 URL 编码：有些浏览器对 data URI 里裸露的尖括号很挑剔。
Emoji favicon 常见问题
我能把一个 emoji 当作 favicon 用吗？
可以，通过一个把 emoji 渲染为文本的内联 SVG data URI。它在现代浏览器里无需图像文件就能用，这让它成为一个方便的快速占位符。
为什么我的 emoji favicon 在每个设备上看起来不同？
因为 emoji 是用操作系统自己的 emoji 字体绘制的。Apple、Google 和 Microsoft 各自把同一个 emoji 画得不一样，所以你的 favicon 也就继承了那种差异。
一个 emoji favicon 够用于生产环境吗？
作为唯一的图标，不够。它覆盖不了 /favicon.ico 或主屏幕，而且它在各平台之间看起来不一致。用它来起步，然后为上线导出一套正规的图标集。