我的浏览器会从数据URL缓存favicon

Question

我想使用以下base64 favicon和一些base64图像。

<link href="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAAAAAAAAAAAAAAAEAAAAAAA..AMAK3WxwAOWT0AK4RgAKHOvQA4hWUAP4lqAD2MagBQm3kATKSBAECcdP//AAD8/wAA+H8AAPA/AADwPwAA4B8AAMAPAACABwAAAgMAAI8BAADfgAAA/8AAAP/AAAD/4QAA//MAAP//AAA=" rel="icon" type="image/x-icon" />

这些是否会被我的浏览器缓存？

Answer 1

没有。数据URI不会单独缓存其包含的文档（例如CSS或HTML文件），因此每次重载时都会下载数据。

Source

Answer 2

Caching your site's favicon实际上推荐是加速网站的性能最佳实践。

例如，谷歌不会浪费额外的宝贵字节，在其主页的源代码中包含一个favicon（使用<link />或数据URI）。

相反，它们会为their favicon提供远远未来的HTTP标头集。 Cache-Control: private, max-age=31536000（31,536,000秒= 365天）。

如果您对控制网站图标的“新鲜度”感兴趣，可以使用缓存控制和HTTP标头 - 例如，如果您打算更改图标或不希望缓存图标，则可以相应地调整它。

使用Apache and mod_expires的示例：

<IfModule mod_expires.c>
    # Add Expires Header
    # http://www.askapache.com/?p=152

    ExpiresActive On
    ExpiresByType image/x-icon "access plus 1 month"
</IfModule>

此模块控制服务器响应中的Expires HTTP标头和Cache-Control HTTP标头的max-age指令的设置。到期日期可以设置为相对于上次修改源文件的时间或客户端访问时间。