Генератор иконок PWA

Создайте иконки, которые нужны устанавливаемому веб-приложению, — PNG 192 и 512px плюс site.webmanifest — из одного изображения, полностью в браузере.

Конфиденциальность прежде всего: каждое изображение обрабатывается локально в вашем браузере. Ничего не загружается, не сохраняется и не передаётся ни на один сервер.

Иконки, которые делают приложение устанавливаемым

Устанавливаемость прогрессивного веб-приложения отчасти оценивается по его иконкам: браузеры ищут веб-манифест, объявляющий как минимум PNG 192×192 и 512×512, прежде чем предложить установку или поместить приличную иконку на главный экран. Этот генератор отрисовывает оба размера из вашего исходного изображения и записывает site.webmanifest со ссылками на них, а также apple-touch-icon, который нужен iOS, и favicon.ico для обычных вкладок.

Задайте форму под лаунчер

Лаунчеры Android могут маскировать иконку под круг или скруглённый квадрат, поэтому графика, уходящая под самый край, может обрезаться. Добавьте здесь отступы и сплошной фон — и важная часть останется внутри безопасной зоны при любой маске; предпросмотр в реальном времени показывает результат в каждом размере. Всё отрисовывается на вашем устройстве с помощью Canvas API — ваш логотип никогда не загружается на сервер, — а весь набор скачивается zip-архивом.

Часто задаваемые вопросы

Загружается ли моё изображение для создания фавикона?
Нет. favicon.ico, PNG-иконки и манифест — всё создаётся локально в браузере с помощью Canvas API. Ваше изображение никогда не покидает устройство.
Какие размеры и файлы я получу?
Многоразмерный favicon.ico (16, 32 и 48px), PNG-иконки размером 16, 32, 48, 180 (apple-touch-icon), 192 и 512px, site.webmanifest и HTML-фрагмент для вставки в ваш <head>.
Можно ли конвертировать PNG или SVG в ICO?
Да. Добавьте PNG, JPG, SVG или WebP и скачайте настоящий favicon.ico. Логотипы SVG сначала растрируются локально в высоком разрешении.
Какое изображение подходит лучше всего?
Квадратное изображение с простым контрастным логотипом. Неквадратные изображения обрезаются по центру; используйте настройки отступа и формы, чтобы скадрировать так, как вам нужно.
Как установить фавикон?
Распакуйте пакет в корневую папку сайта и вставьте приложенный HTML-фрагмент в <head> ваших страниц. favicon.ico автоматически подхватывается большинством браузеров.