Любому серьёзному проекту нужны понятный favicon во вкладках браузера, иконка Apple touch для iOS и иконки для Android и PWA. Этот инструмент помогает получить их из одного изображения: загрузите квадратный логотип, выберите размеры, скачайте PNG и вставьте готовый HTML‑сниппет в сайт.
Зачем нужны favicon и иконки приложений
- Favicon — маленькая иконка во вкладке браузера и в закладках. Без неё вкладка выглядит безлико, бренд хуже узнаётся.
- Apple touch icon — используется, когда пользователь добавляет сайт на главный экран iPhone и iPad. Правильный размер (например 180×180) даёт чёткую иконку.
- Иконки PWA / Android — нужны для «Добавить на главный экран» и установки. Обычные размеры: 192×192 и 512×512.
Один квадратный исходник может закрыть все эти задачи. Генератор работает полностью в браузере: логотип не покидает ваше устройство.
Рекомендуемое исходное изображение
Используйте квадратное изображение (PNG или SVG) не менее 512×512 пикселей. Большее разрешение допустимо — инструмент уменьшит. Избегайте мелких или растянутых картинок, чтобы иконки оставались чёткими на экранах с высокой плотностью пикселей.
Быстрый старт с инструментом
- Загрузка — Нажмите «Выбрать файл» и выберите логотип (PNG или SVG, квадратный, 512×512 или больше).
- Фон — Выберите цвет фона, если логотип с прозрачностью; он также подставится как
theme-colorв сниппет. - Размеры — Отметьте нужные размеры (favicon 16/32, Apple 180, PWA 192/512 и т.д.).
- Скачивание — Нажмите на любое превью, чтобы скачать этот размер в PNG, или «Скачать всё архивом ZIP», чтобы получить все сразу.
- Сниппет — Скопируйте HTML‑блок и вставьте в
<head>сайта. Загрузите PNG на сервер (например в/assets/icons/) и при необходимости поправьте пути в сниппете.
Куда положить файлы
Типичная схема:
- Иконки храните в папке вроде
/assets/icons/или в корне. - В сниппете укажите в
hrefактуальные пути (например/assets/icons/favicon-32x32.png). - Для PWA добавьте
site.webmanifestс теми же путями к иконкам 192×192 и 512×512.
Итог
Генератор favicon и иконок приложений позволяет из одного логотипа получить все нужные размеры и готовый сниппет для <head>. Используйте квадратное изображение в хорошем разрешении, скачайте PNG и вставьте сниппет в проект.