- 原文地址：Favicons: How to Make Sure Browsers Only Download the SVG Version
- 原文作者：Chris Coyier
- 译文出自：掘金翻译计划
前几天，在推特上Šime Vidas 从subzey 向我发送了一则消息，关于一种趋势
以前，我引用图片的HTML语句如下：
<!-- Warning! Typo! -->
<link rel="icon" href="/favicon.ico" size="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
但是属性size是个错别字，应该使用sizes，如下所示：
<!-- Correct -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
使用sizes，谷歌浏览器不再下载所有格式图片，只下载svg格式（本应如此）。但是，有些事项需要注意。比如，我的ico文件是5.8kb，这意味着每加载一个未缓存的页面都会节省5.8kb，这对我而言很有意义。
Šime 在网络平台新闻42页 做了如下注释
几乎所有现代浏览器都支持svg图片除了Safari。如果你的网站同时声明了ico和svg格式的图片，请保证在引入ico格式的语句中添加属性sizes=any，防止谷歌浏览器下载并使用ico图片而不是svg图片（想要获得更多信息，请看Chrome bug 1162276]）。 CSS-Tricks就是一个最好的网站例子。在语句中具有最佳图标标记。（有三个link元素，分别是 favicon.ico, favicon.svg,和apple-touch-icon.png）
在注释中关于 CSS-Tricks这一例子，我认为有点笼统了，但它的确是正确的，因为在文章开篇我就指出了我的错误。我认为错别字的根源是Andrey的这篇文章，尽管它已经被改正了。但是在实用的网站图标标记方面，Andrey的文章仍然是最佳参考。
