小魔鬼:favicon.ico

27 7 月, 2011 Categories: 知识原野

如果你常年管理多个网站,你总会遇到favicon.ico这个幽灵,它位于站点根目录下。

所谓favicon,即Favorites Icon的缩写。最初在IE4和IE5当中,它主要体现为收藏夹内一个有图标的收藏网页。

自从浏览器标准化获得很大进展之后,显示当前网页特征的favicon.ico小图片成为标配,以至于搜索引擎索引或者浏览器下载文件前,都要事先去寻找favicon.ico文件。

favicon文件,可以美化网页在浏览器或者桌面快捷方式的视觉表现。类似Google、百度、facebook的favicon文件几乎每天都在我们的浏览器栏晃悠。

可是,有一个favicon相关的问题,让站长们不大愉快。如果你的站点域名经过多年运行需要调整域名,比如302临时或301永久跳转,你会发现一个令人郁闷的情况。一个旧的favicon标志可能会在你的电脑里面遗留很久,你甚至不能通过刷新浏览器缓存进行更新。这有点像以收藏网络遗产知名的way machine,这个网站将世界上大多数公开网站历年来的资料(包括favicion在内)都一股脑进行收藏,而你你可能根本不想让那么久的旧资料被保留。

肿门办?答案是指定文件类型并设置缓存。

这里看到一个不错的文档:

Make favicon.ico Small and Cacheable

tag: images

The favicon.ico is an image that stays in the root of your server. It’s a necessary evil because even if you don’t care about it the browser will still request it, so it’s better not to respond with a 404 Not Found. Also since it’s on the same server, cookies are sent every time it’s requested. This image also interferes with the download sequence, for example in IE when you request extra components in the onload, the favicon will be downloaded before these extra components.

So to mitigate the drawbacks of having a favicon.ico make sure:

  • It’s small, preferably under 1K.
  • Set Expires header with what you feel comfortable (since you cannot rename it if you decide to change it). You can probably safely set the Expires header a few months in the future. You can check the last modified date of your current favicon.ico to make an informed decision.

Imagemagick can help you create small favicons

top

Firebug有一个YSlow由Yahoo开发,针对favicon提出两点优化指南。1是文件尺寸尽量小,1K以内,2是设置favicon文件的类型和缓存。

具体的方法是这样:

If you’re using Apache, just add a MIME-Type for the favicon in your website’s .htaccess file or to Apache’s mime.types file:

# Add Proper MIME-Type for Favicon AddType image/x-icon .ico 

Then, set the Expires header a few month(s) in the future:

# Enable Apache's mod_expires Module ExpiresActive On ExpiresByType image/x-icon "access plus 1 month" 

After clearing your browser’s cache and reloading the page, you should see the favicon.ico file being served with the Cache-Control header being set to a date (specified in seconds) in the future:

Content-Type image/x-icon Cache-Control: max-age=2592000 

For related information, see the YSlow documentation on Making Your favicon.ico Small and Cacheable at: http://developer.yahoo.com/performance/rules.html#favicon

Tags:
尚无评论.

留言回复