Question

如果为favicon 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-favicon兼容的浏览器如何确定哪个图标   应该用吗？ Firefox和Safari将使用附带的favicon   持续。 Chrome for Mac将使用ICO格式的图标，   否则32×32的图标。 Chrome for Windows将使用favicon   如果它是16×16，则首先出现，否则为ICO。如果没有   上述选项可用，两个Chromes将使用其中任何一个   favicon排在第一位，与Firefox和Safari正好相反。   事实上，Chrome for Mac将忽略16×16图标并使用32×32   版本，如果只是在非视网膜设备上缩小到16×16。   歌剧院不想偏袒任何一方   完全随机的可用图标。我喜欢Opera这样做。

而这仅仅是个开始。现在是时候了解这个   Internet Explorer警告。

IE8-10将显示   在第一次加载页面时，IE7将跳过第一次加载   并在重复访问期间显示图标。更糟糕的是，IE6只会   一旦该网站被加入书签并重新打开，就会显示该图标   浏览器。 IE6也会在浏览器缓存时删除favicon   被清除，并且在该站点之前不会再显示favicon   要么重新加入书签，要么以某种方式重新加载favicon。如果是IE6   和favicons对你意味着很多，你可以用一个强制重新加载   JavaScript小片段，最好包含在条件中   评价。

Answer 2

根据specification，将使用最合适的图标。所以没有必要去取一些没用的东西。

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

Answer 3

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

Windows上的Chrome
Android上的Chrome
Windows上的Firefox

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

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

Answer 4

浏览器只会获得一个文件，如果有的话。

是否从服务器获取所有favicon尺寸？

4 个答案: