我的浏览器会缓存来自数据 URL 的网站图标吗答案

【问题标题】：Will my browser cache favicons from data URL我的浏览器会缓存来自数据 URL 的网站图标吗
【发布时间】：2011-05-18 14:06:45
【问题描述】：

我想使用以下 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" />

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

【问题讨论】：

标签： html favicon data-url

【解决方案1】：

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

Source

【讨论】：

【解决方案2】：

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

例如，Google 不会浪费额外的宝贵字节在其主页的源代码中包含网站图标（使用 <link /> 或数据 URI）。

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

如果您对控制网站图标的“新鲜度”感兴趣，可以使用 Cache-Control 和 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 指令的设置。过期日期可以设置为相对于源文件最后一次修改的时间，或者相对于客户端访问的时间。

【讨论】：