iOS app icons: no transparency, no rounded corners

Two mistakes cause most rejected or odd-looking iOS icons. Both come from designing the icon as it looks on the home screen, rather than as the file iOS expects.

Mistake one: transparency

The App Store icon must be opaque. A PNG with an alpha channel, even if every pixel is solid, can trigger a validation error when you upload the build. Export as a full square with the background colour baked in, and remove the alpha channel entirely.

// Node, with sharp
await sharp("icon.png")
  .flatten({ background: "#101014" })
  .png()
  .toFile("AppIcon-1024.png");

Mistake two: rounded corners

iOS masks every icon to its rounded shape. If the file already has rounded corners, the home screen shows a slightly different corner inside Apple's, and often a sliver of background colour at the edge. Deliver a hard-cornered square and let the system round it.

Full bleed means full bleed

The background runs to all four edges of the 1024 square. The mark sits comfortably inside, with space for the corner mask. Drop shadows around the outside of the shape do not belong on iOS, unlike on macOS, where the icon carries its own shape and shadow. See the macOS app icon shape.

Newer appearances

Recent iOS versions added dark and tinted icon appearances, and Apple's newest releases add layered icons. A single opaque 1024 image still gives you a working icon; the variants are extra polish. Check Apple's current Human Interface Guidelines before adding them, since this area changes with each release.

For the list of every size and what uses it, see app icon sizes.

App Icon Foundry exports iOS icons full bleed and without transparency, the rules each store enforces written into the export, so the file you upload is the file that passes.