Apple’s iOS Custom Icons and Image Guidelines; an Infographic ( Including iPad 3 )

by Peter Levine on March 8, 2012

I’ve done my fair share of googling sizes in pixels for various images for iOS and then had to do separate google searches for what they’re actually called. I’ve also read through te iOS Human Interface Guidelines many times yet still seem to go back over and over every time I create a new app. So Here’s a handy bullet list format and a handy infographic you can share to help you in the future.

iOS Image Guide Infographic

iOS Image Guide Infographic

  • Application Icon
    • Device – Required
      • iPhone / iPod Touch
        • 57 x 57 Pixels
          • Icon.png
        • 114 x 114 Pixels Retina
          • Icon@2x.png
      • iPad
        • 72 x 72 Pixels
          • Icon-72.png
        • 144 x 144 Pixels Retina
          • Icon-72@2x.png
    • App Store – Required
      • iPhone / iPod Touch / iPad
        • 512 x  512 Pixels
          • ItunesArtwork – No Extension
        • 1024 x 1024 Retina
          • ItunesArtwork@2x – No Extension
    • Small Icon – Spotlight Search Results and Settings – Optional
      • iPhone / iPod Touch
        • 29 x 29 Pixels
          • Icon-Small.png
        • 58 x 58 Pixels Retina
          • Icon-Small@2x.png
      • iPad
        • 50 x 50 Pixels – Spotlight
          • Icon-Small-50.png
        • 29 x 29 Pixels – Settings
          • Icon-Small.png
        • 100 x 100 Pixels – Spotlight Retina
          • Icon-Small-50@2x.png
        • 58 x 58 Pixels – Settings Retina
          • Icon-Small@2x.png
  • Launch Image
    • Remember – <basename><usage_specific_modifiers><scale_modifier><device_modifier>.png
      • @2x – Scale Modifier
      • ~ipad – iPad Device Modifier
      • ~iphone – iPhone Device Modifier
    • iPhone / iPod Touch
      • 320 x 480 Pixels
        • Default.png – Generally
        • Default~iphone.png – Optionally
      • 640 x 960 Pixels – Retina
        • Default@2x.png – Generally
        • Default@2x~iphone.png – Optionally
    • iPad
      • 768 x 1004 – Portrait
        • Default-Portait.png
        • Default-Portait~ipad.png – XCode will automatically add the ~ipad modifier if Default.png exists
      • 1024 x 768 – Landscape
        • Default-Lanscape.png – General – Not needed if supplying Left and Right Landscape
        • Default-LandscapeLeft.png – Landscape Left
        • Default-LandscapeRight.png – Landscape Right
        • Default-Landscape~ipad.png
        • Default-LandscapeLeft~ipad.png
        • Default.LandscapeRight~ipad.png
      • 1536 x 2008 – Portait Retina
        • Default-Portait@2x.png
        • Default-Portait@2x~ipad.png – Size Modifier ( @2x ) comes before the device modifier ( ~ipad )
      • 2048 x 1496 – Landscape Retina
        • Default-Lanscape@2x.png – General – Not needed if supplying Left and Right Landscape
        • Default-LandscapeLeft@2x.png – Landscape Left
        • Default-LandscapeRight@2x.png – Landscape Right
        • Default-Landscape@2x~ipad.png
        • Default-LandscapeLeft@2x~ipad.png
        • Default.LandscapeRight@2x~ipad.png
  • Toolbar, Tab bar and Naviation Bar Icon
    • Toolbar / Navigation Bar – iPhone / iPod Touch / iPad
      • 20 x 20
      • 40 x 40 – Retina
    • Tab bar – iPhone / iPod Touch / iPad
      • 30 x 30
      • 60 x 60 – Retina

8 comments

Hi,
Do you know for a fact that the new iPad needs 144×144 icons? It makes sense that it would, but I can’t find any info on the Apple site.

by Matt on March 8, 2012 at 8:43 am. Reply #

Hey Matt,
Yeah it’s in the human interface guidelines under: “Size for high-resolution iPad (in pixels)” for the “Application icon (required for all apps)” item on Table 8-1.

A link directly to the area is here: Human Interface Guidelines

Cheers!

by Peter Levine on March 8, 2012 at 11:55 am. Reply #

Also, forgot to mention, you’ll see an area for it on xcode 4.3.1. Go to your Target -> Summary -> App Icons under “iPad Development Info.” You’ll see that when you hover over the “Retina Display” a tool tip that says: “The high resolution version of the main icon for applications running on iPad, 144 x 144 pixels in size.” Hope this helps!

Screenshot here: Screen Shot of App Icons Area

by Peter Levine on March 8, 2012 at 12:03 pm. Reply #

Thanks, this will come in handy.

Also, it’s “extension,” not “extention.”

by Craig on March 9, 2012 at 4:12 pm. Reply #

Thanks! Haha, not sure how that got past my spell checker. Cheers!

by Peter Levine on March 9, 2012 at 4:15 pm. Reply #

iPad landscape launch image should be 1024 x 748 not 1024 x 768 (20 pixels lost for status bar)

by Paul McNally on March 16, 2012 at 6:41 pm. Reply #

Thanks! I was thinking of image screenshots for iTunes I think. Cheers!

by Peter Levine on March 19, 2012 at 6:32 pm. Reply #

Regarding App icons, the guide says “Keep the file size small as possible.” That usually means .jpg but your file names all show .png. In addition, see no recommended file type for icons, but for screenshots the guide names JPEG, TIFF or PNG. My 1024 x 1024 iTunes Artwork is 750 KB, .jpg is 240 KB. You mention “no extension” but is it PNG? Do they really want icons of near MB proportions? Hard to believe. Or does Apple and the App code optimize and process them into JPEG?
Thanks

by John Driedger on May 17, 2012 at 1:50 am. Reply #

Leave your comment

Required.

Required. Not published.

If you have one.