Ios – iPhone App Icons – Exact Radius

iconsiosipadiphone

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?

Best Answer

You can make four icons (as of today) for your app and they can all have a different look - not necessarily based on the 512x512 image.

  • corner radius for the 512x512 icon = 80 (iTunesArtwork)
  • corner radius for the 1024x1024 icon = 180 (iTunesArtwork Retina)
  • corner radius for the 57x57 icon = 9 (iPhone/iPod Touch)
  • corner radius for the 114x114 icon = 18 (iPhone/iPod Touch Retina)
  • corner radius for the 72x72 icon = 11 (iPad)
  • corner radius for the 144x144 icon = 23 (iPad Retina)

If you do create a set of custom icons, you can set the UIPrerenderedIcon option to true in your info.plist file and it will not add the gloss effect but it will place a black background under it and still round the image corners with these corner radii so if the corner radius on any of the icons is greater then it will show black around the edges/corners.

Edit: See comment from @devin-g-rhode and you can see that any future icon sizes should have a 1:6.4 ratio of corner radius to icon size. There is also a very good answer from https://stackoverflow.com/a/29550364/396005 which has the location of image mask files used in the SDK for rounding icon corners

To add a retina-compatible file, use the same file name and add '@2x'. So if I had a file for my 72x72 icon named icon.png, I would also add a 114x114 PNG file named icon@2x.png to the project/target and Xcode would automatically use that as the icon on a retina display. You can see this in action on the Summary page of the application target if you've done it right. The same works for your launch images. Use launch.png at 320x480 and launch@2x.png at 640x960.