★ TouchArcade is in READ ONLY mode this weekend while we upgrade. Please support us on Patreon.

Icon corner radius.

04-21-2011, 05:03 PM
Joined: Mar 2011
Location: Glasgow, Scotland
Posts: 97
Icon corner radius.

As I had to draw some new icons tonight I thought I'd share some information that might be of use to some of you.

The corner radius for appstore icons is a fraction of the width of the icon. If you want to do an internal rounded corner that matches the outer rounded corner, it is the same fraction - you can use this to make a correctly proportioned border around your icon.

Here is the simple formula: cornerRadius = width X 0.15625

example: 512 * 0.15625 = 80

also, here is the full list (as of april 2011) of icon sizes required for the app store (i think you can get away with less than this but we do all sizes just to be safe) : 512, 114, 72, 58, 57, 50 and 29.

here is the icon I was working on tonight, I didn't add the outer round edge to the edge of the icon as this is done automatically, and I think it is best to avoid doing one to prevent any fringing.

hope this helps someone


Physmo.com - makers of Mos Speedrun

Last edited by nickd3000; 04-21-2011 at 05:10 PM. Reason: forgot to add picture
04-21-2011, 05:20 PM
Joined: Dec 2009
Location: Canada
Posts: 202
Oh, that would have been helpful to know when I was making the icon for Staunch Defense and wanted to use a boarder. I think I spent a fair while fooling around with screen shots to get try getting it right.
04-21-2011, 11:17 PM
Joined: Mar 2009
Location: London, UK
Posts: 2,280
As math is not my strong suite I appreciate this!!

You are not pretty enough to be that stupid.
04-22-2011, 03:46 AM
Joined: Sep 2009
Location: Vancouver, Canada
Posts: 977
Send a message via MSN to MindJuice Send a message via Skype™ to MindJuice
Originally Posted by nickd3000 View Post
Here is the simple formula: cornerRadius = width X 0.15625

example: 512 * 0.15625 = 80
I've seen this number of an 80 pixel radius on several websites now, but I don't think it is correct.

If you take any 512x512 icon and apply an 80 pixel radius to the corners, and then scale it down to 175x175 and compare it to the same icon on iTunes, for example, you will have several extra pixels around the corners vs. what iTunes gives you (much more than what might be considered rounding differences).

If you use a 90 pixel radius though, then you get practically identical results (although the iTunes scaling seems to result in some dithering in the cases I tested).

I can't recall who first told me to use a radius of90, but my icons are always perfectly trimmed that way.

Unfortunately I can't find any Apple docs to confirm 90 (or 80 for that matter).
04-22-2011, 07:22 AM
Joined: Mar 2011
Location: Glasgow, Scotland
Posts: 97
Hmm, I'll try that and see if I can hone the multiplier a bit when I get a chance.
04-22-2011, 07:53 AM
Joined: Jan 2009
Location: Winnipeg, Canada
Posts: 23
iOS icon template

The radius on a 512x512 icon is closer to 85. To be safest, please use this excellent template:

Also for some tips on how to make sure your resized icon looks as clean as possible, see my 10-minute screencast on icon design and resolution-independence: