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 |
| [email protected] | 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: | ||
| [email protected] | 114 x 114 | iPhone 4 hi-res application icon |
| [email protected] | 58 x 58 | iPhone 4 hi-res application icon for settings/search area |
| Icon-doc.png | 22 (w) x 29 (h) | Universial document icon |
| [email protected] | 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:
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 “[email protected]”. 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 [email protected]. If you did not specify a custom launch image name, these files must be named Default.png and [email protected], 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 |
<basename><orientation_modifier:-Portrait or -Landscape><scale_modifier: @2x><device_modifier: ~ipad or ~iphone>.png , like
launchimage-Portrait.png, [email protected], 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.
//////....................
The full list would now be something like this:
- Icon.png - 57x57 iPhone App Icon
- [email protected] - 114x114 iPhone retina display App Icon
- Icon-72.png - 72x72 iPad App Icon
- [email protected] - 144x144 iPad retina display App Icon
- Icon-Small.png - 29x29 iPhone settings and search results icon
- [email protected] - 58x58 iPhone retina display settings and search results icon
- Icon-Small-50.png - 50x50 iPad search results icon
- [email protected] - 100x100 iPad retina display search results icon
Of course there is nothing to stop you using this naming convention for all of your apps but if you are targeting iOS 3.2 or later you can specify different filenames using the Info.plist file. The CFBundleIconFiles key was introduced with iOS 3.2 and allows you to directly list the names of the icon files. if you omit the filename extension (.png) you should be able to omit listing the @2x variants as the system should automatically detect the double resolution versions.
To further complicate things Apple introduced a new CFBundleIcons key in iOS 5.0 to support the Newsstand. This key contains a CFBundleIconFiles subkey which is an array of filenames which take precedence over the older CFBundleIconFiles key. If you are targeting iOS 5.0 and later you can switch to this key but if you need to support iOS 4.x or 3.2 you should also include the CFBundleIconFiles key.
All in all this is a bit of a mess and I would suggest that you test all of the various combinations you need to support carefully as it is easy to slip up.
App Store Screenshots
Apple recently changed the App Store submission rules for iPhone and iPod touch apps so that you have to submit screenshots for the retina display. The actual dimensions of the screenshot vary depending on whether you include space for the status bar or not but dimensions should be as follows (first value includes the status bar):
- Landscape: 960x640 or 960x600 pixels
- Portrait: 640x960 to 640x920
Apple has not, so far, placed a similar restriction on iPad screenshots but since you will want your screenshots to look good on the latest iPad it seems like a good time to switch to only retina sized screenshots for all devices.
The dimensions for a retina iPad screenshot are as follows (as before the first dimension includes the status bar):
- Landscape: 2048x1536 or 2048x1496 pixels
- Portrait: 1536x2048 or 1536x2008 pixels
2
3
4
5
6
7
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>