谷歌Chrome使用错误的Favicon大小

Kev*_*tre 21 favicon google-chrome

当我使用'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>
Run Code Online (Sandbox Code Playgroud)

Rya*_*ndy 15

要使其在Chrome中正常运行,请设置 sizes 为您可用的最大图标大小:

<link rel="shortcut icon" href="favicon.ico" sizes="256x256">
Run Code Online (Sandbox Code Playgroud)

我使用Visual Studio图像库中的图标对其进行了测试,其中包括16x16,32x32,48x48和256x256的大小.它正确地在浏览器标题栏中呈现16x16大小,在任务栏中呈现32x32大小,并在Windows 7桌面上呈现适当的大小(可能会有所不同).

虽然我发现了很多关于link为多个尺寸中的每个尺寸列出元素的建议,或者在一个link元素中列出多个尺寸,但使用最大可用尺寸是我能够使所有适当尺寸正确渲染图标的唯一方法.看来,Chrome的扩展下来从寻找适当的尺寸较小,如果有一个过大的图标,而是扩展被炸毁它已经具备了体积小.因此必须将sizes属性设置为最大可用大小.

将大小设置为256x256似乎不会导致其他浏览器出现问题.IE,Firefox和Safari都按预期使用16x16大小.


Kin*_*lan 12

我只想在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">
Run Code Online (Sandbox Code Playgroud)

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

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

  • 你肯定可以在ICO文件中放置多个分辨率,IE和Firefox似乎都遵守这些文件.然而,显然webkit浏览器会调整32px版本的大小,而不是使用提供的16px版本,这正是OP正在经历的. (6认同)

小智 5

经过一些测试后,它看起来如下:

  1. 遇到的第一个图标将在 chrome 选项卡中使用,或者在应用程序模式下使用在左上角。它还将用于开始菜单中的链接。
  2. 具有最大尺寸值的图标将用于桌面快捷方式和任务栏

当我有以下订单时:

<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" />
Run Code Online (Sandbox Code Playgroud)

它为所有图标调整了 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" />
Run Code Online (Sandbox Code Playgroud)

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

当我这样做时:

<link rel="icon" href="icon64x64.png" sizes="32x32" type="image/png" />
<link rel="icon" href="icon32x32.png" sizes="64x64" type="image/png" />
Run Code Online (Sandbox Code Playgroud)

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

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