Как сделать фавиконку без мыла на Retina-экранах

Раньше одного маленького favicon.ico хватало для всего сайта. Уже много лет это не так, и поэтому столько иконок выглядят размытыми.

Автор: PulsarKit · Опубликовано 8 сентября 2026 г. · Обновлено 16 октября 2026 г.

Один маленький файл иконки никогда не покрывал все экраны

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

Почему полноценный набор иконок состоит из нескольких файлов

Хороший набор иконок, вроде того, что собирает из одной картинки «Favicon», закрывает сразу несколько задач, а не хранит одни и те же пиксели в разных размерах. В него входят PNG 16 и 32 пикселя для вкладок браузера при обычной и высокой плотности пикселей, иконка 180 пикселей специально для добавления сайта на домашний экран iPhone, а также иконки 192 и 512 пикселей, ссылки на которые обязаны быть в манифесте прогрессивного веб-приложения, чтобы его вообще можно было установить. Каждый размер существует потому, что его требует конкретная часть интерфейса. Это не лишние копии ради копий: пропустите одну из иконок, и в этом месте появится размытая подстановка или не будет иконки вовсе.

Единственный файл, который нельзя оставлять с прозрачным фоном

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

Почему векторный исходник дает более четкую иконку 16×16

Логотип в виде SVG (плоский растровый логотип можно перевести в вектор в «PNG в SVG») можно отрисовать заново в каждом нужном размере прямо из векторных форм, а не один раз сделать большую картинку и затем многократно уменьшать ее для всех меньших вариантов. Эта разница сильнее всего заметна на самом маленьком размере в наборе. Логотип, уменьшенный из одной большой растровой версии, на 16 пикселях обычно превращается в кашу: тонкие линии и мелкие детали исчезают. А вариант, который отрисовали из векторных контуров сразу в таком маленьком размере, сохраняет четкие штрихи. Он никогда не был большой картинкой, сжатой до маленькой: его с самого начала нарисовали под этот размер. Поэтому и отдельную иконку лучше отрисовать в «SVG в PNG» сразу в нужных пикселях, а не уменьшать редактором картинок.

Зачем нужна maskable-иконка и почему Android игнорирует форму

Android обрезает иконку установленного приложения под любую форму, которую выбрало конкретное устройство или лаунчер: круг, скругленный квадрат, «сквиркл» и т.п. На фактическую форму исходной иконки он не смотрит, поэтому у обычного квадратного значка важные элементы по краям могут оказаться срезанными. Все зависит от того, какая маска применена. Maskable-иконка решает эту проблему: вся важная часть дизайна располагается примерно в центральных восьмидесяти процентах изображения, а по краям остается безопасное поле. Его можно свободно обрезать любой формой, не потеряв ничего значимого из содержимого иконки.

Частые ошибки: маленький исходник и набор, который так и не подключили

Генератор редко бывает причиной размытого набора иконок. Все размеры строятся из мастер-картинки 512 пикселей, поэтому любой исходник меньше нее растягивается, а исходник меньше примерно 260 пикселей приходится увеличивать вдвое и больше, и крупные размеры получаются мягкими. Начинайте минимум с 512 на 512, а лучше с SVG; исходник меньше 32 пикселей отклоняется сразу. Второе решение: как неквадратный логотип становится квадратом. Обрезка по центру оставляет знак крупным, но может срезать широкую текстовую часть, а вписывание картинки целиком с заливкой полей цветом сохраняет все видимым ценой уменьшения знака. Для логотипа, который заметно шире, чем выше, квадратная версия с одним символом обычно лучший исходник, чем полная композиция. Третья ошибка случается уже после генерации. Восемь файлов, девять с maskable-иконкой, кладутся в корень сайта, а теги из head-snippet.html — в head каждой страницы; если файлы лежат в подпапке, поправьте под нее значения href в сниппете, иначе теги будут указывать на файлы, которых там нет. И наконец, проверяйте иконку 16 пикселей в настоящей вкладке браузера, а не в просмотрщике картинок: в таком размере тонкий контур или надпись превращаются в серое пятно, и лечится это более простым знаком, а не более резким экспортом.

Инструменты из этой статьи

FaviconПревратите один логотип в полный набор фавиконок: все нужные PNG-размеры, многослойный ICO, manifest и готовые HTML-теги для вставки в head.

PNG в SVGТрассируйте PNG в масштабируемый SVG прямо в браузере. Подходит для логотипов и плоских иконок с несколькими цветами, а не для фотографий.

SVG в PNGКонвертируйте SVG в PNG с любым масштабом или точным размером в пикселях прямо в браузере. Скрипты и внешние ссылки удаляются до начала отрисовки.