본문 바로가기

about DEV

Icons and launch images for iPhone and iPad apps

Answer: We use the following table for our iPhone/iPad projects when the OS target is 3.2 or above:

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-iPad-spot.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 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.
Default4.png 640 (w) x 960 (h) iPhone 4 hi-res launch image
Optional icons and images:

Icon-doc.png 22 (w) x 29 (h) Universial document icon
Icon4.png 114 x 114 iPhone 4 hi-res application icon
Icon4-settings.png 58 x 58 iPhone 4 hi-res application icon for settings/search area
Icon4-doc.png 44 (w) x 58 (h) iPhone 4 hi-res document icon
Icon-iPad-doc.png 64 x 64 iPad document icon (small)
Icon-iPad-doc320.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.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.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.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.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.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.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 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.

Setting Info.plist file

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
    <key>UISupportedInterfaceOrientations</key>    
    <array>
             <string>UIInterfaceOrientationPortrait</string>
             <string>UIInterfaceOrientationPortraitUpsideDown</string>
             <string>UIInterfaceOrientationLandscapeLeft</string>
             <string>UIInterfaceOrientationLandscapeRight</string>
    </array>

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:

Image and icon settings in info.plist for iPhone/iPad app

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

Notes for developers:

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

From 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. Yes, 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 “button1back@2x.png”. The simulator of XCode SDK 4+ 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:

Image and icon settings in info.plist for iPhone/iPad app