Google Chrome использует неправильный размер Favicon

Когда я создаю ICO файл на Mac с помощью "Icon Composer", он позволяет указать пять изображений (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>

Ответ 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, как ожидалось.

Ответ 2

Я бы просто использовал 16px версию в файле ico. 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

Ответ 3

После некоторого тестирования это выглядит так:

Первая встречаемая пиктограмма будет использоваться на вкладке хром или в верхнем левом углу, если в режиме приложения. Он также будет использоваться для ссылки в меню "Пуск".
Значок с наибольшим значением размера будет использоваться для ярлыков рабочего стола и панели задач

Когда у меня был следующий порядок:

<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) для значков меню вкладки/запуска. Он использовал изображение с наибольшим размером (размеры = "64x64" ) для рабочего стола и изображения панели задач. Не самое большое изображение, которое имеет наибольшее значение размера.

У меня есть значок, который просто размыт до 16x16, поэтому мне нужен другой значок такого размера.

Ответ 4

Это сработало для меня: я сделал значок 32x32 со встроенными 64x64 и 128x128, а затем добавил размеры = "64x64" в html

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