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

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

19 голосов
/ 25 февраля 2011

Когда я создаю файл ICO на Mac с помощью Icon Composer, он позволяет указать пять изображений (16x16, 24x24, 32x32, 48x48, 256x256). Если я укажу Google Chrome 16x16 и 32x32 (Mac OS X), используйте изображение 32x32 в качестве значка, который отображается рядом с именем на вкладках и в избранном (он имеет размер 16x16). Это приводит к тому, что значок выглядит размытым.

Правильно ли я создаю свой favicon.ico? Нужно ли что-то еще сказать браузеру для использования изображения 16x16? В настоящее время у меня есть: 

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

Ответы [ 4 ]

14 голосов
/ 06 апреля 2012

Для правильной работы в 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, как и ожидалось.

12 голосов
/ 27 марта 2011

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

4 голосов
/ 28 августа 2013

После некоторого тестирования это выглядит следующим образом:

  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" />

Он изменил размер значка 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, поэтому я хотел другой значок с таким размером.

0 голосов
/ 01 августа 2013

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

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