Michael Flarup explains how alpha transparency has made creating app icons difficult, and offers a solution.
A common mistake designers make when creating and bundling iOS app icons is in the use of transparency.
On iOS, all the icons are presented as squares with rounded corners (affectionately called 'squircles'). However, this rounding is done programmatically by Apple, when the icons are uploaded – not by the designer.
This detail escapes many people when they first try their hand designing an app icon. Alpha transparency is not supported in icons for iOS – designers are required to deliver a square PNG file. If you bundle and upload an icon with transparency through iTunes connect, the transparent areas are replaced with solid black.
Commonly, the designer's pre-rounded corners are turned black, then programmatically rounded by Apple. This would be fine if it weren't for the fact that most tools and templates that enable this sort of rounding are ever so slightly inaccurate, due to the notorious difficulty of reproducing the squircle.
This often leads to small black fragments on the rounded edges of the icon, where the designer's pre-rounded mask clashes with the black pixels Apple has introduced.
Even big brands have difficulty with icons, explains Michael
If you look closely on light backgrounds, you'll see a surprising number of icons – even from large publishers – that suffer from this issue.
So remember: always deliver full square PNG files when designing iOS app icons.
The option to export icons with rounded corners in popular templates is often intended for use on promotional material, such as on websites and email marketing. Never pre-round an icon before you submit your app to the App Store and never include any transparency.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
