App Icon Generator

Generate the complete iOS and Android app icon set from one image, with every required size, a real Xcode Contents.json and a safe-zone preview.

🌐 Español

App Icon Generator generates the complete iOS and Android app icon set from one image, entirely in your browser — every required size, correct file names, a real Xcode Contents.json, and an Android adaptive-icon safe-zone preview.

🔒 Private by design: everything runs locally in your browser and never uploaded to any server.

Written and maintained by Last updated

One square master, then every size the two toolchains ask for

Shipping to both stores means producing a lot of near-identical PNGs. iPhone wants several point sizes at 2x and 3x and iPad wants them at 1x and 2x, covering the home screen, Spotlight and Settings; the App Store wants its own 1024 pixel marketing icon; Android wants a legacy launcher icon and a modern adaptive-icon foreground layer at five separate density buckets. Doing that by hand is not hard, it is just long, and the failure mode is silent: one filename that does not match the manifest and Xcode falls back to a blurry upscale or a build step fails on a missing asset.

  1. Pick your artwork with the Upload a square-ish logo or app icon (1024×1024px or larger works best) control.
  2. Look at the preview that appears. Everything inside the bright circle survives every launcher mask; the dimmed ring around it may be clipped.
  3. If detail you care about sits in the dimmed ring, go back to your design tool, add padding around the mark and upload the new export.
  4. Click Generate & Download App Icons and wait for the percentage in the button to reach the end.
  5. Unzip, drag ios/AppIcon.appiconset into your Xcode asset catalogue, and copy the contents of android/ into your project’s resource directory.

Everything after the upload happens in the page. The image is decoded to a bitmap, centre-cropped to its largest square at full native resolution, and every single output size is then drawn from that one sharp square rather than from a chain of successive resizes, so quality loss never compounds.

The dimmed ring is where launchers actually cut

Android’s adaptive icons are easy to get subtly wrong because two different numbers are floating around in the documentation and they are not interchangeable. Both layers are drawn on a 108dp canvas. The outer 18dp on each side is reserved for parallax and pulse effects, which leaves a 72dp masked viewport. Inside that viewport a mask may still come as close as 33dp to the centre, so the region genuinely guaranteed to survive any convex mask shape is a centred circle 66dp across. That circle leaves 21dp to each edge of the full canvas, not 18dp, and mixing the two up is how a logo mark ends up losing its outer stroke on somebody else’s phone.

The preview draws exactly that boundary at exactly that ratio over your own image, using a clipped fill so the safe region stays sharp rather than being tinted. It is a check you would otherwise only make by installing a build on a launcher whose mask differs from yours.

Where the ZIP’s files belong in your project tree

The iOS half is a complete AppIcon.appiconset folder: the rendered PNGs plus a real Contents.json listing every idiom, point size, scale and filename, in the full explicit form that every Xcode release understands rather than the newer single-image shortcut.

The Android half mirrors a resource tree. Each density bucket gets an ic_launcher.png legacy icon and an ic_launcher_foreground.png adaptive layer; mipmap-anydpi-v26/ic_launcher.xml is the adaptive-icon wrapper Android reads from API 26 upward, pointing at that foreground and at a colour resource; and values/ic_launcher_background.xml defines that colour.

The two decisions the package deliberately leaves to you

The background colour resource ships as plain white, because the tool has no way to know your brand colour and no free-text field to ask for one. If you want anything else behind the adaptive foreground, open that XML in a text editor and change the hex value. Every other file, from the iOS filenames to the manifest to the XML wrapper, is ready as generated.

The second decision is composition. The preview shows you what would be clipped, it does not fix it, and there is no automatic shrink-to-fit. That is a real limitation and also the right default: quietly rescaling somebody’s logo mark inside its canvas changes the design. If you need to pre-square a wide lockup with control over the framing, Crop Images trims a centred square before you bring it here, and Resize Images can take an oversized export down to a sane master width first.

Where this stops and the favicon package starts

An app icon set and a web favicon package overlap in spirit and share almost nothing in practice: different filenames, different sizes, a different manifest, and an .ico container that has no place in either store bundle. If the same mark also needs to appear in a browser tab, the Favicon Generator produces that package from the same square-crop pipeline, and PNG to ICO handles the multi-size .ico on its own when that is all you are missing.

One practical note from using this on a real project: generate the package early, while the logo is still open in your design tool. Discovering that a thin outer border sits in the dimmed ring is a two minute fix at that point and an annoying round trip a week later.

See it in action

Screenshot of the App Icon Generator tool with an empty dropzone waiting for a source image to build an app icon set from
App Icon Generator mid-process: an empty dropzone waiting for a source image to build an app icon set from.
Screenshot of the App Icon Generator result screen showing the source image resized into the full set of platform icon sizes, previewed together before download
The finished result: the source image resized into the full set of platform icon sizes, previewed together before download. The download link is a local blob URL — the file never leaves your device.

Frequently asked questions

Is the Android adaptive foreground padded into the safe zone for me?

No, and that is the single most important thing to know before you download. Every Android file, including the adaptive foreground layer at each density, is the same centre-cropped square rendered edge to edge on its canvas. Nothing is inset and nothing is redrawn. That is exactly why the preview exists, because your artwork genuinely occupies the whole adaptive canvas, so anything outside the safe circle is at the mercy of whichever mask the launcher applies.

Why do several Contents.json entries point at the same pixel size?

Because Apple's asset catalogue is indexed by idiom, point size and scale rather than by pixels, and those combinations collide. An iPhone 20pt at 2x, an iPad 20pt at 2x and an iPad 40pt at 1x are all genuinely 40 by 40 pixels, for example. The generator renders each distinct pixel size once and reuses those bytes for every catalogue entry that needs them, which is why the ZIP has more image entries listed in the manifest than it has distinct sizes to draw.

What pixel sizes do the Android density buckets work out to?

The legacy launcher icons come out at 48, 72, 96, 144 and 192 pixels square, and the adaptive foreground layers at 108, 162, 216, 324 and 432, applying the standard mdpi, hdpi, xhdpi, xxhdpi and xxxhdpi factors of 1, 1.5, 2, 3 and 4 to the 48dp legacy icon and the 108dp adaptive canvas. Every one of those products is a whole number, so no bucket ever lands on a half pixel.

Does a transparent PNG stay transparent in the package?

Yes. The crop and every resize run on a canvas that starts fully transparent and each output is encoded as PNG, so an alpha channel in your source survives into both the iOS files and the Android adaptive foreground. On iOS that is worth a thought before you ship, because the home screen does not composite anything behind your icon the way Android's adaptive icon composites the background layer behind the foreground.

My logo is only 512 pixels wide. What actually goes wrong?

The largest render in the package is the 1024 pixel App Store marketing icon, and there is no guard that stops a smaller source being scaled up to fill it. A 512 pixel source therefore produces a genuine 1024 pixel file that is soft, while every size below the source resolution still looks fine. Nothing errors and nothing warns you, so the fix is upstream, meaning you export the logo at 1024 by 1024 or larger before generating.

The download did not start. What should I check?

Generating triggers an automatic save and also leaves a fallback link on the page carrying the ZIP's own file name, so a browser that blocked the automatic download still gives you a manual one to click. A file the browser cannot decode as an image never gets that far, because it is turned away at the upload step, with an error box and no preview and no generate button at all, and re-exporting the artwork as a plain PNG or JPG from your design tool clears that up. A failure during generation itself is rarer and shows its own message asking you to try a different image.

Related tools