Подтвердить что ты не робот

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

Я иду за ремнем и подтяжками.

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

  • Поместите favicon.ico в корневой каталог вашего сайта для поддержки старых браузеров (необязательно и применимо только для старых браузеров.
  • Поместите favicon.png в подкаталог моих изображений (просто чтобы все было в порядке).
  • Добавьте следующий 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 для связи значка ярлыка, и это единственный браузер, поддерживающий это отношение, его не нужно предоставлять.

Ссылка

Ответ 2

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

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

Ответ 3

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

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

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

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

  • яблочно-сенсорный значок-57x57-precomposed.png
  • яблочно-сенсорный значок-57x57.png
  • яблочно-сенсорный значок-precomposed.png
  • яблочно-сенсорный 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

IE6 не может корректно обрабатывать PNG.

Ответ 6

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

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

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

Ответ 7

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

getfavicon.org

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

Ответ 8

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

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

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

Ответ 9

Идеальный формат для favicon:.ico и идеальный размер - 16 x 16. Вы также можете создавать значки в формате .png. Есть несколько онлайн-сервисов, в которых вы можете создавать онлайн-иконки, более подробно читайте здесь http://nobletips.com/add-favicon-website/

Ответ 10

Существует миллион различных способов использования этих значков (разные браузеры, разные платформы, закрепление сайтов на мобильных устройствах, смарт-телевизоры и т.д. И т.д.), Поэтому простого ответа больше нет. Для лучшего объяснения см. это S.O. ответьте, но короткая версия:

Используйте этот сайт, который позволяет вам загрузить PNG/JPG, а затем выполняет всю тяжелую работу за вас: https://realfavicongenerator.net/

Ответ 11

Ответ на этот вопрос стал достаточно сложным, поэтому лучше всего использовать такой инструмент, как RealFaviconGenerator, который позволяет загружать png/jpg, а затем генерирует значки и код для всех платформ: https://realfavicongenerator.net/