iPhone App Icons - Exact Radius?

Viewed 253867

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?

17 Answers

People arguing about the corner radius being slightly increased but actually that's not the case.

From this blog:

A ‘secret’ of Apple’s physical products is that they avoid tangency (where a radius meets a line at a single point) and craft their surfaces with what’s called curvature continuity.

enter image description here

You don't need to apply corner radius to icons for iOS. Just provide square icons. But if you still want to know how, the actual shape is called Squircle and below is the formula:

enter image description here

The corner radius of the 57 x 57 pixel icon is 9 pixels.

If not considering stroke, the exact radius is actually 10px for 57x57 icon.

I get this info from iconreference.

Update (as of Jan. 2018) for App Icon requirements:


https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

Keep icon corners square. The system applies a mask that rounds icon corners automatically.

Keep the background simple and avoid transparency. Make sure your icon is opaque, and don’t clutter the background. Give it a simple background so it doesn’t overpower other app icons nearby. You don’t need to fill the entire icon with content.

The iphone rounds corners for you, all you need is a square 57x57 png icon and u should be good

WWDC 2022 brought good news!

Now, Xcode 14 automatically generates all the required app icon sizes based on a single input icon 1024x1024 pix (Single Size). However, if you need an old-school approach, choose All Sizes from dropdown menu.

So, all you have to know now is the radius of input icon which is 180 px.

enter image description here

Related