WEB优化Favicon请求

阅读更多

关于Favicon

• 总是被命名为favicon.ico
• 默认存放在网站web根目录。我们常常看到这样的一个请求/favicon.ico
• 它总是显示在浏览器地址栏,网址的左边
• 当访问一个页面的时候，不管怎么样，浏览器都会请求这个文件，即/favicon.ico
• 可以通过在页面的部分加入元素来重新指定它的位置
  
• ico格式可以是不同分辨率的图像，比如16×16, 32×32等。

 
上图从客户端和服务端监测，可以知道每次访问页面的时候，都会访问/favicon.ico，不管该文件存不存在（一些工具像httpwatch、firebug不会将/favicon.ico请求罗列出来）。如果/favicon.ico文件不存在，则响应404错误。图-1和图-2比较而言，图-1(404响应)反倒花费的时间更少，这是图-2需要传输favicon.ico文件，http 200响应比http 404响应更大。通常在这种情况，我们应该减少对/favicon.ico请求来达到整体优化效果。

优化Favicon

• 确定文件/favicon.ico存在，不应该返回404错误。404错误意味着，每次访问浏览器都会重新请求一次/favicon.ico。我们应该减少这样的请求，将/favicon.ico缓存在客户端。减少不必要的http请求是web前端优化的一条重要准则
• 设置Expires头，将/favicon.ico缓存在客户端。比如，Apache可以通过mod_expires增加这样的设置。缓存时间可以是一个月，甚至可以是一年。

      
        ExpiresActive On
        ExpiresByType image/ico "access plus 1 year"
        ExpiresByType image/icon "access plus 1 year"
      
      

• 通过更新缓存。/favicon.ico名字和位置总是固定死的，如果你需要更新缓存的话，可以通过元素重新指定它的位置
• 保持较小的图片大小。虽然ico格式文件支持不同的分辨率，但是我们推荐16×16大小，并且文件大小在1kb左右。

• 
• 大小: 94 KB

• 查看图片附件