logo

Как добавить иконку вкладки браузера (favicon) на сайт

Быстрый ответ

Чтобы добавить иконку вкладки на вашем сайте, поставьте следующий HTML-код в секцию <head>:

HTML
Скопировать код
<link rel="icon" href="/favicon.ico" type="image/x-icon">

Для увеличения совместимости можно использовать иконку в формате PNG:

HTML
Скопировать код
<link rel="icon" href="/favicon.png" type="image/png">

Не забудьте правильно указать путь к иконке. Если она расположена на вашем сервере, здесь нет необходимости в цельном URL.

Подробное руководство по favicon

Работа с favicon требует бережного обращения с деталями. Займёмся гарантированием совместимости на разных платформах и оптимизацией нашего сайта для достижения наивысшей степени корректности.

Овладение форматами и размерами

Favicon должен быть представлен в разных форматах, чтобы удовлетворять требования различных устройств и браузеров:

HTML
Скопировать код
<link rel="icon" sizes="32x32" href="/favicon-32x32.png">

Формат ICO — это старый проверенный временем стандарт, в то время как PNG хорош для современных браузеров и поддерживает прозрачность.

Генераторы favicon помогут вам автоматически создать необходимые размеры и форматы.

Особенности Apple и Microsoft

Не забыть о пользователях Apple и Microsoft, добавив соответствующие настройки:

HTML
Скопировать код
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Android и Chrome

Также стоит учесть пользовательские настройки для Android и Chrome:

HTML
Скопировать код
<link rel="manifest" href="/manifest.json">

В файле manifest.json укажите иконки и цвета приложений для обеспечения единообразия интерфейса.

Преимущества SVG

Иконки SVG — это эффективный и гибкий инструмент:

HTML
Скопировать код
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Они предоставляют великолепные возможности для масштабирования и стилизации, однако требуют тщательной проверки на перформанс.

Выжимаем максимум из favicon

Добавьте browserconfig.xml для Windows и оптимизируйте файл .htaccess для кеширования и сжатия favicon.

Визуализация

Favicon — это ваш виртуальный знак, обозначающий присутствие вашего сайта в интернете.

  1. Создайте иконку: favicon.ico.
  2. Разместите её в корневой директории сайта.
  3. Вставьте ссылку в <head>: <link rel="icon" href="/favicon.ico">.

В результате каждая вкладка браузера будет отражать ваш бренд.

Отображение: 🏳️‍🟨

Стратегия favicon для разных устройств

Учтите требования разных браузеров и устройств для улучшения идентифицируемости вашего сайта.

Укрощение браузеров

Для гарантированной работы на разных платформах необходимо использовать специфические настройки, как в следующем примере:

xml
Скопировать код
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/smalltile.png"/>
      <square150x150logo src="/mediumtile.png"/>
      <wide310x150logo src="/widetile.png"/>
      <square310x310logo src="/largetile.png"/>
      <TileColor>#FFFFFF</TileColor>
    </tile>
  </msapplication>
</browserconfig>

А также не забыть о статус-баре на iOS и тематическом цвете для Chrome:

HTML
Скопировать код
<meta name="apple-mobile-web-app-status-bar-style" content="#000000">
<meta name="theme-color" content="#ffffff">

Согласованность и производительность

Важно гарантировать безотказную работу вашего favicon на всех платформах. Используйте сервисы вроде Can I Use, чтобы проверить совместимость форматов.

Полезные материалы

  1. Как добавить favicon в HTML — W3Schools объясняет процедуру добавления favicon.
  2. HTML атрибут: rel – HTML: Гипертекстовый язык разметки | MDN — MDN предоставляет руководство по атрибуту rel.
  3. Favicons, Touch Icons, Tile Icons и так далее. Что вам нужно? | CSS-Tricks — CSS-Tricks освещает вопрос выбора иконок.
  4. Генератор favicon для совершенства — Инструмент для создания иконок, оптимизированных под браузеры.
  5. Могу ли я использовать... Таблицы поддержки для HTML5, CSS3 и т. д. — Таблицы совместимости для использования SVG в качестве favicon.
  6. Генератор favicon и иконок приложений — Инструмент для генерации favicon и иконок приложений.
  7. GitHub – audreyfeldroy/favicon-cheat-sheet — Шпаргалка по размерам и типам favicon для проектов на GitHub.