Генератор піктограм 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 більшість браузерів підхоплюють автоматично.