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

StackOverflow https://stackoverflow.com/questions/37073

  •  09-06-2019
  •  | 
  •  

Вопрос

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

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

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

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

Это было полезно?

Решение

Здесь я предпочитаю носить ремень и подтяжки.

Я создаю значок размером 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 пользователем ИАНА.
  • Internet Explorer проигнорирует type атрибут для связи со значком быстрого доступа, и это единственный браузер, поддерживающий эту связь, указывать его не нужно.

Ссылка

Другие советы

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

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

Чтобы также поддерживать сенсорные иконки для планшетов и смартфонов, я предпочитаю подход Шаблон html5

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

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

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

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

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

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

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

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

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

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

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

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

getfavicon.org

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top