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?
Guys! Please note that icon and launch image sizes are moving targets so check out the latest Apple documentation first. They have improved their docs pretty well in the past year or so. Apple guidelines
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 5 and Xcode 4.3.3:
|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@2x.png||114 x 114||iPhone retina application icon|
|Iconfirstname.lastname@example.org||58 x 58||iPhone retina application icon for settings/search area|
|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@2x~ipad.png||144 x 144||iPad retina application icon.|
|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||1024 x 1024||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|
|Default@2x.png||640 (w) x 960 (h)||iPhone 4 retina 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.|
|Default@2x~ipad.png||1536 (w) x 2008 (h)||iPad retina.|
|Optional icons and images:|
|Icon-doc.png||22 (w) x 29 (h)||Universial document icon|
|Iconemail@example.com||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.|
|Default-Landscape~ipad.png||1024 (w) x 748 (h)||iPad. Specifies the generic landscape version of the launch image.|
|Default-Portrait@2x~ipad.png||1536 (w) x 2008 (h)||iPad retina. Specifies the generic portrait version of the launch image.|
|Default-Landscape@2x~ipad.png||2048 (w) x 1496 (h)||iPad retina. Specifies the generic landscape version of the launch image.|
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 called UIPrerenderedIcon 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:
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 objects aren’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 “firstname.lastname@example.org”. 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:
iOS 4, 5 comments for developers:: As you can see, the hi-res version of the same launch image should be named email@example.com. If you did not specify a custom launch image name, these files must be named Default.png and Default@2x.png, 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:
orientation_modifier: -Portrait or -Landscape
device_modifier: ~ipad or ~iphone:
For standard devices:
filename.png and filename~ipad.png
For retina displays:
firstname.lastname@example.org and filename@2x~ipad.png such as:
launchimage-Portrait@2x.png (retina iPhone)
launchimage-Landscape~ipad.png (iPad landscape)
launchimage-Portrait@2x~ipad.png (retina iPad)
launchimage-Landscape@2x~ipad.png (retina iPad landscape)
You can use the method of [UIImage imageNamed:@"launchimage.png"] to load these images but you must know that devices are case sensitives in file names.
If you don’t have a @2x~ipad file the iOS 5+ will use the @2x file instead. If you do not specify a custom launch image filename, you must use the names of Default-Landscape.png and Default-Portrait.png.