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

Вопрос

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

5 ответов

Решение

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

  • Время, которое вы можете потратить на эту задачу. Для многих это "как можно быстрее".
  • Усилия, которые вы готовы приложить. Например, нарисовать иконку 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см. выше.
  • Значок PNG 192x192 для 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">

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

Источник

Поскольку значок SVG получает поддержку в основных браузерах , другим вариантом будет переключение на SVG:

      <link rel="icon" sizes="any" type="image/svg+xml" href="favicon.svg">

Значок Base64 SVG, закодированный с помощью этого онлайн-инструмента :

      <link rel="icon" sizes="any" type="image/svg+xml" href="data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f5e400' d='m6 21 2-7-6-5h7l3-7 3 7h7l-6 5 2 7-6-4z'/%3E%3C/svg%3E%0A">

В этой статье объясняются некоторые преимущества перехода на SVG; в первую очередь:

  • Ориентация на будущее (гарантия того, что наш значок будет четким на будущих устройствах)
  • Поддержка темного режима

Этот пост дает хороший ответ, безопасно ли и где использовать SVG-изображение для значка.

Такие сайты, как GitHub, используют значки SVG.

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

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

Источник

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

<link rel="shortcut icon" href="img/icon.gif" />

Это происходит на некоторых страницах. Эффект движущегося значка делает карту этого веб-сайта отличной от других карт. К сожалению, это поведение и это свойство не гарантируется ни одним из браузеров. Даже Firefox, на котором я наблюдал это однажды, на второй день отображал стандартную пустую иконку вместо GIF для той же страницы.

Источник
Другие вопросы по тегам