Упаковщик иконок для сайта ICO, PNG, Android и iOS

Инструмент «Фавикон сборщик» - это онлайн-генератор favicon и иконок для сайта, Android и iOS. Он берёт загруженное изображение и формирует готовый ZIP-архив: PNG-иконки разных размеров, favicon.ico, site.webmanifest и head.html для вставки в HTML. Поддерживаются светлая/тёмная версии favicon и настройка параметров для Android Web App и Apple Touch Icon.

Загрузка изображения

Загрузите исходник (PNG/JPG/SVG и др.). После загрузки появится предпросмотр, информация о размере и формате. На основе изображения формируются favicon и платформенные иконки.

Исходник - пиксельную заготовку можно нарисовать и скачать за несколько шагов при помощи редактора на этом сайте.

Папка (путь) для файлов и корректные ссылки

Перед скачиванием ZIP выберите, где на сайте будут лежать файлы иконок. Это влияет на пути в head.html и site.webmanifest:

• Корень сайта ( / ) - ссылки вида /favicon-32x32.png
• Относительный ( ./ ) - ссылки вида ./favicon-32x32.png
• Свой путь - например /assets/icons/ или ./icons/

Если выбран «Свой путь», инструмент автоматически добавляет завершающий слэш, чтобы ссылки в head.html и manifest были корректными.

Favicon - светлая версия (Light)

Светлая версия favicon имеет два режима: «Как есть» - без дополнительных эффектов; «Изменить» - включает настройки внешнего вида:

• Фон - заливка под иконкой
• Яркость - осветление/затемнение изображения
• Масштаб - отступы внутри иконки (уменьшить/увеличить полезную область)
• Закругление - степень округления краёв (визуальный стиль иконки)

Эти параметры применяются только в режиме «Изменить». В режиме «Как есть» они не влияют ни на предпросмотр, ни на экспортируемые файлы.

Favicon - тёмная версия (Dark)

При включении опции «Добавить версию для тёмной темы» инструмент создаёт отдельные файлы для браузеров с медиа-условием prefers-color-scheme: dark. Для тёмной версии доступны те же настройки, что и для светлой:

• Фон
• Яркость
• Масштаб
• Закругление
• Инвертировать цвета - опционально (применяется только при включённом режиме изменения)

Android Web App Manifest

Android применяет иконки из Web App Manifest и использует их в нескольких системных сценариях: на домашнем экране устройства, на экране запуска приложения (splash screen) и в меню переключения приложений. В зависимости от оболочки и версии системы иконка может быть автоматически обрезана круглой маской или отображаться на цветном фоне, поэтому часто требуется добавлять отступы и собственный фон, чтобы сохранить читаемость изображения.

Раздел Android формирует файлы и настройки для PWA/ярлыка на Android: создаются иконки 192×192 и 512×512, а также файл site.webmanifest.

Настройки иконки Android (режимы)

• Использовать как есть - иконка без дополнительного фона и без отступов
• Добавить цвет и отступы - включает: Фон иконки (подложка) и Масштаб (внутренние отступы)

Настройки manifest и цветов Android

• Заливка (background-color) - цвет фона экрана запуска (splash/background)
• Цвет темы (theme-color) - цвет панели/темы браузера и элементов интерфейса
• Имя и Короткое имя - поля name/short_name в site.webmanifest

Предпросмотр Android: HOME / SPLASH / SWITCH

Инструмент показывает три типовых сценария отображения иконки на Android:

• HOME - вид ярлыка на домашнем экране (иконка + short_name)
• SPLASH - экран запуска приложения/ярлыка на фоне background-color
• SWITCH - экран переключения приложений (карточка приложения + иконка)

Это помогает заранее оценить, как выбранные фон/масштаб/цвета будут выглядеть на разных экранах Android.

Apple Touch Icon (iOS)

iOS использует файл apple-touch-icon как основную иконку сайта, добавленного на рабочий экран. Система самостоятельно применяет скругление углов и не поддерживает Web App Manifest в полном объёме, поэтому для iOS используется отдельная иконка фиксированного размера. Корректно подготовленный фон и отступы позволяют избежать обрезки изображения по краям.

Раздел iOS формирует файл apple-touch-icon.png размером 180×180 для добавления на экран «Домой» в Safari. Доступны режимы:

• Использовать как есть - без дополнительных отступов
• Добавить фон и отступы - включает настройку: Фон иконки и Масштаб

Также можно указать Имя приложения - это meta-тег apple-mobile-web-app-title (влияет на подпись, а не на изображение).

Что входит в ZIP-архив

• favicon-16x16.png, favicon-32x32.png
• favicon.ico (набор размеров для браузеров)
• favicon-dark-16x16.png, favicon-dark-32x32.png (если включена тёмная версия)
• android-chrome-192x192.png, android-chrome-512x512.png
• apple-touch-icon.png (180×180)
• site.webmanifest (Android/PWA настройки)
• head.html (готовые теги link/meta для вставки на сайт)

Проверка текущего favicon сайта

В инструмент встроена функция проверки текущего favicon по ссылке сайта. Достаточно ввести домен или полный URL — сервис автоматически определит и отобразит favicon, который сейчас используется сайтом. Это удобно для сравнения текущего favicon сайта с новым вариантом перед заменой.

Конфиденциальность

Все операции выполняются локально в браузере пользователя. Изображения не передаются на сервер и не сохраняются администрацией сайта.

Поддержка устройств

Инструмент адаптирован для работы онлайн в современных версиях браузеров на мобильных устройствах (смартфонах), планшетах, стационарных компьютерах и ноутбуках.

Отсутствие навязчивости