rel=shortcut icon是有害的

本文翻译自rel=”shortcut icon” considered harmful,并不是原创。转载请标示:http://hushengdong.com/2016/11/13/rel-shortcut-icon是有害的#more

大多数的网站使用下面的HTML代码来指定favicon:
<link rel='shortcut icon' href='/favicon.ico'>
看起来很好,是吗?猜猜看,并不是!

今天,我学习了shortcut不是一个有效的链接符,确实,这并不在HTML5的4.12.5关于link类型的说明中,实际上,这可能是IE特有的属性,在IE之外,应该使用rel=”icon”更好。

所以,是否我们必须使用shortcut属性来支持IE?并不是。
如果shortcut从rel属性中删除,IE8以下的版本会忽略这个属性,并且自动在网站根目录下寻找favicon.ico文件替代,实际上,大多数的浏览器都是这么干的,在IE中使用rel=”icon shortcut” (注意顺序)也不会管用,因为它根本不会把rel属性的值看作空格分割的列表。

  • 更新:在IE9中当你指定了的时候就需要shortcut属性值了,不用说,这个实现烂透了,更好的办法就是在你网站的根目录下面放一个favicon.ico文件。*
    就简单的把图标放到网站的根目录下,名字叫favicon.ico,这就行了

这么做,IE会自动发现它,不管你是否在页面中是否指定了link元素,如果你删除了link rel=”icon”声明,其它浏览器也会自动去找网站根目录下的favicon.ico文件,如果没有这个文件,会导致很多的404错误。现在大多数的浏览器都支持这个机制,欧朋、Safari、谷歌浏览器、火狐、IE5+,唯一不支持的浏览器是SeaMonkey(翻译成海猴子吗?)

(当你不指定favicon.ico的时候海猴子默认不会自动查找,火狐浏览器不太一样,在about:config中有一个browser.chrome.favicons的属性,默认是true,如果改为false的话,火狐就不会自动查找favicon.ico了,火狐默认是true。PS:大多数程序员可能都不知道,况且普通的用户了。)

我在这里就是要告诉你,你可以把link声明从html中删除了,唯一的不同就是一旦整个HTML文档加载完毕就会马上展现图标,相比较于自己直接指定link属性,图标可以更快加载,在解析到link rel=”icon”的时候就会展现出来,我认为这个提升并不大,相反延迟加载图标从而让其它元素更早加载会更好。

如果在海猴子中你想尽快加载图标的话,用下面的代码:
<link rel="icon" href="/favicon.ico">

更新: HTML现在指定了关于favicon.ico
在HTTP或者HTTPS中,如果没有指定使用icon关键字指定link属性,代理用户可以尝试去绝对路径查找/favicon.ico来替代,如果用户指定了图标,那么就使用指定的文件。

更新: 由于历史原因,HTML规范指定不允许在icon关键字后面紧跟一个U+0020空格符号,当然了,最后是不在任何的HTML使用它。

更新:IE11会支持GIF或者PNG图标,不仅仅是.ico结尾的文件,当然了,/favicon.ico还是默认的图标格式。

感谢Anne和Sander在the#whatwg IRC channel上花费时间来向我解释它(指上面所说的这个机制)。