Как лучше всего создать значок на веб-сайте?

103

Вопрос

  • Как лучше всего создать значок на веб-сайте?
  • и является ли файл .ico с изображениями 16x16 и 32x32 лучше, чем файл .png только с 16x16?
  • Может ли предпочтительный сегодня правильный метод не работать в достаточно старых браузерах?

Способ 1

Размещение файла с именем favicon.icoв основном каталоге - это один из способов. Браузер всегда запрашивает этот файл. Вы можете увидеть это в файлах журнала apache.

Способ 2

HTML-тег в <head>разделе:

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
html favicon байт-код77
источник

Ответы:

154

Есть несколько способов создать фавикон. Лучший способ для вас зависит от различных факторов:

  • Время, которое вы можете потратить на эту задачу. Для многих это «максимально быстро».
  • Усилия, которые вы готовы приложить. Например, рисование значка 16x16 вручную для лучших результатов.
  • Конкретные ограничения, например поддержка конкретного браузера с необычными характеристиками.

Первый способ: используйте генератор значков

Если вы хотите, чтобы работа была выполнена хорошо и быстро, вы можете использовать генератор значков . Он создает изображения и HTML-код для всех основных настольных и мобильных браузеров. Полное раскрытие: я являюсь автором этого сайта.

Преимущества такого решения: оно быстрое и все соображения совместимости уже учтены за вас.

Второй способ: создайте favicon.ico (только для настольных браузеров)

Как вы предлагаете, вы можете создать favicon.icoфайл, содержащий изображения 16x16 и 32x32 (обратите внимание, что Microsoft рекомендует 16x16, 32x32 и 48x48 ).

Затем объявите это в своем HTML-коде:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">

Этот метод будет работать со всеми настольными браузерами, старыми и новыми. Но большинство мобильных браузеров игнорируют значок.

По поводу вашего предложения поместить favicon.icoфайл в корень и не объявлять его: будьте осторожны, хотя этот метод работает в большинстве браузеров, он не на 100% надежен. Например, Windows Safari не может его найти (предоставлено: этот браузер почему-то устарел в Windows, но вы поняли). Этот метод полезен в сочетании со значками PNG (для современных браузеров).

Третий способ: создайте favicon.ico, значок PNG и значок Apple Touch (все браузеры).

В своем вопросе вы не упоминаете мобильные браузеры. Большинство из них проигнорируют favicon.icoфайл. Хотя ваш сайт может быть предназначен для настольных браузеров, есть вероятность, что вы не хотите полностью игнорировать мобильные браузеры.

Добиться хорошей совместимости можно с:

  • favicon.icoсм. выше.
  • Значок 192x192 PNG для Android Chrome
  • Значок Apple Touch 180x180 (для iPhone 6 Plus; другое устройство может уменьшить его размер по мере необходимости).

Объявите их 

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

Это не полная история, но в большинстве случаев этого достаточно.

philippe_b
источник
9
На самом деле, все еще часто используемый <link rel = "shortcut icon" href = "/ path / to / icons / favicon.ico"> не является допустимым вариантом. Это даже не стандарт, его поддерживает только IE. И, начиная с IE 9, IE по умолчанию поддерживает метод просмотра root. Таким образом, это не способ поддержки всех браузеров, а всего лишь способ поддержки IE <9. Положитесь на (теперь уже стандартный) метод 'поместить в корень' или, если вы настаиваете, добавьте: <link rel = "icon" href = "/ favicon.ico"> (Хотя это тоже не стандартно)
HappyMe 08
7
Механизм favicon определенно эволюционировал с годами. Я заметил, что сегодня в спецификации MDN говорится: тип ссылки часто отображается перед значком, но этот тип ссылки не соответствует требованиям, игнорируется, и веб-авторы не должны его больше использовать. <link ref="icon" ...><link ref="shortcut icon" ...>
Имеется в
1
Спасибо @ broc.seib за отзыв. Во время написания этого комментария я не понимал, почему это был «ярлык», а не «значок». Конечно, Mozilla имеет право голоса в этой истории. Но мы не должны забывать, почему это объявление здесь в первую очередь: для поддержки устаревших браузеров, таких как IE 8. В большинстве последних браузеров используются значки PNG, которые чище и легче, чем ICO. Мой план для RealFavicon - полностью удалить это объявление. Перед этим мне нужно запустить тесты в IE 7, 8 и 9.
philippe_b
Не говоря уже о том, что если вы «просматриваете исходный код» на этой странице, в Stack Overflow, ref="shortcut icon"это именно то, что они используют.
Стивен Вентимилья,
1
@laggingreflex /favicon.ico- предпочтительный метод. Это то, что вы получаете при посещении www.google.com. Тем не менее, вы можете не захотеть засорять свой корневой каталог значком. В этом случае разметка работает нормально.
philippe_b
2
  1. вы можете работать с этим сайтом для создания favin.ico
  2. Я рекомендую использовать формат .ico, потому что png не работает с методом 1, а ico может содержать более подробную информацию!
  3. оба метода работают со всеми браузерами, но когда он работает автоматически, что вы хотите ввести для него код? поэтому я думаю, что метод 1 лучше.
a828h
источник
2

Я использовал https://iconifier.net. Я загрузил свое изображение, загрузил zip-файл изображений, добавил изображения на свой сервер, следовал указаниям на сайте, включая добавление ссылок на мой index.html, и это сработало. Мой значок теперь отображается на моем iPhone в Safari при нажатии кнопки «Добавить на главный экран».

Hblegg
источник