Alex Rivera | Logout

iPhone App Icons - Exact Radius?

Asked 2010-01-20T21:53:45.667
346

I'm trying to create the icon for my iPhone app, but don't know how to get the exact radius that the iPhone's icons use. I've searched and searched for a tutorial or a template but can't find one.

I'm sure that I'm just a moron, but how do you get the rounded corners exactly right with your icon from Illustrator or Photoshop?

Edit:

What's the radius for the Retina iPad?

Edit
Report

2 Answers

30

Important: iOS 7 icon equation

With the upcoming release of iOS 7 you will notice that the "standard" icon radius has been increased. So try to do what Apple and I suggested with this answer.

It appears that for a 120px icon the formula that best represents its shape on iOS 7 is the following superellipse:

|x/120|^5 + |y/120|^5 = 1

Obviously you can change the 120 number with the desired icon size to get the corresponding function.

Original

You should provide an image that has 90° corners (it’s important to avoid cropping the corners of your icon—iOS does that for you when it applies the corner-rounding mask) (Apple Documentation)

The best approach is not rounding the corners of your icons at all. If you set your icon as a square icon, iOS will automatically overlay the icon with a predefined mask that will set the appropriate rounded corners.

If you manually set rounded corners for your icons, they will probably look broken in this or that device, because the rounding mask happens to slightly change from an iOS version to another. Sometimes your icons will be slightly larger, sometimes (sigh) slightly smaller. Using a square icon will free you from this burden, and you will be sure to have an always up-to-date and good looking icon for your app.

This approach is valid for each icon size (iPhone/iPod/iPad/retina), and also for the iTunes artwork. I followed this approach a couple of times, and if you want I can post you a link to an app that uses native square icons.

Edit

To better understand this answer, please refer to the official answered 2011-05-10T08:22:07.827

16

The answer from dbarnard has the formula to calculate the correct radius, but since you were looking for the templates, all the masks and overlays can be found in this directory:

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.1.sdk/System/Library/PrivateFrameworks/MobileIcons.framework

(path is for recent versions of XCode. For older version it will probably be inside /Developer/).

As others have noted, you should NOT mask them yourself, but you can use these to check how your icons will look once masked.

(credits for this finding goes to Neven Mrgan IIRC)

answered 2012-04-20T08:01:41.657

Your Answer