Разработка полного набора favicon и touch-иконок для сайта и PWA

Почему неполный favicon набор даёт заглушку на части устройств

Поисковик, браузер и мобильная система запрашивают иконку сайта не «вообще», а по конкретному адресу, в конкретном размере и с определёнными требованиями к фону. Если файла по этому адресу нет, движок не пытается аккуратно масштабировать то, что нашёл, — он подставляет системную заглушку. На десктопе это серый лист на вкладке, в результатах поиска — нейтральный глобус, и заметно это далеко не сразу.

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

Отдельная проблема — масштаб. Логотип, нарисованный для широкого баннера, в маленьком квадрате превращается в нечитаемый знак: тонкие линии сливаются, подпись исчезает, остаётся цветное пятно. Иконка домашнего экрана в таком виде не узнаётся, и человек, который уже открывал сайт, не связывает плитку с брендом — в лучшем случае не нажимает, в худшем считает её мусором.

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

Что даёт единый набор иконок: эффект на выпуск и поддержку

Единый источник иконок вместо ручной выгрузки комплекта

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

Правки после публикации не ждут ближайшего выпуска

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

Обращения в поддержку про «пропавшую» иконку уходят

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

Полный favicon набор: варианты реализации и их ограничения

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

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

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

Порядок работ: от аудита иконок до передачи регламента

Набор иконок — не один файл в корне, а согласованный комплект: разметка в head, манифест веб-приложения, иконки для вкладок, ярлыков, истории браузера и домашних экранов. Собирать его вручную при каждой правке логотипа — верный способ получить рассинхрон: где-то старый знак, где-то обрезанные поля. Поэтому идём фиксированным порядком — от аудита иконок до передачи регламента.

1. Аудит иконок. Инвентаризация: что лежит в корне, что подтягивает манифест, какие адреса отдают ошибку, где дубли, как знак показывают текущий шаблон и мобильная версия.
2. Схема состава набора. Согласуем таблицу «носитель — формат — размер — назначение»: вкладка, закладка, ярлык, домашний экран, установленное приложение. Таблица работает договором: ничего лишнего, ничего забытого.
3. Подготовка основы. Сводим знак к векторному исходнику, задаём сетку и безопасную зону под обрезку маской. Отдельно — версия для тёмной темы и упрощённый знак для мелких размеров, где детали сливаются.
4. Сборка. Иконки генерируются из одного исходника в конвейере сборки, имена получают хеш, разметка и манифест обновляются автоматически. Правка логотипа перестаёт быть ручной операцией на десяток файлов.
5. Проверка на устройствах. Смотрим на живых телефонах, планшетах и в настольных браузерах: добавление на домашний экран, установка приложения, поведение при обновлении. Отдельно проверяем кеш и сброс версии на стороне раздачи — иначе старая иконка живёт у пользователя месяцами.
6. Передача регламента. Отдаём документ: где исходник, как добавить размер, кто владелец, что входит в перечень проверок релиза. Прогоняем его с командой заказчика, чтобы следующее обновление знака проходило без нас.

Артефакты проекта: исходники, готовые наборы и документация

У заказчика остаётся не архив картинок, а рабочий комплект, из которого собирается любой размер знака и обновляется без нас. Файлы лежат в репозитории рядом с кодом — иконки меняются тем же коммитом, что и вёрстка.

• Мастер-источник знака — векторный файл с разделёнными слоями, заданным охранным полем и отдельными версиями под светлый фон, тёмный фон и монохром. Из него собирается любой размер без потери качества.
• Готовые наборы под платформы — SVG для современных браузеров, контейнер с несколькими растровыми размерами для старых, PNG-комплект для ярлыка на iOS и maskable-версия с запасом по краям для Android.
• Файл описания веб-приложения — заполненный манифест: полное и короткое имя, цвета темы и фона, режим отображения, стартовый адрес и перечень иконок. Отсюда система берёт данные при установке на домашний экран.
• Блок разметки для подключения — готовые строки ссылок на иконки и цвета темы; вставка в шаблон сводится к копированию, без ручного подбора размеров.
• Регламент обновления — где лежит мастер, как пересобрать наборы, как сбросить кеш браузеров и мессенджеров, что проверить после публикации.
• Чек-лист приёмки — перечень мест, где смотрим результат: вкладка, закладки, ярлык на домашнем экране, превью при отправке ссылки.
• Запись в документации проекта — кто отвечает за иконки и в какой момент их пересматривают при смене фирменного стиля.

Комплект рассчитан на то, что дальше команда работает с ним сама: замена знака занимает минуты и не требует пересборки сайта.

Кейс: плитка сайта перестала подменяться системной заглушкой

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

Мы свели генерацию к одной сборке: векторный мастер прогоняется через RealFaviconGenerator и собственный скрипт, на выходе полный комплект — устаревший ICO, растровые размеры для закладок и ярлыков, отдельная ветка с прозрачными полями под маскировку системой, крупная иконка для домашнего экрана и монохром под тёмную тему. Во всех разметках один и тот же блок обязательных ссылок, в манифесте прописаны назначение и цвет темы, а имена файлов содержат хеш содержимого — ни кэш, ни сеть доставки не отдают прежнюю версию.

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

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

Что делать, если сайт уже добавлен на домашние экраны?

Закреплённая иконка не запрашивается у сайта при каждом открытии: система забирает файл в момент добавления и держит локальную копию. Поэтому замена картинки по тому же пути проявится не у всех — часть устройств останется со старым образом. Рабочий приём — версионировать имена: icon-192-v2.png вместо перезаписи icon-192.png, а прежние файлы оставлять доступными.

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

Сохранение установок обеспечивает неизменность идентичности приложения — происхождение сайта, start_url, scope и id в манифесте. Смена любого из этих полей означает для системы другое приложение: пользователь теряет и ярлык, и сохранённые установки. Старые файлы иконок при этом остаются на месте — 404 по прежнему пути ломает обновление уже установленных ярлыков.

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

Типовые сомнения по иконкам, кэшу и установке приложения

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

Как быстро обновится иконка после правки знака?

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

Почему маленький знак рисуют отдельно?

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

Что набор добавляет к разметке страницы?

Несколько ссылок в шапке документа и файл-описатель. На вес и скорость загрузки они не влияют: система и браузер запрашивают нужный размер по требованию, а не вместе с документом. Разметка остаётся валидной, лишних запросов при обычном просмотре не появляется.

Обсудим задачу: какие исходники прислать для оценки

Чтобы вернуться с оценкой состава набора и планом работ, а не с чередой уточняющих вопросов, достаточно одного сообщения. Ниже — минимум, по которому мы уже видим объём и можем назвать сроки.

• адрес сайта или тестового стенда — посмотрим, какие иконки отдаются сейчас в браузере, закладках и на телефоне;
• логотип в векторе (SVG, AI или PDF); если вектора нет — растровый исходник в максимально возможном разрешении, чтобы мы сами собрали контуры;
• текущий набор: что уже лежит в корне и подключено в разметке, включая старые форматы вроде ICO, и что из этого вы хотите сохранить;
• требования бренда: фирменные цвета, охранное поле вокруг знака, минимальный размер, на котором логотип ещё узнаваем, и брендбук, если он есть;
• перечень мест, где набор обязан работать: вкладка браузера, закладки, ярлык на рабочем столе, домашний экран телефона, превью ссылки в мессенджере;
• референс — пара примеров иконок, которые вам нравятся по подаче, или прямая ссылка на то, как делать не нужно;
• ограничения по площадке: куда есть доступ — к разметке, теме, корню домена, — и есть ли тёмная тема интерфейса, для которой нужен отдельный вариант.

Этого хватит, чтобы мы вернулись с составом набора, списком форматов и размеров, планом работ и сроками сборки. Опишите задачу — обсудим.