App Icon Generator: Design Icons at Every Size

Use an app icon generator workflow to build one square master mark, test it at 40×40px, and export platform-specific assets only after it still reads. Start from a 1024×1024px iOS App Store master and a 512×512px Google Play master. Keep the artwork free of rounded corners because iOS applies its own mask. For Android, prepare adaptive icon foreground and background layers on a 108×108dp canvas, keeping essential content inside the 72×72dp guaranteed-visible safe zone.

Key takeaways

• •Apple App Store submissions use a 1024×1024px app icon asset.
• •Google Play listing icons use a 512×512px square asset.
• •Test the mark at 40×40px before approving the icon system.
• •iOS applies the app icon rounded-rectangle mask; do not bake corners into artwork.
• •Android adaptive icons use 108×108dp layers with a 72×72dp guaranteed-visible safe zone.

This guide is for mobile UI/UX designers, founders, and engineers who can export image assets and configure iOS or Android app projects.

Time: 35 minutes · You'll need: A vector editor with SVG or PDF export, A raster editor that can preview at 40×40px, Xcode Assets catalog for manual iOS export, Android Studio Image Asset Studio or Android resource folders for manual Android export

What's on this page

1. •Reduce the app icon design to one mark
2. •Test the app icon maker preview at 40px
3. •Build the iOS app icon design master
4. •Prepare Android adaptive icon layers
5. •Export, inspect, and package every rendition
6. •Reference table

• •Common mistakes
• •FAQs

Designing an app icon generator-ready master

1. Reduce the app icon design to one mark

Draw one recognisable mark on a square artboard before adding any surface treatment. Use a single silhouette, a simple monogram, or two to three large geometric forms. At 40×40px, a thin gap can merge, a small counter can fill, and two adjacent hues can become one shape on lower-quality displays. Remove descriptive text, taglines, tiny symbols, and UI-like details such as notification dots or toolbar glyphs.

Keep gradients restrained. A multi-stop gradient may look dimensional at 1024×1024px but its tonal transitions compress into a flat or muddy patch at 40×40px. If a gradient defines the mark's edge, replace it with a solid boundary or a contrast-tested shape. Test light and dark backgrounds if the icon will be shown in Android launchers with user-selected themes. The result should be identifiable from its silhouette before colour is considered.

Tip: If the mark needs its wordmark to be recognised, it is a logo lockup rather than a viable mobile app icon.

2. Test the app icon maker preview at 40px

Export a temporary PNG and place it at exactly 40×40px beside realistic mobile UI elements. This is the smallest place an icon appears in Settings, so treat it as the approval size rather than a final spot check. View it at 100% zoom; enlarged canvas previews hide merged edges and illegible interior details. Ask three concrete questions: can a person name the app category, distinguish the mark from a neighbouring icon, and identify its dominant shape in under one second?

Run a blur test after the normal-size check. Apply a small blur or step back from the display; the outer silhouette should remain distinct. If it fails, increase the largest shape, remove internal strokes, or raise tonal separation between foreground and background. Do not solve the failure by sharpening raster pixels. The source design is too complex if it only works after sharpening.

Tip: Compare the 40px version against four visually similar competitor icons, not against an empty white canvas.

3. Build the iOS app icon design master

Create a 1024×1024px square master for the App Store. Keep the canvas square and extend the background colour or artwork all the way to each edge. Do not draw a rounded rectangle, add transparent corner cut-outs, or export a pre-masked squircle. iOS applies the rounded-rectangle mask at runtime and can vary the presentation across contexts, so baked corners can create visible double rounding or unwanted halos.

For a manual build, preserve an editable vector source, then export the 1024×1024px PNG required for App Store submission. Add the required device-specific renditions to an Xcode asset catalog and let Xcode associate each rendition with its slot. Check the icon in a simulator and on hardware: the platform mask may crop artwork that appeared comfortably placed on the unmasked square canvas. Keep the critical mark away from the edge even when the background intentionally bleeds outward.

Tip: A full-bleed background is correct on iOS; only the artwork that must remain recognisable needs inset space.

4. Prepare Android adaptive icon layers

Build Android adaptive icons as separate foreground and background layers, not as one flattened 512px file. Set each layer on a 108×108dp canvas. Keep the logo, face, letterform, or other essential content within the 72×72dp guaranteed-visible safe zone. Android launchers apply their own icon masks and may animate or position the layers differently, so content outside that zone can be cropped or obscured.

Use a solid colour, image, or simple texture for the background layer. Put the mark and any intentional foreground detail in the foreground layer. This separation gives the launcher the depth and masking information adaptive icons require. For the manual method, create adaptive-icon XML resources that reference foreground and background drawables, then inspect the icon on at least one Pixel device or emulator. Also export a separate 512×512px square PNG for the Google Play store listing; that listing asset is not a substitute for adaptive icon resources.

Tip: Avoid placing a white logo over a transparent foreground layer unless the background layer guarantees contrast in every launcher treatment.

5. Export, inspect, and package every rendition

Freeze the master only after the 40×40px test passes. Export the 1024×1024px iOS App Store icon and 512×512px Google Play listing icon from the same approved source, then create the platform packages. In Xcode, populate the AppIcon asset catalog with its required image slots and verify the generated Contents.json manifest is committed with the assets. In Android Studio, add the adaptive icon XML and its foreground and background drawables under the appropriate mipmap or drawable resources.

Inspect three failure modes after export: transparent pixels where a platform expects an opaque listing asset, an iOS icon with pre-rounded corners, and an Android foreground mark extending beyond the 72×72dp safe zone. Reopen the generated files rather than trusting filenames. A batch export can resize an asset correctly while applying the wrong colour profile or flattening adaptive layers. Keep the editable source and export settings together in version control or the design handoff.

Tip: Use floow.design’s free App Icon Generator at /free-tools/app-icon-generator when you want to upload the approved square icon and generate the iOS and Android sizes, Xcode manifest, and adaptive layers; retain the manual source files for future revisions.

Reference table

Platform icon master and adaptive icon specifications

Do it with the free App Icon Generator

Upload one square icon and get every iOS and Android size, the Xcode manifest and the adaptive icon layers.

Open the App Icon Generator → — free, no sign-up.

Common mistakes

Exporting a detailed 1024px illustration and assuming downscaling will preserve it.

Approve the icon at 40×40px first. Remove fine strokes, small counters, text, and secondary symbols until the silhouette remains identifiable.

Adding rounded corners to the iOS source PNG.

Export a square, edge-to-edge source. iOS applies the rounded-rectangle mask, and a baked mask can produce double corners or a visible fringe.

Using the Google Play 512px listing PNG as the Android launcher icon.

Ship adaptive foreground and background layers for Android launchers. The 512×512px PNG is for the Google Play listing, not adaptive icon behaviour.

Putting the Android logo near the edge of a 108dp adaptive layer.

Keep all essential content inside the 72×72dp guaranteed-visible safe zone. Treat the remaining area as artwork that may be masked or cropped.

Frequently asked questions

What size should an iOS app icon be?

The App Store submission icon is a 1024×1024px square asset. Keep the source artwork square and do not pre-round its corners, because iOS applies the rounded-rectangle mask. Xcode uses additional asset-catalog renditions for installed app contexts.

What size should I export for Google Play?

Google Play requires a 512×512px square icon for the store listing. Export that file separately from the Android adaptive icon resources used in launchers. Adaptive icons need foreground and background layers rather than a single flattened listing image.

Why does my app icon design look bad when it is small?

App icon detail fails at small sizes because thin lines, small gaps, text, and subtle gradient transitions occupy too few pixels to remain distinct. Test the mark at 40×40px at 100% zoom. Increase shape size and contrast instead of adding sharpening or extra decoration.

Should I round the corners in my iOS app icon design?

No, iOS app icon artwork should remain square because iOS applies the rounded-rectangle mask itself. Bake neither rounded corners nor transparent corner cut-outs into the source. Extend the background to the canvas edge and inset only the critical visual mark.

What is the Android adaptive icon safe zone?

Android adaptive icons use a 108×108dp layer canvas, with a 72×72dp guaranteed-visible safe zone for essential content. Keep the logo, letterform, and other recognition-critical elements inside that central area. Launcher masks can crop or obscure artwork outside it.

Can an app icon maker create both iOS and Android files?

An app icon maker can generate the required file set only after the underlying mark has passed a small-size legibility check. Confirm the icon reads at 40×40px, then generate iOS asset-catalog files and Android adaptive foreground and background layers. Review the output in Xcode and Android Studio before release.

Where this leaves you

A good app icon is not a miniature poster. It is one mark that survives a 40×40px rendering, an iOS system mask, and Android launcher masking without losing its identity. Start with the largest shape, not with a gradient, wordmark, or decorative border. Use the 1024×1024px and 512×512px files as store masters, then package iOS and Android assets according to their different runtime behaviours. Your next action is simple: put the current mark at 40×40px beside real Settings-style rows and remove every element that does not still read.

---

Design the screens first

Describe the screen you need in plain English and floow.design generates production-ready iOS and Android layouts you can iterate on by chat, then export to Figma or code. Design your mobile app screens in floow.design first, then build.

Start designing free →

---

Related

• •WebP Converter — Batch-convert PNG, JPEG, WebP and AVIF in your browser, with a quality slider, optional resize and a live size comparison.
• •SVG to PNG Converter — Rasterise any SVG at 1x to 4x, or export every iOS scale and Android density as one archive.
• •iOS App Icon Sizes: Export Every Required Size — Export every iOS app icon size from one 1024px master, including App Store Connect rules,
• •SVG to PNG Converter: Export Icons for iOS and Android — Use an SVG to PNG converter and manual export workflow to deliver SF Symbols, PDF vectors,
• •Design by AI: A Realistic Workflow for Mobile App Teams — Learn a realistic Design by AI workflow that helps mobile app teams move from clear briefs

Sources

• •Apple Human Interface Guidelines: App icons
• •Apple Developer Documentation: Asset catalogs
• •Android Developers: Adaptive icon design
• •Google Play Console Help: Prepare and roll out a release
• •W3C: WCAG 2.2