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

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

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

Чтобы добавить иконку вкладки на вашем сайте, поставьте следующий 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 — это ваш виртуальный знак, обозначающий присутствие вашего сайта в интернете.

Создайте иконку: favicon.ico.
Разместите её в корневой директории сайта.
Вставьте ссылку в <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, чтобы проверить совместимость форматов.

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

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