Сделать favicon для сайта

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

Перетащите файлы сюда

.png, .jpg, .jpeg, .webp, .svg · до 20 МБ

Выберите файлы

Как сделать favicon для сайта

1
Добавьте логотип
PNG, JPG, WebP или SVG, до 20 МБ. Лучше всего подходит квадратное изображение, но любой формат пропорций обрабатывается.
2
Выберите, как вписать логотип в квадрат
Обрежьте по центру до квадрата или целиком впишите картинку и залейте поля выбранным цветом фона.
3
Скачайте набор иконок в ZIP
Восемь файлов, или девять с маскируемой иконкой для Android: ICO, четыре PNG-размера, manifest и готовый HTML-фрагмент для head.

Что лежит в архиве и зачем нужен каждый файл

favicon.ico содержит три изображения в одном контейнере: 16, 32 и 48 пикселей. Это тот файл, который браузеры до сих пор запрашивают в корне сайта. icon-16.png и icon-32.png — современные эквиваленты, которые явно подключаются в коде, чтобы браузерам, предпочитающим PNG, не приходилось открывать ICO. apple-touch-icon.png размером 180 пикселей — иконка, которую iOS использует, когда человек добавляет ваш сайт на главный экран. icon-192.png и icon-512.png — два размера, которые обязательно указывать в манифесте прогрессивного веб-приложения. manifest.json связывает их с названием приложения и цветом темы, а head-snippet.html — готовый блок ссылок и meta-тегов для вставки на страницу. Имена атрибутов и пути к файлам не придется угадывать.

Почему у apple-touch-icon всегда пропадает прозрачность

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

Вектор на входе — резкость на выходе

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

Ваш логотип остается на устройстве

Декодирование, изменение размера, сохранение в PNG, упаковка в ICO и ZIP работают прямо в этой вкладке браузера. Файлы никуда не загружаются. Это особенно важно для логотипа, который еще не показывали публике. Большинство онлайн-генераторов favicon копируют ваш логотип на свои серверы, прежде чем что-то отдать взамен.

Частые вопросы

Какие размеры входят в набор?

PNG-файлы 16, 32, 180, 192 и 512 пикселей плюс favicon.ico, содержащий 16, 32 и 48 пикселей в одном файле. Размер 48 существует только внутри ICO: Windows использует его для крупных значков ярлыков. Отдельным PNG он не создается, потому что в вебе он нигде не нужен.

Почему у apple-touch-icon нет прозрачности?

Потому что iOS рисует прозрачные области иконки на главном экране черным цветом. Если свести прозрачность заранее, к выбранному цвету фона или к белому, иконка будет выглядеть так, как вы ее задумали, а не окажется в темном квадрате. Это единственный файл, где выбор делается за вас.

Что такое маскируемая иконка?

Android обрезает иконки приложений по форме, заданной на устройстве: круг, скругленный квадрат, «сквиркл». Маскируемая иконка держит все важное содержимое внутри центральных 80 %, чтобы ничего не обрезалось при любой форме. Включите эту опцию, и вы получите icon-512-maskable.png и третью запись в manifest с purpose «maskable».

Нужен ли мне manifest.json?

Только если вы хотите, чтобы сайт можно было установить как прогрессивное веб-приложение или управлять цветом интерфейса браузера на Android. Это один файл и одна ссылка в head. Он не мешает, даже если вы не пользуетесь этими возможностями, поэтому по умолчанию манифест добавляется с вашим именем приложения и цветом темы.

Можно ли начинать с SVG?

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

Куда вставлять сгенерированные теги?

Внутрь элемента head на ваших страницах. Файлы PNG, ICO и manifest нужно положить в корень сайта, чтобы пути в фрагменте совпали. Если вы отдаете их из подпапки, отредактируйте значения href в head-snippet.html.

Почему иконка кажется размытой?

Почти всегда причина в слишком маленьком исходнике. Все размеры строятся из мастер-иконки 512 пикселей, поэтому картинку меньше примерно 260 пикселей приходится растягивать, и крупные размеры выходят мягкими. Начните хотя бы с 512×512 или с SVG, и весь набор будет резким. Исходники меньше 32 пикселей отклоняются: в них не с чем работать.

Загружается ли логотип на сервер?

Нет. Изображение не покидает ваш браузер: оно декодируется, изменяется в размере, кодируется, упаковывается в ICO и ZIP локально, а архив отдается вам прямо из памяти.

Статьи по теме

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