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

"/favicon.ico" vs <link rel= "значок ярлыка" /">

Вопрос

  • Какова наилучшая практика создания favicon на веб-сайте?
  • и является .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" />
4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

Если вы хотите сделать работу хорошо и быстро, вы можете использовать генератор favicon. Это создает фотографии и 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">

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

Ответ 2

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