"/фавикон.МБО" против

вопрос

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

Способ 1

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

Способ 2

HTML-тег в :

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
3 66
html html5 favicon

3 ответа:

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

  • времени вы можете потратить на эту задачу. Для многих людей, это "как можно быстрее".
  • усилия, которые вы готовы сделать. Например, рисование значка 16x16 вручную для достижения лучших результатов.
  • конкретные ограничения, такие как поддержка определенного браузера с нечетными спецификациями.

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

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

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

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

как вы предложите, вы можете создать 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 см. выше.
  • 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">

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

112
  1. вы можете работать с этим сайтом для создания favin.ico
  2. Я рекомендую использовать .формат ico, потому что png не работает с методом 1, и ico может иметь более подробную информацию!
  3. оба метода работают со всеми браузерами, но когда он автоматически работает, что вы хотите ввести код для него? поэтому я думаю, что метод 1 лучше.
2

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

2