Какой в ​​настоящее время лучший способ получить значок для показа во всех браузерах, которые поддерживают Favicons? - PullRequest
Новая
       19

Какой в ​​настоящее время лучший способ получить значок для показа во всех браузерах, которые поддерживают Favicons?

80 голосов
/ 01 сентября 2008

Каков в настоящее время лучший способ получить значок для отображения во всех браузерах, которые в настоящее время его поддерживают?

Пожалуйста, включите:

  1. Какие форматы изображений поддерживаются какими браузерами.

  2. Какие строки нужны в каких местах для различных браузеров.

Ответы [ 8 ]

103 голосов
/ 01 сентября 2008

Я иду за пояс и подтяжки здесь.

Я создаю значок 32x32 в форматах .ico и .png, называемых favicon.ico и favicon.png. Название иконки на самом деле не имеет значения, если вы не имеете дело со старыми браузерами.

  1. Поместите favicon.ico в корень своего сайта для поддержки старых браузеров (необязательно и актуально только для старых браузеров.
  2. Поместите favicon.png в мой подкаталог изображений (просто, чтобы сохранить порядок).
  3. Добавьте следующий HTML-код внутри элемента <head>. 
<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon.ico" />

Обратите внимание, что:

  • Тип MIME для файлов .ico был зарегистрирован как image / vnd.microsoft.icon IANA .
  • Internet Explorer будет игнорировать атрибут type для отношения ярлыка, и это единственный браузер, поддерживающий это отношение, его не нужно указывать.

Ссылка

10 голосов
/ 01 сентября 2008

Я использую формат .ico и помещаю следующие две строки в элемент <head>: 

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
6 голосов
/ 21 марта 2013

Для поддержки сенсорных иконок для планшетов и смартфонов я предпочитаю подход HTML5Boilerplate

Более подробную информацию о сенсорных иконках можно найти в этой статье .

С текущим статусом поддержки браузера вам даже не нужно добавлять HTML-тег для значка в ваш документ. Браузеры будут автоматически искать список файлов, см. Этот пример для iOS:

Если в HTML не указаны значки, iOS Safari выполнит поиск корневой каталог веб-сайта для значков со значком apple-touch или префикс, созданный яблочным прикосновением к иконке. Например, если соответствующий размер иконки для устройства составляет 57 × 57 пикселей, iOS ищет имена файлов в следующем порядке:

  1. яблоко-сенсорный значок-57x57-precomposed.png
  2. яблоко-сенсорный значок-57x57.png
  3. яблочно-сенсорный значок-precomposed.png
  4. яблочно-сенсорный icon.png

Я советую не включать значок в ваш документ, но иметь список готовых файлов на корневом сайте:

  • яблочно-сенсорный значок-114x114-precomposed.png
  • яблочно-сенсорный значок-144x144-precomposed.png
  • яблочно-сенсорный значок-57x57-precomposed.png
  • яблочно-сенсорный значок-72x72-precomposed.png
  • яблочно-сенсорный значок-precomposed.png
  • apple-touch-icon.png (57px*57px)
  • favicon.ico HiDPI (32x32px)

Когда вы загружаете шаблон с html5boilerplate.com , все они включены, вам просто нужно заменить их на свои собственные значки.

5 голосов
/ 01 сентября 2008
4 голосов
/ 01 сентября 2008

IE6 не может правильно обрабатывать PNG, будьте осторожны.

3 голосов
/ 30 января 2009

Существует также сайт, где вы можете проверить, как создается значок любой страницы

getfavicon.org

Там вы можете увидеть учебник по созданию значков, типов изображений и разрешений, это здорово!

3 голосов
/ 01 сентября 2008

Favicon должен быть .ico-файлом для правильной работы во всех браузерах.

Современные браузеры также поддерживают изображения PNG и GIF.

Я обнаружил, что в общем случае самый простой способ его создания - использовать свободно доступный веб-сервис, такой как favicon.cc .

2 голосов
/ 01 сентября 2008

Наличие favicon.* в корневом каталоге автоматически определяется большинством браузеров. Вы можете убедиться, что это обнаружено с помощью: 

 <link rel="icon" type="image/png" href="/path/image.png" />

Лично я использую изображения .png, но большинство форматов должно работать.

...