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

83

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

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

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

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

html standards favicon Фред
источник
1
Также, возможно, стоит включить сюда «значки» для iPhone; то есть, если пользователь решит добавить ваш веб-сайт на свой домашний экран. В этом случае используется следующий код: <link rel = "apple-touch-icon" href = "touch.png" /> Размеры должны быть 57x57 пикселей. В качестве альтернативы вы можете опустить тег ссылки и просто поместить файл с именем «apple-touch-icon.png» в корневой каталог своего веб-сайта.
другой
Пока вы это делаете, прочтите это: mathiasbynens.be/notes/touch-icons
Zach Lysobey
Обратите внимание, что вам понадобятся значки большего размера для дисплеев iPad и Retina iPhone. См. Рекомендации Apple: developer.apple.com/library/IOs/#documentation/…
Майк Оттум,

Ответы:

109

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

Я создаю значок 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 = "ярлык" href = "/ favicon.ico" />

Обратите внимание:

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

Справка

Брайан Мэтьюз
источник
2
Хорошо, у меня день «Microsoft действует мне на нервы». Я не могу заставить это работать в Internet Explorer, несмотря на то, что он показывает значок для сайта stackoverflow. Есть ли другие настройки, которые влияют на это, например, doctype?
belugabob
1
К вашему сведению - я нашел ответ. Если вы обращаетесь к сайту через localhost: 8080 / index.html , он не работает - если вы используете фактическое имя компьютера ( machineName: 8080 / index.html ), все работает так, как вы ожидали. Я даже не могу понять это поведение - кто-нибудь хочет попробовать?
belugabob
2
Обновление - поведение вызвано тем, что браузер кеширует значок. Очистка временных интернет-файлов вылечит это, если вы чувствуете себя счастливыми, потеряв кеш.
belugabob
2
Было бы лучше поместить версию ссылки для IE в условный комментарий IE?
EoghanM 02
9
32x32 ?? Разве 16х16 не норма?
Эдуардо Молтени
10

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

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Джон Топли
источник
6

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

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

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

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

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

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

  • apple-touch-icon-114x114-precomposed.png
  • apple-touch-icon-144x144-precomposed.png
  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-72x72-precomposed.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png (57px*57px)
  • favicon.ico HiDPI (32x32px)

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

Виллем де Вит
источник
Первая ссылка устарела, нужно перейти на github.com/h5bp/html5-boilerplate/blob/master/src/doc/… сейчас. Я бы отредактировал сам, но изменилось мало символов: / Спасибо за ответ!
Брендан
4

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

ловкий
источник
3

Фавикон должен быть в формате ICO.Для правильной работы во всех браузерах .

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

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

Антти Киссаниеми
источник
3

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

getfavicon.org

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


источник
Больше не работает.
Роман Старков
2

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

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

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

Росс
источник
Нет, это не "favicon. *", Работают только некоторые форматы: ico, png, gif, jpeg и SVG. См. En.wikipedia.org/wiki/Favicon#File_format_support .
WhyNotHugo
1

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

НПФОСС
источник