Data URI（base64）Favicon
Data URI favicon 把图像作为 base64 文本直接嵌进 link 标签里（href="data:image/png;base64,..."），而不是指向一个文件，这省下了一次 HTTP 请求。它对浏览器标签页有效，但会在一切按 URL 获取图标的地方失效：/favicon.ico 请求、apple-touch-icon、manifest 图标、爬虫和链接展开器。所以它不能替代真实的文件。
它换来什么，又付出什么
把图标作为 base64 内联省下一次请求：图像随 HTML 一起传输，所以浏览器不用为标签页再去取一个单独的文件。对一个延迟敏感的页面上的小图标来说，这看起来可能挺诱人。
问题在于一切不读你 HTML 的东西。一个按路径请求 /favicon.ico 的爬虫或链接展开器什么都得不到。iOS 想要一个真实的 apple-touch-icon 文件；Android 读取 manifest 里列出的文件。它们都用不了一个只作为文本存在于单个 link 标签里的图标，而且那个 base64 数据块会让它所在的每一个 HTML 响应都膨胀。
它长什么样
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />对标签页够用，但对任何按 URL 请求图标的东西都是不可见的。
Data URI favicon 常见问题
我可以用一个 base64 favicon 吗？
对浏览器标签页来说，可以。但它满足不了 /favicon.ico 请求、apple-touch-icon、manifest 或爬虫，所以在一个真实网站上，它只能补充真实文件，而不能替代它们。
内联 favicon 在 iOS 主屏幕上有用吗？
没有。iOS 主屏幕使用 apple-touch-icon，它必须是一个能被获取的真实文件。favicon link 里的 data URI 对主屏幕毫无作用。
Data URI favicon 对性能有好处吗？
它省下一次小请求，却把编码后的图像嵌进携带它的每一个 HTML 响应里。对一个首次加载之后反正就被狠狠缓存的图标来说，这点节省通常可以忽略，而膨胀却不能。