Design, iPhone Development

This tutorial will show what icon sizes are needed for iPhone or iPad development to submit your app into the AppStore. As an iOS developer, every time I make a new app I have to refresh my memory for the list of icon sizes and have to “google” or “apple” the details.

So, Apple requires the following icon sizes for iPhone, iPad apps to be submitted to the AppStore:

  1. Icon512.png – 512px
  2. Icon.png – 57px
  3. Icon@2x.png – 114px
  4. Icon-72.png – 72px
  5. Icon-72@2x.png – 144px
  6. Icon-Small.png – 29px
  7. Icon-Small@2x.png – 58px

You do not actually need to crop any of the images you use in the binary to submit to Apple. They should all be square and not have any transparency. Apple will automatically mask each icon in the appropriate context.

However, there are cases when I need to make a rounded corner icon for marketing and promotional reasons. Thus, the formula to calculate the rounded corner is:

10 / 57 * (new size)

where 57 is the base icon and 10 is its radius. You have to scale up or scale down to calculate the radius for different size icon. For example, if I want to know the radius of 114px icon I have to do this: 10/57*114. Result is 20 pixels. See the list of all icons and their corresponding radius below:

  1. 512px – 89.825
  2. 57px – 10
  3. 114px – 20
  4. 72px – 12.632
  5. 144px – 25.263
  6. 29px – 5.088
  7. 58px – 10.175

How to create a smooth rounded corner icon.

In Photoshop:

  1. Open your sized-down icon, say 114px, and double-click the Background layer to make it editable.
  2. Select the Rounded Rectangle tool from the Tools panel.
  3. In the Options bar, click the Paths mode button and change the Radius field to 20 pixels (see chart above for radius size). Make sure that the Rounded Rectangle tool is in Paths mode
  4. Click and drag diagonally to draw a box around the icon.
  5. In the Layers panel, make sure the photo layer is selected then add a vector layer mask by Ctrl +  Clicking the Add Layer Mask icon at the bottom of the Layers panel.

This will hide the area outside the rounded square, leaving you with lovely smooth corners on transparent background.