谷歌浏览器使用了错误大小的网站图标答案

【问题标题】：Google Chrome Uses Wrong Size of Favicon谷歌浏览器使用了错误大小的网站图标
【发布时间】：2011-07-03 21:39:47
【问题描述】：

当我使用“Icon Composer”在 Mac 上创建 ICO 文件时，它允许指定五个图像（16x16、24x24、32x32、48x48、256x256）。如果我指定 16x16 和 32x32 Google Chrome (Mac OS X) 使用 32x32 图像作为显示在选项卡名称旁边和收藏夹下方的图标（它已调整为 16x16）。这会导致图标看起来模糊。

我是否正确地创建了我的 favicon.ico？我需要做任何其他事情来告诉浏览器使用 16x16 图像吗？我目前有：

<head>
  <link rel="shortcut icon" href="/favicon.ico" />
</head>

【问题讨论】：

你能告诉我们一些代码吗？谢谢
@apose 我将favicon.ico保存在我的网络服务器的根目录下，并且在head标签中有：<link rel="shortcut icon" href="/favicon.ico" />。
是的，我也遇到了同样的问题。我很想看到一个解决方案。
我也在谷歌浏览器论坛上发了一个问题：google.com/support/forum/p/Chrome/…

标签： google-chrome favicon

【解决方案1】：

要使其在 Chrome 中正常工作，设置 sizes 您可以使用的最大图标尺寸：

<link rel="shortcut icon" href="favicon.ico" sizes="256x256">

我使用Visual Studio Image Library 中的图标对其进行了测试，其中包括 16x16、32x32、48x48 和 256x256 的尺寸。它正确地呈现浏览器标题栏中的 16x16 大小、任务栏中的 32x32 大小以及 Windows 7 桌面上的适当大小（可能会有所不同）。

虽然我发现了很多关于为多个尺寸中的每一个列出一个 link 元素或在一个 link 元素中列出多个尺寸的建议，但使用最大的可用尺寸是我能够获得网站图标的唯一方法以所有适当的尺寸正确渲染。 Chrome 似乎会通过寻找合适的较小尺寸（如果有）从太大的图标中缩小，但通过放大已有的小尺寸来放大。所以sizes 属性必须设置为最大可用大小。

将大小设置为 256x256 似乎不会在其他浏览器中引起问题。 IE、Firefox 和 Safari 都按预期使用 16x16 大小。

【讨论】：

您似乎提供了很好的信息。我有一个查询。当您说 256x256 时，您是指嵌入 .ico 文件中的这个大小，还是这只是一个独立的 256x256 ico 文件？这种方法也适用于 IE7 吗？
@Ethan，嵌入在 .ico 文件中。
谢谢。我注意到另一件事。当我在 ico 文件中嵌入一些 PNG 时，输出大小非常臃肿。例如：2 个 300 和 400 字节的 PNG 创建一个 ~3KB 的 ico 文件。知道 ico 文件是否可以变小？

【解决方案2】：

我只会在 ico 文件中使用 16px 版本。 Chrome 还支持收藏图标的多种分辨率。例如：

<link rel="icon" href="/fav32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/fav64.png" sizes="64x64" type="image/png">
<link rel="icon" href="/fav128.png" sizes="128x128" type="image/png">

将为图标提供三种不同的图像尺寸。有关详细信息，请参阅规范 [1]。

[1]http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon

【讨论】：

所以不可能在一个 ICO 中使用多种不同的大小？
不，不是..无论如何我都会使用尺寸。
您绝对可以在一个 ICO 文件中放置多个分辨率，IE 和 Firefox 似乎都遵循了这一点。然而，显然 webkit 浏览器确实会调整 32px 版本的大小，而不是使用 OP 所提供的 16px 版本。
（实际上这可能是一个问题，但 Chrome + Safari 现在似乎确实使用 16px 版本 - 我刚刚使用 BBC 网站测试了几个浏览器。）

【解决方案3】：

经过一些测试，在我看来如下：

遇到的第一个图标将在 chrome 的选项卡中使用，如果处于应用程序模式，则在左上角使用。它还将用于开始菜单中的链接。
尺寸值最大的图标将用于桌面快捷方式和任务栏

当我有以下订单时：

<link rel="icon" href="icon64x64.png" sizes="64x64" type="image/png" />
<link rel="icon" href="icon32x32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="icon16x16.png" sizes="16x16" type="image/png" />

它为所有图标调整了 64x64 图标的大小。

当我有以下订单时：

<link rel="icon" href="icon16x16.png" sizes="16x16" type="image/png" />
<link rel="icon" href="icon32x32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="icon64x64.png" sizes="64x64" type="image/png" />

它使用 16x16 图标在选项卡/左上角的 chrome 和开始菜单的快捷方式上。但它在桌面和任务栏中使用了 64x64 图标。

当我这样做时：

<link rel="icon" href="icon64x64.png" sizes="32x32" type="image/png" />
<link rel="icon" href="icon32x32.png" sizes="64x64" type="image/png" />

它使用第一个图像 (icon64x64.png) 作为选项卡/开始菜单图标。它使用具有最大尺寸 (sizes="64x64") 值的图像作为桌面和任务栏图像。不是最大的图像，而是具有最大尺寸值的图像。

我有一个缩放到 16x16 的模糊图标，所以我想要一个不同大小的图标。

【讨论】：

【解决方案4】：

这对我有用：我制作了一个 32x32 的图标，嵌入了 64x64 和 128x128，然后在 html 中添加了 sizes="64x64"

<link rel="shortcut icon" href="favicon.ico" sizes="64x64">

【讨论】：

这也是我的问题，我有一个 32x32 的图标，必须指定 sizes="32x32"