PWA Icon Generator

Generate all required PWA icons for Android, iOS, and Windows in one click

About PWA Icon Generator

Overview

PWA Icon Generator creates all the icons you need for your Progressive Web App in one click. Generate 14 optimized icons for Android, iOS, and Windows platforms from a single source image or choose from hundreds of built-in SVG icons. Customize padding, border radius, and colors to match your brand, then download everything in a ready-to-use ZIP file with implementation code snippets.

Features

  • Generates 14 icons: 6 manifest icons, 4 iOS icons, 4 Windows tiles
  • Two input methods: Upload custom images or choose from 200+ SVG icons
  • Real-time preview with customizable padding and border radius
  • Adjustable background color with transparency support
  • Color customization for SVG icons
  • High-quality output optimized for all platforms
  • Organized ZIP download with manifest/, ios/, and windows/ folders
  • Ready-to-use code snippets for manifest.json and HTML
  • Maskable icon support for Android adaptive icons
  • All processing happens in your browser - your images never leave your device

How to Use

  1. Choose your source: Upload your own image (PNG, JPG, WebP, SVG) or select from the built-in SVG icon library
  2. Customize appearance: Adjust padding (0-100%), border radius (0-100%), background color, and icon color
  3. Preview in real-time: See your changes instantly in the live preview
  4. Click "GENERATE PWA ICONS" to create all 14 icon sizes
  5. Download the ZIP file containing all icons organized in folders
  6. Copy the provided manifest.json and HTML snippets to your project

FAQ

What are maskable icons?

Maskable icons are adaptive icons for Android that can be cropped into different shapes like circles or rounded squares. The 192×192 and 512×512 icons are marked as maskable, meaning Android can safely crop them. Keep important content in the center 80% of your icon to ensure it stays visible.

Why do I need different icon sizes?

Different platforms and screen resolutions require different icon sizes. Android uses 48-512px icons, iOS uses 120-180px icons, and Windows uses 44-310px tiles. Providing all sizes ensures your PWA looks sharp on every device and platform, from phones to desktops.

What's the difference between manifest and iOS icons?

Manifest icons are defined in your manifest.json and used by Chrome, Edge, and Android browsers. iOS Safari ignores the manifest and only reads apple-touch-icon HTML tags. You need both to support all platforms. This tool generates both sets automatically.

Should I use a transparent background?

It depends on your design. Transparent backgrounds work well for icons with distinct shapes. However, some platforms may add their own background color. Consider adding a subtle background color if your icon has thin lines or light colors that might not show well on any background.

What padding percentage should I use?

The default 30% padding works for most icons and follows platform guidelines. Use less padding (0-20%) for logos that need maximum size, or more padding (40-50%) for icons that need breathing room. Test your preview at different sizes to ensure your icon remains recognizable.