Design trick will improve the look of your icons

By Creative Bloq Staff
( netmag )
published

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.

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.

Michael Flarup

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.

Words: Michael Flarup (opens in new tab)

Michael Flarup is a designer and co-founder of Robocat (opens in new tab). He created app icon template (opens in new tab) to make the life of designers easier.

See the author speak at Generate!

Liked this? Read these!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Creative Bloq Staff

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq. 

Related articles