第二篇:正确获取收藏夹图标(favicon)
在本专题的上一篇中,我谈到了四款 IE 外壳浏览器关于中键点击与引用页的比较。这次,我要说的是,浏览器如何正确地获取收藏夹图标 (favicon)。
favicon 是用于显示在浏览器地址栏和收藏夹中的图标,相信大家都不会陌生。印象中,国内网站较早启用 favicon 的是闪客帝国,那个时候,一道金黄色的闪电让人耳目一新(现在换成了蓝色闪电)。那个时候,它的制作“技巧”在网站设计和开发人员之间流传着:制作 DIY 一个 16 x 16 大小的 icon, 并确保它只有 16 色,然后把这个 .ico 图标文件放在网站根目录。
毫无疑问,favicon 是一个用于展示网站形象的不错载体。但是,随着网站的发展,仅仅在网站根目录放一个图标文件已经不能满足需求——一个大型网站可能会有多个不同的频道,比如 blogcn,它们之间表达的主题也不尽相同。都用同一个 favicon 难以表达各自的主题。于是,一种 link 标签应运而生。它的写法是:
<link rel="shortcut icon" href="ICON_URL">
这样, 可以使同一网站不同页面呈现不同的 favicon.
说到这里,就要进入今天的正题了。如果浏览器能同时查找根目录下的 favicon.ico 文件和上面 <link>
指定的 icon URL, 且 <link>
具有更高优先级,则该浏览器能正确地获取 favicon.
这里做一个简单的测试:将专题中提及的四款浏览器打开两个 tab, 分别访问如下两个网址:
Microsoft Corporation Homepage: www.microsoft.com/en/us/default.aspx
Microsoft Expression Homepage: www.microsoft.com/products/expression/en/default.mspx
由于各浏览器加载 favicon 策略不同,我们等页面全部加载完成后,再观察它们在 tab 上显示的图标。如果分别显示成 和 , 则说明该浏览器能正确获取 favicon, 如果都显示成 , 则表明它没能正确获取。
测试结果
在参与比较的 4 款浏览器软件中,能正确获取 favicon 的只有 IE, 其它 3 款浏览器只是“傻傻”地尝试获取 /favicon.ico.
ps: 此问题我曾经在 Maxthon 官方论坛反映过,但他们并未在 2.x 版本中做出改进。
附注:本文所说的收藏夹图标严格来说,是“地址栏图标”,有一个 <link>
标签专门用来指定收藏夹图标:
<link rel="Bookmark" href="favicon.ico">
事实上它并未引起重视,本文不考虑对它的正确处理问题。