Manbolo Blog

Manbolo Team Blog, creators of MeonArchives

New Metrics for iOS 7 App Icons

Updated on 2013/12/19: the beta version of iOS 7.1 seems to have restored the iOS 6 maximum number of characters for app icon. Check your app name on the beta before trying to find a new name (hello Photodiscover)!


There are some change in the icon metrics for iOS 7 that are worth noted.

Number of characters in app icon name

TLTR: the shorter your app display name is, the better it is.

The default police and text rendering have slightly changed on iOS 7. As a consequence, the display name of your app on the homescreen is affected and the maximum number of characters before your icon label is truncated has changed.

For instance, take an app called ’Lorem Ipsumd’. On iOS 6 (left image), the app label is ’Lorem Ipsumd’ but, on iOS 7 (right image), this label is truncated and displayed as ’Lorem Ipsu…’:

lorem ispum ios6 ios7

If the maximum number of characters was around 13 characters on iOS 6, this number is now around 12 characters, and you should be really safe with 11 characters (for western name and depending of your label of course). Some apps will have to be updated, like my favorite Photo browsing app, Photodiscover (13 characters!).

Some things to note:

Icon shape

The classic rounded rect shape icon has also changed on iOS 7. As of iOS beta 6, the current shape is:

Rounded Corners

if you see a bunch of XML, your browser doesn’t support HTML 5 inline SVG!

You should definitively read Exploring iOS 7 Rounded Corners from Manfred Schwind for a brilliant and deep analyse of the new shape. The graphics resources (SVG and GIF) are all copied from this blog post so check it out. Manfred has produced a GIF to emphasise the small differences of the new shape:

iOS 6 vs iOS 7Cute isn’t it?

From Exploring iOS 7 Rounded Corners, you can download a SVG version of this shape to use in your favorite graphics editor.

Another very useful resource is a Photoshop Script for iOS 7 Rounded Rectangles by Mike Swanson that will allow you to create all different iOS7 icon sizes very easily in Photoshop.

Icon dimension

App icon sizes have changed and are now:

Devices iOS 6 size (in pixel) iOS 7 size (in pixel)
iPhone Non Retina 57 x 57 not available
iPhone Retina 114 x 114 120 x 120
iPad Non Retina (mini and 2nd gen) 72 x 72 76 x 76
iPad Retina 144 x 144 152 x 152

If you want to target only iOS 7, you just need 76 x 76, 120 x 120 and 152 x 152 icon sizes. If you want to target also iOS 6, you’ll need 57 x 57, 72 x 72, 76 x 76, 114 x 114, 120 x 120, 144 x 144 and 152 x 152 icon sizes. Without counting Spotlight and Settings icon if you don’t want the OS to interpolate them!

Having a different icon on iOS 6 and iOS 7

If you app look is radically different on iOS 6 and iOS7, maybe you want to have a different icon on iOS 6 and iOS 7. Due to the icon dimension change, you can make an iOS 6 icon with a 114 x 114 size and an iOS 7 icon with a 120 x 120 size. Then, in your Info.plist file, add these two resources in the CFBundleIconFiles key:

<key>CFBundleIconFiles</key>
<array>
    <string>blue-114.png</string>
    <string>green-120.png</string>
</array>

On iOS 6, you will have a blue icon, and on iOS 7, you will have a green icon. Simple!

App submission failed because icons are missing

Be careful to provide all the icons you need otherwise your app will not pass Apple validation. If you’ve received this kind of email:

Invalid Image - For iOS applications, icons included in the binary submission must be in the PNG format.

-If your application supports the iPhone device family, you must include square icons of the following dimensions: 57x57 pixels and 120x120 pixels.

-If your application supports the iPad device family, you must include square icons of the following dimensions: 72x72 pixels, 76x76 pixels and 152x152 pixels

it’s because of this. Double check your Info.plist file and also that the icon files you’ve referenced are in your app target.

For instance, your CFBundleIconFiles key in the Info.plist file for an universal app supporting iOS 7 and iOS 6 should be:

<key>CFBundleIconFiles</key>
<array>
    <string>icon29.png</string>
    <string>icon29@2x.png</string>
    <string>icon57.png</string>
    <string>icon57@2x.png</string>
    <string>icon60@2x.png</string>
    <string>icon72.png</string>
    <string>icon76.png</string>
    <string>icon76@2x.png</string>
</array>

And the Info.plist should be displayed like this:

infoplist

You can use whatever name you want, provided you’re using all the mandatory sizes.

With Xcode 5, you can also have a nice overview in clicking on your project in the project navigator, click on the ’General’ tab and check the ’App Icons’ category. You should see something like this, without any yellow warning sign:

xcode5

Gloss effects have been killed

If your app icon was using the iOS glossy effect, you’ll have to update your icon. UIPrerenderedIcon key (also known as “Icon already includes gloss effect”) has no effect on iOS 7. Appart from the rounded mask, your icon is rendered with no modification on iOS 7. If you still want a gloss effect on iOS 7, you just have to embed it in your icon resources.

From jc.

All Posts