Sunday, May 5, 2013

Icon sizes for iPhone & iPad


I decided to recompile some information about the sizes and names of the icons we need when we create an App.

Review of Icon Sizes

Image Description iPhone iPhone Retina Display iPad iPad Retina Display iPhone5
Application Icon Icon displayed on the device’s home screen, used to launch an application. 57x57 114x114 72x72 144x144 114x114
Settings Icon Icon used to identity an application in the iOS Settings Application. 29x29 58x58 29x29 58x58 58x58
Spotlight Search (uses same image as Setttings on iPhone) Icon used to identify an application in the Spotlight Search results. 29x29 58x58 50x50 100x100 58x58
iTunes Image Large image used by iTunes during ad hoc distribution. 512x512 512x512 512x512 512x512 1024x1024
Launch Image Image used as a placeholder screen while the application loads. 320x480 640x960 Portrait: 768x1004 Landscape: 1024x748 Portrait: 1536x2008 Landscape: 2048x1496 640x1136

iPhone Launch Images

Device Target File Name Size (in pixels)
iPhone 3GS Default.png 320x480
iPhone 4 Default@2x.png 640x960
iPhone 5 Default-568h@2x.png 640x1136

iPad Launch Images

File Name Size (in pixels) Use
Default~ipad.png

Default@2x~ipad.png
768x1004

1536x2008
This is the basic loading image that is used if a more specific image is not available. If no more specific images are supplied, this should be present.
Default-Portrait~ipad.png

Default-Portrait@2x~ipad.png
768x1004

1536x2008
This is the generic portrait-loading image. This image is used for right side up (home button on bottom) portrait orientations and takes precedence over Default~ipad.png. Therefore, if you supply this image, Default~ipad.png is not used. Additionally, if Default-PortraitUpsideDown~ipad.png is not supplied, this image is used.
Default-Landscape~ipad.png

Default-Landscape@2x~ipad.png
1024x748

2048x1496
This is the generic landscape-loading image. This image takes precedence over Default~ipad.png. Therefore, if you supply this image, Default~ipad.png is not used. Additionally, if Default-LandscapeLeft~ipad.png or Default-LandscapeRight~ipad.png is not supplied, this image is used.
Default-PortraitUpsideDown~ipad.png

Default-PortraitUpsideDown@2x~ipad.png
768x1004

1536x2008
This is the portrait upside-down (home button on top) loading image.
Default-LandscapeLeft~ipad.png

Default-LandscapeLeft@2x~ipad.png
1024x748

2048x1496
This is the landscape left (home button on left) loading image.
Default-LandscapeRight~ipad.png

Default-LandscapeRight@2x~ipad.png
1024x748

2048x1496
This is the landscape-right (home button on right) loading image.

Newsstand Icons

The aspect ratio of all Newsstand icons should be between 1:2 and 2:1. In addition, all Newsstand icons must be flat and have 90° corners.
Description
iPhone 5 
high-resolution iPhone 
iPhone iPod touch
high-resolution iPad
iPad
Guidelines
App icon (required for all apps)114 x 114114 x 11457 x 57144 x 14472 x 72“App Icons”

UITabBarItem Icons

If your want to create an Icon for the UITabBarItem you must consider the next steps:
  1. Image -> Mode -> Grayscale
  2. "Discard color information" -> Discard
  3. Mark all [cmd A]
  4. Copy [cmd C]
  5. Layer -> Layer Mask -> Reveal all
  6. In "Chanels" (Window -> Chanels) show the "Layer 0 Mask" (click on the left)
  7. Paste [cmd V]
  8. Image -> Adjustment -> Invert [cmd I]
  9. Save for web [cmd alt shift S] as PNG 24
using the Icon size of 30x30 pixels for iPhone and double for retina display 60x60 pixels.

In general, when you are supplying a retina image you should name it with [name]@2x~iphone.png or [name]@2x~ipad.png. Then, in the IB you should put the name of the file without the whole suffix, so just [name] instead of [name]@2x~iphone.png. The image won't show up in the IB, but should be ok in the live app.

No comments:

Post a Comment