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

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

пожалуйста, укажите:

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

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

78
favicon html standards

8 ответов

Я иду за поясом и брекетами здесь.

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

  1. место favicon.ico на вашем сайте root для поддержки старых браузеров (необязательно и актуально только для старых браузеров.
  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.значок в IANA.
  • Internet Explorer будет игнорировать type атрибут для отношения ярлыка, и это единственный браузер для поддержки этого отношения, это не должно быть доставленный.

ссылка

100

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

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
10

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

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

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

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

  1. apple-touch-icon-57x57-предварительно составленный.формат PNG
  2. apple-touch-иконка-57x57.формат PNG
  3. apple-touch-значок-предварительно.формат PNG
  4. apple-touch-значок.формат PNG

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

  • яблоко-сенсорный значок-114x114-составной.формат PNG
  • apple-touch-icon-144x144-предварительно составленный.формат PNG
  • apple-touch-icon-57x57-предварительно составленный.формат PNG
  • apple-touch-icon-72x72-предварительно составленный.формат PNG
  • apple-touch-значок-предварительно.формат PNG
  • apple-touch-значок.формат PNG (57px*57px)
  • favicon.ico HiDPI (32x32px)

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

6
5

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

4

Favicon должен быть .файл ICO для корректной работы во всех браузерах.

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

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

3

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

getfavicon.org

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

3

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

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

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

2