Icons and launch images for iPhone and iPad apps

Question: As a graphic designer I often have to design icons, logos, launch and background images for iPhone applications. Latest apps run on iPhone 3G, iPhone 3GS, iPod Touch 3, iPhone 4GS and iPad and there is a big boom and confusion in this area. I use Adobe Photoshop CS4. What size and type of images do I have to create for such a project?

Answer: We use the following table for our iPhone/iPad projects when the OS target is 3.2 or above. The table is updated for iOS 4.3 and Xcode 4:

Name	Size (pixels)	Platform
Icon.png	57 x 57	Universial application icon
Icon-settings.png	29 x 29	Universial application icon for settings area. Alternative name: Icon-Small.png
Icon~ipad.png	72 x 72	iPad application icon. Alternative name: Icon-72.png Add some smaller (iPad doc: 64×64, other optional 32×32, 24×24, 16×16) custom icons to your project. See comments.
Icon-spot~ipad.png	50 x 50	iPad icon for spotlight search. Alternative name: Icon-Small-50.png iPhone OS trims 1 pixel from each side and adds a drop shadow. The actual size is 48×48 pixels.
iTunesArtwork.png	512 x 512	Universial application icon for iTunes App Store. Uploaded separately to iTunes. It’s included in the app bundle too, file name: iTunesArtwork. In an iPad application iPhone OS uses this image to generate the large (320×320) document icon if it is not supplied otherwise.
Default.png	320 (w) x 480 (h)	iPhone/iPod 2, 3 portrait launch image
[e-mail]	640 (w) x 960 (h)	iPhone 4 hi-res portrait launch image
Default~ipad.png	768 (w) x 1004 (h)	iPad. Specifies the default portrait launch image. This image is used if a more specific image is not available. Use full size template (768×1024) to design this launch image. The 20 pixels height statusbar is on by default and occupies the top of the screen, aka the 1004 rows vs. 1024.
Optional icons and images:
[e-mail]	114 x 114	iPhone 4 hi-res application icon
[e-mail]	58 x 58	iPhone 4 hi-res application icon for settings/search area
Icon-doc.png	22 (w) x 29 (h)	Universial document icon
[e-mail]	44 (w) x 58 (h)	iPhone 4 hi-res document icon
Icon-doc~ipad.png	64 x 64	iPad document icon (small)
Icon-doc320~ipad.png	320 x 320	iPad document icon (large)
Background-xxx.png	320 (w) x 480 (h) 640 (w) x 960 (h) 768 (w) x 1024 (h)	iPhone/iPod Touch 2, 3 background image, iPhone 4 background image, full size iPad background image, full size. For most projects the status bar is hidden, so use full screen size by default.
Default-PortraitUpsideDown~ipad.png	768 (w) x 1004 (h)	iPad. Specifies an upside-down portrait version of the launch image. The height of this image should be 1004 pixels and the width should be 768. This file takes precedence over the Default-Portrait.png image file for this specific orientation.
Default-LandscapeLeft~ipad.png	1024 (w) x 748 (h)	iPad. Specifies a left-oriented landscape version of the launch image. The height of this image should be 748 pixels and the width should be 1024. This file takes precedence over the Default-Landscape.png image file for this specific orientation.
Default-LandscapeRight~ipad.png	1024 (w) x 748 (h)	iPad. Specifies a right-oriented landscape version of the launch image. The height of this image should be 748 pixels and the width should be 1024. This file takes precedence over the Default-Landscape.png image file for this specific orientation.
Default-Portrait~ipad.png	768 (w) x 1004 (h)	iPad. Specifies the generic portrait version of the launch image. The height of this image should be 1004 pixels and the width should be 768. This image is used for right side-up portrait orientations and takes precedence over the Default~ipad.png image file. If a Default-PortraitUpsideDown.png image file is not specified, this file is also used for upside-down portrait orientations as well.
Default-Landscape~ipad.png	1024 (w) x 748 (h)	iPad. Specifies the generic landscape version of the launch image. The height of this image should be 748 pixels and the width should be 1024. If a Default-LandscapeLet.png or Default-LandscapeRight.png image file is not specified, this image is used instead. This image takes precedence over the Default.png image file.

Typical icons are PNG files with 90 degree corners, but no transparency, no layers, and set to 72 PPI.  iPhone OS applies rounded corners, optionally shine, and other effects. If you have added these effects let your programmers know it. When you do not let the iPhone/iPad OS to apply the gloss to your icons, developers must add a key to info.plist calledUIPrerenderedIcon and make it checked. The standard bit depth is 24 bits + 8-bit alpha channel.

Designers and programmers alike understand now that the sizes of items on iPhone/iPad screens are not constants. Differences in screen size and zoom functionality are common place, but PNG format and 72 PPI is still the default. (PNG discards pixel density. Most image editors, including Adobe Photoshop, assume that an image’s pixel density is 72 if the information is not stored.)

iPad icons can be tricky. Some designers release the standard iPad icons only but fail to include some crisp small size icons as options for OS. Add some tiny iPad icons to your project in the sizes of 64×64, 32x32px, 24x24px and 16x16px. Programmers know how to include these files (see Info.plist).

You should know that when the user taps on the main application icon the app immediately starts to load. It’s important to make the launch time as short as possible. Every iPhone/iPad app should ship with a launch image which mimicks the interface by using a static image. The launch image should be as small a file as possible to ensure quick loading. Do not create image files in the megabyte territory.

Notes for developers:

In the Info.plist file developers specify the orientations the application supports along with the related launch images. If missing, they must add these lines:

1 2 3 4 5 6 7

UISupportedInterfaceOrientations                       UIInterfaceOrientationPortrait              UIInterfaceOrientationPortraitUpsideDown              UIInterfaceOrientationLandscapeLeft              UIInterfaceOrientationLandscapeRight

Developers may change previous naming conventions, as we did, and use their own custom name of icon and launch image files. We usually want to configure our iPad applications differently from iPhone versions, so we specify device-specific values for Info.plist keys. For example:

Sample icon and launch image settings in Info.plist for universal applications. Platform: iOS 3.2+

iOS documentation: “The image files used to represent icons and launch images must all reside in the root level of your bundle. How you identify these images to the system can vary, but the recommended way to specify your application icons is to use the CFBundleIconFiles key… In addition to the icons and launch image at the top level of your bundle, you can also include localized versions of those images in your application’s language-specific project subdirectories”. The filenames can be anything you want, but all image files must be in the PNG format.

1. If your iPhone application supports running in iOS 3.1.x or earlier, you cannot use the CFBundleIconFiles key to specify your icon files. You must create icons of the same size as listed in our table, but each image must be named as follows:

Icon.png – Application icon on iPhone or iPod touch
Icon-72.png – iPad application icon in a Universal application
Icon-Small.png - Search results and Settings icon on iPhone and iPod touch
Icon-Small-50.png – Search results in iPad applications

Since version 3.2 if you specify an Icon-Small.png or Icon-Small-50.png file in your bundle, the system prefers those icon files over the ones in the CFBundleIconFiles key and the iOS prefers the application icon defination in the CFBundleIconFiles key over any other one.

2. The iOS is finally making the move into resolution independence and your image objectsaren’t measured in pixels, but in points. Points don’t always correspond to pixels. The screen size of the iPhone 3 is 480×320, in both points an pixels. The iPhone 4′s screen size is 960×640 in pixels, but its logical screensize still remains at 480×320 in points. Keep your frame, point and size values in their original values and still support larger resolution devices. On iPhone 4 you may insert “@2x” in the name of the image file and it will be used automatically on the higher resolution devices. Use like “[e-mail]”. The simulator of XCode 3.2.6 still reports screen size of 320×480, but see what you have done… on a hires device.

Check out UIScreen class reference for properties of bounds and currentMode. The bounds property gives us the rectangle of the screen in points.The currentMode.size property represents the screen size in pixels. For example, since iOS 4, [UIImage imageWithContentsOfFile: ] recognises when an image has the ’2x’ version and displays it correctly.

3. In the Info.plist, at the CFBundleIconFiles key, if you do not specify the filename extensions for launch and icon images, you can avoid listing all of the 2x variations, and the Info.plist would look like this:

Sample icon image settings in Info.plist for universal applications. Platform: iOS 4+

iOS 4+ comment: As you can see, the hi-res version of the same launch image should be named [e-mail]. If you did not specify a custom launch image name, these files must be named Default.png and [e-mail], respectively. If you include a filename extension, you must explicitly add the names of all image files. For universal iPhone/iPad apps the orientation-specific launch image filenames can be as follows:

1 2 3 4 5 6

.png , like launchimage-Portrait.png,  [e-mail], launchimage-Portrait~ipad.png,  launchimage-Landscape~ipad.png...

If you do not specify a custom launch image filename, you must use the names of Default-Landscape.png and Default-Portrait.png.