emoji favicon：一行代码，无需图像文件
无需文件、无需生成器、无需上传。粘贴一行代码，你的标签页就有了图标。
那一行代码
<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>">把火箭换成任意 emoji。那些 %22 序列是经过 URL 编码的双引号，好让整个 SVG 在 href 里得以完整保留。
工作原理
这里没有图像。href 是一个装着极小 SVG 的 data URI，而这个 SVG 就是一个内含 emoji 的 <text> 元素。浏览器直接把 SVG 渲染到标签页里，于是你跳过了整个「生成—下载—上传」的循环。
viewBox 和 font-size 负责尺寸。y=".9em" 这一微调把字形往下压，让它落在框内，而不是在顶部被裁掉。整个诀窍就这么多。
它的限制
它用操作系统的 emoji 字体渲染，所以同一个 emoji 在 macOS、Windows 和 Android 上长得都不一样。你无法控制它的样式。
它只覆盖标签页。它不是真正的 /favicon.ico，所以请求那个路径的爬虫和较旧客户端会什么都找不到；它对 iOS 主屏幕和 Android 启动器也毫无作用，那些都需要真正的 PNG 文件。
在生产环境里，要对特殊字符做 URL 编码。href 里裸露的 < 和 > 以及引号，可能会破坏解析，或触碰到严格的内容策略。像上面片段那样对它们编码，能让方案更稳健。
常见问题
怎么把一个 emoji 用作 favicon？
把 favicon link 的 href 设为一个 data URI，里面装着一小段内联 SVG，emoji 放在 <text> 元素中。只需一行 HTML，也不需要图像文件。
为什么我的 emoji favicon 在别的设备上看起来不一样？
它用每台设备自带的 emoji 字体渲染，所以在 macOS、Windows 和 Android 上样式各异。如果你需要一致的外观，请改用真正的图像图标。
emoji favicon 能用于主屏幕图标吗？
不能。它只覆盖浏览器标签页。iOS 主屏幕和 Android 启动器需要由 apple-touch-icon 和 manifest 引用的真正 PNG 文件。