Favicon генератор онлайн — PNG в ICO + все размеры
Загрузите PNG, JPG или SVG — получите готовый favicon.ico, набор PNG-иконок для всех платформ, apple-touch-icon, webmanifest и HTML-сниппет. Всё в браузере, без отправки на сервер.
PNG, JPG, SVG, WebP
Перетащите файл сюда или нажмите для выбора
О favicon-генераторе
Современный favicon — это не один файл, а набор: ICO для старых браузеров и Windows-ярлыков, PNG разных размеров для современного Chrome/Firefox, apple-touch-icon для iOS-главного экрана, и webmanifest для PWA. Этот инструмент собирает весь комплект из одной картинки за один клик.
Конвертация идёт на клиенте: Canvas рисует исходное изображение в каждом нужном размере, затем мы пакуем PNG-данные в формат ICO (PNG-in-ICO, поддерживается с Windows Vista и работает во всех браузерах). Файл никуда не отправляется.
Готовый ZIP содержит favicon.ico, PNG 16/32/96/192/512, apple-touch-icon (180×180), site.webmanifest и HTML-сниппет с готовыми link-тегами. Достаточно положить файлы в корень сайта и вставить snippet в head.
Когда нужен favicon генератор
Запуск нового сайта
Загрузили логотип — получили готовый пакет, который правильно работает во всех браузерах: Chrome, Safari, Firefox, Edge, мобильных. Не нужно открывать Photoshop или знать спецификации Apple.
Десктоп-приложение или ярлык
Нужен favicon.ico для Windows-ярлыка, EXE-ресурса или старого Internet Explorer? Скачайте только ICO — мультирезолюшен с 16/32/48 в одном файле.
PWA / iOS добавление на главный экран
Если ваш сайт можно «Добавить на экран» — нужны apple-touch-icon (180×180) и webmanifest с PNG 192/512. Генератор делает их автоматически.
Замена устаревшей иконки
Старый favicon размытый и квадратный, без поддержки retina и темной темы? Перегенерируйте из исходного SVG с правильным набором размеров.
Частые вопросы
Какие форматы можно загрузить?
PNG, JPG, JPEG, WebP, GIF и SVG. Лучший результат — из квадратного PNG или SVG: они масштабируются без потери чёткости. Если исходник прямоугольный — выберите режим подгонки (заполнить / вписать / растянуть).
Чем отличаются режимы подгонки?
Заполнить — обрезает лишнее по краям так, чтобы картинка покрыла весь квадрат (хорошо для логотипов с центральным элементом). Вписать — вмещает картинку целиком, добавляет фон по краям (хорошо для сложных логотипов). Растянуть — деформирует пропорции (редко нужен).
Что внутри favicon.ico?
ICO — это контейнер. Внутри лежат PNG-картинки трёх размеров: 16×16, 32×32 и 48×48. Браузер сам выбирает, какой размер показать в зависимости от места. Это формат «PNG-in-ICO», поддерживается с Windows Vista (2007) и работает во всех современных браузерах.
Зачем столько PNG-файлов?
Каждый размер для своего сценария: 16/32 — вкладка браузера, 96 — Chrome New Tab, 180 — iOS Home Screen (apple-touch-icon), 192 — Android Chrome, 512 — PWA splash screen. Современные браузеры выбирают подходящий через атрибут sizes у тега link.
Что такое site.webmanifest?
JSON-файл со списком иконок и параметрами PWA. Нужен, чтобы сайт можно было «Добавить на главный экран» Android и Chromium-браузеров с правильной иконкой и заголовком. Если не делаете PWA — этот файл просто не повредит.
Почему apple-touch-icon делается с фоном, даже если включён прозрачный?
iOS добавляет к apple-touch-icon чёрный фон по умолчанию для прозрачных PNG. Это выглядит плохо, поэтому мы заливаем выбранным цветом (по умолчанию белым). Все остальные PNG и ICO остаются прозрачными, если вы выбрали опцию.
Куда положить файлы на сайте?
В корень: example.com/favicon.ico, example.com/favicon-32x32.png, и т.д. Затем вставьте HTML-сниппет в head каждой страницы — лучше через общий шаблон или layout. Браузер автоматически подхватит favicon при следующей загрузке.