Как сделать favicon: конвертация PNG в ICO

Favicon — маленькая иконка во вкладке браузера, закладках и результатах поиска. Отсутствующий или битый favicon делает сайт незавершённым, а Google теперь показывает favicon рядом с результатами мобильного поиска — так что он напрямую влияет на клики.

Почему ICO, а не просто PNG?

Современные браузеры принимают favicon в PNG, но классический favicon.ico — по-прежнему самый надёжный вариант: именно его браузеры запрашивают по умолчанию по адресу /favicon.ico, его ждут старые браузеры и часть инструментов, а контейнер ICO может хранить несколько разрешений в одном файле.

Делаем ICO из логотипа

Подготовьте квадратный PNG логотипа, лучше 256×256 или больше, с прозрачностью.
Откройте конвертер PNG в ICO и загрузите его.
Нажмите «Конвертировать» — получится ICO 256×256 (с PNG-сжатием, современный формат Vista+, который чисто масштабируется вниз).
Положите файл в корень сайта как favicon.ico.

HTML-разметка

Для полного покрытия добавьте в <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> (PNG 180×180 для iOS)

Советы по дизайну

Проверьте вид в 16×16: мелкие детали исчезают, выигрывают жирные простые формы.
Держите контраст и на светлой, и на тёмной теме браузера.
Прозрачность выглядит лучше белой подложки.

Действительно ли нужно несколько размеров в одном ICO?

Одного ICO 256×256 со сжатием PNG достаточно для современных браузеров: они чисто уменьшают его для вкладки и панели закладок. Добавление в тот же ICO дополнительных размеров (16×16, 32×32, 48×48) в основном помогает старому софту Windows и панели задач на рабочем столе, где вручную подогнанная маленькая иконка выглядит чётче, чем автоматически уменьшенная. Если сайт чисто веб-ориентирован, единственный файл 256×256 — более простой и не менее эффективный выбор.

Частые ошибки с favicon

Забыть про файл вообще. Браузеры автоматически запрашивают /favicon.ico, даже без тега link, поэтому отсутствующий файл отображается как ошибка 404 в логах сервера при каждой загрузке страницы.
Использовать прямоугольный логотип без изменений. Широкий текстовый логотип, сжатый в квадратный favicon, обычно становится нечитаемым; лучше обрезать до самого знака или инициалов.
Пропустить apple-touch-icon. Без него сохранение сайта на домашний экран iPhone падает до скриншота страницы вместо вашей иконки.
Кэширование. Браузеры агрессивно кэшируют favicon; после замены файла часто нужна жёсткая перезагрузка или прямой заход на URL иконки, чтобы увидеть обновление.

Поскольку браузеры запрашивают /favicon.ico автоматически при каждой загрузке страницы независимо от ссылки на него, стоит перепроверить, что файл действительно лежит в корне сайта, а не в подпапке, — favicon в любом другом месте молча никогда не подхватится этим автоматическим запросом.

Favicon для одностраничных приложений и поддоменов

В SPA-приложениях на React, Vue или подобных фреймворках favicon задаётся один раз в корневом HTML-шаблоне и не меняется при переходах между разделами — в отличие от заголовка страницы, для него не нужна отдельная логика на каждый роут. Для поддоменов файл нужен на каждом отдельно, поскольку браузер запрашивает /favicon.ico относительно текущего домена, а не сайта в целом.