Настройка фавикона сайта: форматы и теги

Примеры фавиконов разных форматов.

Быстрые ссылки

Как использовать фавикон
Стандартные теги для favicon
PNG фавиконы
Apple Touch Icon
Значок для Safari и Touch Bar
Плитки Windows 10 (Metro Tiles)
Как не хранить файлы в корне веб‑сервера

Что такое фавикон и зачем он нужен

Фавикон — это маленькая иконка сайта, которая помогает пользователям быстро идентифицировать вкладку, приложение или ярлык. Она появляется в:

строке вкладок браузера;
списке закладок/избранного;
на домашнем экране мобильных устройств при добавлении ссылки;
в панели приложений и при закреплении на рабочем столе ОС.

Краткое определение: фавикон — это отдельный файл изображения, связанный с вашим сайтом через теги или автоматический поиск браузера.

Как использовать фавикон

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

Не обязательно включать 20 различных файлов для каждой «официальной» версии. Достаточно одного favicon.ico и пары высокоразрешённых PNG. Если хотите полную совместимость — добавьте остальные.

Генерация: можно создать фавикон вручную в редакторе изображений, но удобнее использовать генератор фавиконов. Он создаст набор файлов и предложит список и тегов для .

Если вы используете управляемый хостинг (например, конструктор сайтов), уточните у провайдера, как загружать фавикон — часто они берут файлы на себя.

Стандартные теги для favicon

Классический формат — файл favicon.ico. Минимальный размер 16×16, но ICO может содержать несколько разрешений (16×16, 32×32, 48×48 и т.д.). Часто favicon.ico размещают в корне сайта рядом с index.html.

Пример тега:

Тег не обязателен: браузеры обычно сами запрашивают /favicon.ico. Но явная ссылка повышает надёжность и контроль.

Если фавикон не отображается, проверьте:

доступность по URL: http://www.yourwebsite.com/favicon.ico
корректность изображения в браузере
права доступа на сервере (пример для Unix):

sudo chmod +r favicon.ico

Это даст право на чтение для веб‑сервера.

PNG фавиконы

Современные браузеры поддерживают высокоразрешённые PNG‑иконки. Они применимы в Chrome, Android, новых вкладках и других местах, где требуется масштабируемость.

Вы можете добавить PNG в дополнение к favicon.ico. Браузер выберет лучшее соответствие.

Примеры тегов:

Генераторы создают также android-chrome-512x512.png. Chrome на Android автоматически проверит доступные ресурсы; иногда он использует Apple Touch Icon как запасной вариант. Если хотите — подключите PNG в любом размере:

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

Apple Touch Icon

Иконки Apple Touch в разных разрешениях.

Это иконка, которая используется, когда пользователь добавляет сайт на домашний экран iOS. Для Retina‑устройств нужен высокий DPI, иначе иконка будет выглядеть размыто.

Текущая рекомендация для современных Retina iPhone — 180×180 пикселей. Подключение:

iOS сам уменьшит более крупные изображения. Большинство браузеров по умолчанию проверяют /apple-touch-icon.png, так что явный тег необязателен, но желателен.

Значок для Safari и Touch Bar

Пример закреплённой вкладки и иконки для Touch Bar.

Safari поддерживает векторные «mask»‑иконки для закреплённых вкладок и Touch Bar. Это монохромный SVG с указанием цветового акцента. Safari не ищет этот файл автоматически — нужно добавить тег вручную.

Пример:

SVG должен быть простой векторной маской. Если вектор сложный, результат может отличаться.

Плитки Windows 10 (Metro Tiles)

Плитка сайта в меню «Пуск» Windows 10.

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

Основные теги:

Файл browserconfig.xml описывает доступные размеры плиток и цвета. Пример простого файла:

Файл mstile-150x150.png должен находиться в корне сайта.

Как не хранить файлы в корне веб‑сервера

Если вы не хотите размещать файлы в корне, можно настроить редирект или конфигурацию сервера. Пример для nginx:

location = /favicon.ico {
  root /new/images/path;
}

Это заставит nginx искать файл в /new/images/path. Клиент всё равно будет запрашивать /favicon.ico, поэтому в HTML лучше оставить ссылки, как будто файл находится в корне.

Методика создания и внедрения фавикона (мини‑план)

Подготовьте исходный логотип в векторе (SVG) или в большом растровом размере (≥1024px).
Сгенерируйте набор файлов через favicon generator или вручную экспортируйте PNG/SVG/ICO в нужных размерах.
Разместите файлы на сервере. Стандартные пути: /favicon.ico, /favicon-32x32.png, /apple-touch-icon.png.
Вставьте в страницу необходимые и теги.
Протестируйте в браузерах: Chrome, Safari, Firefox, Edge, iOS и Android.
Проверьте доступность URL и кеширование (очистите кеш браузера или используйте приватное окно).

Чек‑лист по ролям

Разработчик

разместить файлы в публичной директории;
добавить теги в ;
проверить MIME‑типы и CORS (при необходимости);
убедиться в правах на чтение.

Девопс / Системный администратор

убедиться в правильной конфигурации сервера (root, location, redirects);
настроить кэширование и заголовки Cache‑Control;
проверить доступность файлов извне;
предоставить права на чтение (chmod).

Маркетолог / Дизайнер

подготовить иконки в векторе и PNG 1×, 2×, 3×;
проверить визуальную читаемость на тёмных/светлых фонах;
согласовать цвет фона плитки и theme‑color.

Отладка: когда фавикон не работает

Причины и решения:

Файл недоступен по URL — проверьте прямой доступ в браузере.
Неправильный путь в теге — используйте абсолютный или корректный относительный путь.
Ошибки прав файлов — исправьте chmod, чтобы веб‑сервер читал файл.
Агрессивное кэширование браузера — очистите кэш или откройте приватное окно.
Неподдерживаемый формат/повреждён файл — пересоздайте и протестируйте.
CDN или прокси переписывают пути — проверьте конфигурацию CDN.

Полезный приём: временно переименуйте favicon и обновите ссылку — это гарантирует, что браузер загрузит новый ресурс.

Таблица совместимости форматов (кратко)

ICO: поддержка в большинстве браузеров, удобен для мультиразрешений.
PNG: хорош для высоких разрешений и современных браузеров.
SVG: идеален для масштабирования, но не все браузеры поддерживают SVG как favicon повсеместно.
Apple Touch Icon (PNG): нужен для iOS домашнего экрана.
mask-icon (SVG): для Safari и macOS Touch Bar.
mstile (PNG + browserconfig.xml): для Windows плиток.

Примеры сниппетов для вставки в

Примеры, когда не стоит гоняться за всеми форматами

Лэндинг с малым трафиком: достаточно favicon.ico и 1 PNG;
Внутренний инструмент (интранет): можно ограничиться одним форматом;
Если дизайн минималистичен, SVG‑маски и цветовые вариации не обязательны.

Критерии приёмки

favicon.ico открывается по /favicon.ico и корректно отображается в браузере;
в присутствуют необходимые теги для целевых платформ;
иконка одинаково читаема на светлом и тёмном фоне;
файл(ы) доступны по прямым URL и имеют права на чтение;
проверено в основных браузерах и на iOS/Android.

Краткое резюме

Фавикон — простой, но важный элемент брендинга сайта. Начните с favicon.ico и одного высокого разрешения PNG. Добавляйте apple‑touch, mask‑icon и msapplication только при реальной необходимости. Всегда проверяйте доступность файлов и очищайте кэш браузера при тестировании.

Важное: если вы обновили фавикон и не видите изменений, сначала очистите кеш браузера или откройте страницу в приватном окне.