Design trick will improve the look of your icons

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.

See the author talk at Generate London 2015 – buy your ticket today!

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.

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.

Words: Michael Flarup

Michael Flarup is a designer and co-founder of Robocat. He created app icon template to make the life of designers easier.

See the author speak at Generate!

Liked this? Read these!

• How to design app icons
• How to make an app
• The top 5 trends in app design for 2015