App Icon Generator

What this tool does

The App Icon Generator takes a single source image and produces a complete icon bundle for iOS, Android, and Progressive Web Apps. In one step it renders your artwork at every size the Apple App Store, Google Play, and PWA manifest specifications require, organises the output into platform-specific folders, and packages everything in a ZIP alongside a manifest.json snippet for the PWA icons. All rendering happens inside your browser using the HTML Canvas API, so your image never touches a server.

Why you might need it

Icon sizes are not optional — they are submission requirements. The Apple App Store requires a 1024×1024 marketing icon and rejects a binary that is missing it. iOS devices load different sizes depending on the screen density and device type: iPhones at @2x pull 120px, at @3x they pull 180px, iPads at @2x need 152px, and iPad Pro at @2x needs 167px. Android’s launcher framework selects between mdpi, hdpi, xhdpi, xxhdpi, and xxxhdpi buckets (48, 72, 96, 144, and 192 pixels respectively), and providing only one size causes blurry or over-sharpened icons on devices with different densities.

PWA icons are a separate concern again: the 192×192 icon is used for home-screen shortcuts on Android Chrome, and the 512×512 is used for the installation splash screen. Missing either makes the browser fall back to a placeholder or refuse to present an install prompt.

Handling all of this manually — exporting from a design tool at a dozen different sizes, naming them correctly, and organising them into the right folder structure — is time-consuming and easy to get wrong. This tool collapses it into a single upload and download.

How to use it

1. Drop your app icon artwork onto the upload zone, or click to browse. Square PNG at 1024×1024 or larger gives the sharpest output. JPG and WebP are also accepted.
2. Review the bundle summary showing the icons to be generated for each platform.
3. Click Generate icon bundle. The tool renders each unique size to a canvas, encodes it as PNG, and builds the ZIP with the three platform folders. For a 1024px source this takes a few seconds; the 1024px iOS store icon in particular involves significant pixel data.
4. Click Download ZIP and save app-icons.zip.
5. Expand the ZIP and move the folder contents into your project:
   • Place the ios/ PNGs into your Xcode asset catalogue.
   • Place the android/ PNGs into the corresponding mipmap-* folders.
   • Place the pwa/ PNGs in your static assets directory and merge the manifest.json snippet into your site’s web app manifest.

Format and quality notes

All output icons are PNG files, which is the required format for both iOS and Android. PNG preserves transparency, which is important if your icon has a transparent background — Android adaptive icons in particular layer the artwork over a system-provided background colour, so keeping transparency intact gives you the most flexibility.

The iOS 1024×1024 file is for App Store submission only; it is not bundled into the app binary. Xcode expects it in the AppIcon asset catalogue under the ios-marketing slot. Your other iOS icons (120, 152, 167, 180) go into the iphone and ipad slots inside the same catalogue.

For Android, modern apps using adaptive icons (API 26+) typically need both a foreground and background layer at each density. The icons from this tool are single-layer “legacy” icons, which still work on all Android versions as a fallback and are sufficient for many Play Store submissions.

Tips for best results

Use a 1024×1024 or larger square source. This is the App Store submission requirement and also guarantees every smaller output size has enough pixels to downscale cleanly. Starting smaller means the 1024px output is upscaled, which looks noticeably soft.

Keep the icon design simple. At 48×48 pixels (mdpi Android) you have very little room for detail. Test the tool’s preview at the smaller sizes before committing to the design. A bold shape, a single letter, or a clean logo mark generally works far better than a photographic illustration at small sizes.

Do not add pre-baked shadows, rounded corners, or glossy overlays to the source image. iOS and Android apply their own shape masks and elevation effects at render time. Adding yours in the source means the system effect doubles up on top, which looks inconsistent and amateurish.

If your icon has a transparent background, enable “any maskable” in the PWA manifest (as the generated snippet already does) so the browser can apply its own shape mask — a circle, a squircle, or a teardrop depending on the launcher.