关于Favicon
- 总是被命名为favicon.ico
- 默认存放在网站web根目录。我们常常看到这样的一个请求/favicon.ico
- 它总是显示在浏览器地址栏,网址的左边
- 当访问一个页面的时候,不管怎么样,浏览器都会请求这个文件,即/favicon.ico
- 可以通过在页面的<head>部分加入<link>元素来重新指定它的位置
<link rel=”shortcut icon” href=http://www.cctv.com/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增加这样的设置。缓存时间可以是一个月,甚至可以是一年。
<IfModule mod_expires.c> ExpiresActive On ExpiresByType image/ico "access plus 1 year" ExpiresByType image/icon "access plus 1 year" </IfModule>
- 通过<link>更新缓存。/favicon.ico名字和位置总是固定死的,如果你需要更新缓存的话,可以通过<link>元素重新指定它的位置
- 保持较小的图片大小。虽然ico格式文件支持不同的分辨率,但是我们推荐16×16大小,并且文件大小在1kb左右。