Question

当我使用'Icon Composer'在Mac上创建ICO文件时，它允许指定五个图像（16x16,24x24,32x32,48x48,256x256）。如果我指定16x16和32x32谷歌浏览器（Mac OS X），请使用32x32图像作为选项卡上和收藏夹下名称旁边显示的图标（将其调整为16x16）。这会导致图标看起来模糊。

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

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

Answer 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元素中列出多个尺寸的建议，但使用最大可用尺寸是我唯一的方法让favicon以所有合适的尺寸正确渲染。看起来Chrome通过找到合适的较小尺寸（如果可用）从太大的图标缩放，但通过炸掉它已经具有的小尺寸来缩放 up 。因此，sizes属性必须设置为最大可用大小。

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

Answer 2

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

<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

Answer 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图标以及开始菜单中的快捷方式。但它使用了桌面和任务栏中的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）作为标签/开始菜单图标。它使用具有最大尺寸（size =“64x64”）值的图像作为桌面和任务栏图像。不是最大的图像，具有最大尺寸值的图像。

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

Answer 4

这对我有用：我制作了一个带有嵌入式64x64和128x128的图标32x32，然后将尺寸=“64x64”添加到html

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

谷歌Chrome使用错误的Favicon大小

4 个答案: