Как создать favicon для сайта

Favicon — это маленькая иконка во вкладке браузера, на панели закладок, в истории, на домашнем экране iPhone и рядом с названием сайта в результатах поиска. Часто это единственный элемент вашего бренда, который видит посетитель, когда у него открыто двадцать вкладок. Раньше, чтобы сделать её правильно, приходилось жонглировать десятком размеров. Сегодня горстка файлов покрывает все платформы, которые имеют значение.

В этом гайде — что нужно подготовить, как нарисовать иконку, которая выживет в 16 пикселях, как её установить и как разобраться с самыми частыми проблемами.

Файлы, которые нужны современному сайту

• favicon.ico с изображениями 16, 32 и 48 px. Браузеры сами запрашивают /favicon.ico даже без всякого HTML, Windows использует его для ярлыков, и это самый надёжный запасной вариант.
• apple-touch-icon.png размером 180×180. Используется, когда сайт добавляют на домашний экран iPhone или iPad.
• icon-192.png и icon-512.png. Иконки для домашнего экрана Android и заставки установленного веб-приложения.
• site.webmanifest. Небольшой JSON-файл, который указывает на две иконки для Android и, если вы хотите, чтобы сайт можно было установить, описывает его.
• По желанию — icon.svg. Одна векторная иконка, которую браузеры с поддержкой SVG-favicon отрисовывают чётко в любом размере и которая может менять цвета для тёмной темы.

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

Сгенерируйте набор из одного логотипа

1. Подготовьте квадратный исходник. Идеально — SVG; иначе PNG не меньше 512×512.
2. Откройте «Генератор favicon» и перетащите файл. Принимаются PNG, JPG, WebP и SVG до 20 МБ.
3. Скачайте ZIP. В нём favicon.ico (внутри 16, 32 и 48 px), apple-touch-icon.png, icon-192.png, icon-512.png и site.webmanifest.
4. Скопируйте файлы в корень сайта, рядом с главной страницей.

Каждый размер отрисовывается прямо из оригинала, так что SVG растеризуется в 16 px напрямую, а не уменьшается из большого растра. Отрисовка происходит в вашем браузере; логотип никуда не загружается. Неквадратный исходник масштабируется так, чтобы поместиться, и центрируется, а по коротким сторонам остаётся прозрачное поле.

icon.svg генератор не создаёт. Если вам нужен SVG-favicon, скопируйте свой SVG-логотип в корень сайта под этим именем.

Добавьте HTML

Вставьте эти строки в <head> каждой страницы или в общий шаблон макета:

<link rel="icon" href="/favicon.ico" sizes="32x32">

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

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="manifest" href="/site.webmanifest">

Строку с SVG пропустите, если такого файла нет. Атрибут sizes="32x32" в строке с ICO важен, когда есть SVG: он не даёт некоторым браузерам предпочесть ICO более чёткому SVG.

В сгенерированном манифесте иконки указаны с абсолютными путями вроде /icon-192.png. Если ваш сайт находится не в корне домена, а в подпапке, поправьте эти пути.

Как нарисовать иконку, которая выживет в 16 пикселях

В 16×16 всего 256 пикселей. Никакие настройки экспорта не спасут дизайн, которому нужно больше.

• Используйте знак, а не логотип целиком. Одну букву, монограмму или символ без надписи. Ниже 32 px слова превращаются в серое пятно.
• Толстые формы, мало цветов. Линии тоньше примерно 1/16 ширины иконки пропадают в самом маленьком размере. Лучше всего читаются два цвета с сильным контрастом.
• Заполните квадрат. Обрежьте пустые поля в исходнике. Логотип, плавающий в прозрачном пространстве, во вкладке окажется крошечным.
• Проверьте обе темы вкладок. Панель вкладок бывает светлой и тёмной. Чёрный знак на прозрачном фоне исчезает в тёмной теме. Сплошная цветная фигура под знаком, например квадрат со скруглёнными углами, работает в обеих.

Если логотип широкий, обрежьте его до символа в «Обрезать изображение онлайн» с пропорциями 1:1 перед генерацией. Если растровый логотип есть только в маленьком размере, увеличение в «Увеличить изображение с помощью ИИ» даст иконке 512 px более чистые края, чем простое растягивание.

Тёмная тема и SVG-favicon

SVG-favicon может содержать CSS-медиазапрос prefers-color-scheme: dark и менять цвет заливки, когда браузер использует тёмную тему. Это самое чистое решение для тёмного знака, который пропадает на тёмных вкладках. Оставьте ICO как запасной вариант, потому что SVG-favicon используют не все браузеры.

Нужны PNG других размеров

Некоторые платформы, плагины и магазины приложений просят конкретный размер PNG, которого нет в наборе. «Конвертировать SVG в PNG онлайн» отрисует векторный логотип с любой указанной шириной на прозрачном фоне.

Особенности платформ, которые стоит знать

Домашний экран iPhone

iOS не отображает прозрачность на иконках домашнего экрана: прозрачные области заливаются, обычно чёрным, а углы система скругляет сама. Поскольку генератор сохраняет прозрачность, для Apple touch icon используйте исходник со сплошным цветным фоном. Не скругляйте углы самостоятельно.

Android и устанавливаемые сайты

Лаунчеры Android могут обрезать иконки в круг или другую форму. Чтобы сайт можно было установить как приложение, откройте site.webmanifest в текстовом редакторе и добавьте как минимум name, short_name, start_url, display (например, standalone) и theme_color. Если вы помечаете иконку как "purpose": "maskable", держите важную часть рисунка в центральных 80% квадрата, потому что края могут обрезаться.

Результаты поиска

Google показывает иконку сайта рядом с результатами. Его рекомендации требуют квадратную иконку размером, кратным 48 px, на которую ссылается главная страница и которая доступна для сканирования. Подходят и слой 48 px в ICO, и PNG на 192 px. Изменения в выдаче могут появиться только через дни или недели, потому что иконка обновляется при повторном сканировании главной страницы.

Решение проблем

• Продолжает показываться старый favicon. Браузеры агрессивно кэшируют favicon, отдельно от страницы. Откройте /favicon.ico напрямую и перезагрузите его или добавьте к ссылкам на иконки параметр версии вроде ?v=2.
• Иконка пустая или битая. Откройте URL каждого файла в браузере. Ошибка 404 обычно означает, что файлы попали в подпапку, а не в корень сайта, или что серверу нужно указать правильный тип для .webmanifest.
• Иконка во вкладке размытая. Версии 16 и 32 px сделаны из слишком детализированного исходника. Подготовьте упрощённый вариант для маленьких размеров.
• Чёрный квадрат на домашнем экране iPhone. У исходника был прозрачный фон. Сгенерируйте набор заново из версии со сплошным фоном.
• Тонкая полоска посередине квадрата. Исходником была широкая надпись. Сначала обрежьте до символа.

Чек-лист

1. Упростите логотип до знака, который читается в 16 px и работает на светлых и тёмных вкладках.
2. Сделайте его квадратным — в идеале в SVG, иначе PNG от 512×512.
3. Сгенерируйте набор и скопируйте все файлы в корень сайта.
4. Добавьте в head четыре тега link, причём icon.svg — только если он у вас есть.
5. Дополните манифест, если сайт должен устанавливаться.
6. Проверьте URL каждого файла напрямую, затем протестируйте на домашнем экране телефона.