是否所有的图标大小都是从服务器获取的？

Question

如果我为图标PNG指定不同的图像大小，如下所示：

<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png" />
<link rel="icon" type="image/png" sizes="24x24" href="/favicon-24px.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32px.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48px.png" />
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64px.png" />
<link rel="icon" type="image/png" sizes="256x256" href="/favicon-256px.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512px.png" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

这些文件都会被获取吗？

Answer 1

引用http://www.jonathantneal.com/blog/understand-the-favicon/

这些与PNG兼容的浏览器如何确定应该使用哪个收藏图标？Firefox和Safari将使用最后出现的favicon。Chrome for Mac将使用ICO格式的favicon，否则使用32×32的favicon。Chrome for Windows如果是16×16，将使用最先出现的图标，否则将使用ICO。如果上述选项都不可用，则两个Chromes都将使用最先出现的那个图标，这与Firefox和Safari正好相反。实际上，Chrome for Mac将忽略16×16的favicon，并使用32×32版本，即使只是为了在非视网膜设备上将其缩减到16×16。Opera，不想偏向任何一方，会完全随机地从任何可用的图标中选择。我喜欢歌剧做这件事。

而这仅仅是个开始。现在是了解Internet Explorer注意事项的时候了。

虽然IE8-10将在第一次加载页面时显示收藏夹图标，但IE7将跳过第一次加载，并在重复访问期间显示收藏夹图标。更糟糕的是，IE6只有在站点加入书签并在浏览器中重新打开后才会显示收藏夹图标。每当浏览器缓存被清除时，IE6也会删除收藏夹图标，直到站点重新添加书签，或者重新加载收藏夹图标时，它才会再次显示收藏夹图标。如果IE6和图标对您来说意义重大，您可以使用一小段JavaScript代码段强制重新加载，最好将其包装在条件注释中。

Answer 2

根据specification的说法，将使用最合适的图标。因此，没有必要获取一些没有用处的东西。

如果提供多个图标，则用户代理必须根据类型、媒体和大小属性选择最合适的图标。

Answer 3

令人惊讶的是，我观察到一些浏览器正在加载所有的PNG图标，而不仅仅是最合适的：

• Chrome on
• Chrome on Android
• Firefox on

我没有测试其他设置，比如Android上的Firefox。

更多关于"all favicons are loaded" issue的信息。