What file format is best for PWA icons?

PNG is the mandatory and standard format. Transparent PNGs are best for cross-platform compatibility.

What is a 'Maskable' icon?

Maskable icons allow Android to shape your icon into its own theme (circle, square, etc.) without cutting off your logo.

Which icons should I add to my manifest.json?

At a minimum, adding 192x192 and 512x512 is required. Our tool gives you a complete code block for every recommended size.

Why didn't my PWA icon appear after installation?

This is often due to an incorrect path in your manifest.json. Ensure the paths match your project's folder structure exactly.

PWA Icon Generator (Free, Fast & Private)

Name: PWA Icon Generator: Turn Your Web App into a Native Masterpiece
Author: Pixes

Make your PWA look native on all platforms with correct icon sizes and maskable padding.

Privacy first

Files never leave your browser
No server upload
Processed locally on your device

What is a PWA Icon and Why Is a 'Maskable Icon' Necessary?

A PWA icon is the visual symbol of your web app when it's 'installed' to a user's home screen or desktop. Unlike standard websites, PWAs define themselves through a manifest.json file, where 'pwa icon size' (typically 192x192 and 512x512) is specified. However, the introduction of 'Maskable Icons' by Android has changed things. A maskable icon has a designated 'safe zone' around the logo, allowing the system to crop it into different shapes without cutting off your brand. Without a 'PWA Generator,' manually centering and padding these icons is difficult. Our tool handles both standard and maskable variants instantly, ensuring your PWA is as visually polished as any native app from the Google Play Store or Apple App Store.

Why Pixes.app PWA Icon Generator?

Google Chrome and W3C Compliance: We set every icon name and size according to the latest standards for full Lighthouse scores.. Eliminate the 'Missing PWA icon' errors in your automated tests.

Manifest.json Support Included: We don't just give you images; we generate the JSON code to identify them.. Copy-paste and skip the technical documentation.

Fast and Simple: No fees, no registration, and no emails. Just high-quality results in seconds.. Accelerate your development cycle with our streamlined tool.

3 Steps to a Professional PWA Icon Pack

No coding or manifest file headaches required. Learn how to complete your PWA icon project right from your browser.

Upload Your Master Icon (512x512): Choose your highest resolution image, preferably 512x512 pixels in PNG format. Click 'Select Image' to begin.
Maskable and Standard Generation: Once uploaded, our tool generates 192x192 (General), 512x512 (Splash Screen), and 'maskable-icon-512x512' versions simultaneously.
Copy the Manifest Snippet and Download: We generate the 'icons' array you'll need to paste into your manifest.json file. Click 'Copy Code' and download the full set as a ZIP.

Expert Tips for PWA Icons

Boost Your Lighthouse Score: Google Lighthouse expects at least 192x192 and 512x512 icons, plus at least one 'maskable' icon. Our tool provides this exact set to ensure a 100/100 PWA score.

Splash Screen Background Choice: Choose an icon with a transparent PNG background so it integrates perfectly with your 'background_color' setting in your manifest.

Logo Margin (Safe Zone): Remember that Android can crop icons into circles. Ensure your logo is centered with at least a 10% margin on all sides. Pixes.app handles this for you automatically.

Who is Our PWA Icon Generator For?

Frontend and Full-Stack Developers: When converting React, Vue, or Angular projects to PWA, don't waste time on icons. Get the manifest-ready set in seconds.

📱 Mobile-First Startups: Before launching native apps, test your branding with a perfectly sized PWA icon set.

🛒 E-Commerce and SaaS Companies: Encourage users to 'Add to Home Screen' with an icon that represents your brand's quality.

Privacy-Focused Projects: Since all processing is client-side, your confidential brand assets never leave your computer.

How to use this tool

Choose your highest resolution image, preferably 512x512 pixels in PNG format. Click 'Select Image' to begin.
Once uploaded, our tool generates 192x192 (General), 512x512 (Splash Screen), and 'maskable-icon-512x512' versions simultaneously.
We generate the 'icons' array you'll need to paste into your manifest.json file. Click 'Copy Code' and download the full set as a ZIP.

Related tools

FAQ

What file format is best for PWA icons?: PNG is the mandatory and standard format. Transparent PNGs are best for cross-platform compatibility.
What is a 'Maskable' icon?: Maskable icons allow Android to shape your icon into its own theme (circle, square, etc.) without cutting off your logo.
Which icons should I add to my manifest.json?: At a minimum, adding 192x192 and 512x512 is required. Our tool gives you a complete code block for every recommended size.
Why didn't my PWA icon appear after installation?: This is often due to an incorrect path in your manifest.json. Ensure the paths match your project's folder structure exactly.