当前位置: 代码迷 >> Web前端 >> WPO优化可别忘了favicon.ico 资料
  详细解决方案

WPO优化可别忘了favicon.ico 资料

热度:422   发布时间:2012-08-24 10:00:20.0
WPO优化可别忘了favicon.ico 文件


在WPO中,别忘了favicon.ico 文件。

什么是favicon.ico 文件? ?(参考百度百科 ) 即Favorites Icon的缩写,可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站。在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)、chrome中,favicon不仅在收藏夹中显示,还会同时出现在地址栏上,这时用户可以拖曳favicon到桌面以建立到网站的快捷方式。

favicon文件大小一般是16×16 或 32x32,大小不到1k。但却会影响网站性能。

?

1. 这个文件不可少。

因为浏览器载入一个网页,会首先到网页<head>区寻找favicon.ico,然后到网页所在目录寻找,然后到根目录寻找。

也就是说,即使你没有定义如下语句

<link rel=”icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
?<link rel=”shortcut icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
?<link rel=”icon” href=”animated_favicon1.gif” type=”image/gif” >

浏览器也会自行寻找。如果这个文件不存在,会反馈一个404错误,消耗了资源和时间。

?

2. 这个文件最好经过压缩,大小不要超过1k

介绍两个在线生成favicon的工具站

http://www.favicon.cc/ ?可以自己动手画

http://tools.dynamicdrive.com/favicon/ ?可以通过图片生成

?

3. 将favicon添加过期头

这样,浏览器就可以直接从缓存内读取,而不用每次下载。

?

4. wordpress 的favicon文件

wordpress的favicon文件,缺省不在根目录,而是在主题目录中,例如:

http://www.mywordpress.com/wp-content/themes/theme-name/favicon.ico

如果你的favicon文件放在根目录,谷歌最新版浏览器也能够判断出来,IE浏览器就无法识别了。

所以建议直接放入正确的目录。

?

作者:?谭砚耘@用户体验与可用性设计-科研笔记

版权属于:?谭砚耘 (TOTHETOP至尚国际 ?)

版权所有。转载时必须以链接形式注明作者和原始出处

如果你希望与作者交流,请发送邮件到?tanyanyun/at/163.com?别忘了修改小老鼠