7 September 2012

App Icon Size Reference Chart

Just like I can’t remember the pixel sizes of basic iOS UI components, I also constantly find myself looking up the pixel dimensions of app icons – and asking my programmer partner “Which ones do you need again?”

I finally made myself a chart to refer to – hopefully you find it useful as well!

Icon pixel sizes for iPhone and iPad apps

 

Read on for the complete list:

What app icon sizes are needed for iPhone, iPod Touch, and Universal apps?

iPhone and iPod Touch apps need all the icons that a Universal app has. You might wonder why an iPhone-only app needs iPad app icons – remember that an iPhone app can run on an iPad, too!

The reverse is not true – iPad only apps cannot be run on iPhones. Therefore iPad-only apps get their own section.

Required Icons:

App Store icon: 1024×1024 pixels
iPhone home screen icon: 57×57 and 114×114 (retina) pixels
iPad home screen icon: 72×72 and 144×144 (retina) pixels

Optional Icons:

iPhone & iPad Settings, iPhone Spotlight search results: 29×29 and 58×58 (retina) pixels
iPad Spotlight search results: 50×50 and 100×100 (retina) pixels

You only need to include those optional icons if your app has a need for them – for example, if the app has settings to configure under the Settings app. If you don’t know what I’m talking about, you probably don’t need them.

If you want to know more, or need to know about document icons or web clip icons, get it from the source: read what Apple’s Human Interface Guidelines says about app icons.

What app icon sizes are needed for iPad-only apps?

Since iPad-only apps can’t run on an iPhone, you don’t need quite as many icons.

Required Icons:

App Store icon: 1024×1024 pixels
iPad home screen icon: 72×72 and 144×144 (retina) pixels

Optional Icons:

iPad Settings: 29×29 and 58×58 (retina) pixels
iPad Spotlight search results: 50×50 and 100×100 (retina) pixels

Chime on in!

If you see something incorrect in my diagram, please let me know! And if you find this useful, tell your other app developer and designer friends :]

Category: Game Design, Tutorials

Tags: , , ,

21 Comments

  1. gusar says:

    And the name of the icons?

    For example, the ipad home screen icon, to put in the iphone project:
    How the ipad know wich use? for the size?

  2. Thank you for this!

    It would be great to show the corner radius of each size as well.

  3. Carlos says:

    Nice! This is going to come in handy in the future, bookmarking the page.

    Thanks

  4. Hi Vicki,

    Great post!
    Love your design how you seperated the types(iPhone and iPad) Everything looks ok on the post.
    I’m into icons recently too. As a developer I was fustrated that it took me hours to figure out and make the icons. So I have made a PSD file and a comprehensive tutorial on udemy.com on how to make awesome icons in under a minute. It’s FREE so if you’re interested, take a look and let me know what you think. Here’s the link:
    http://www.udemy.com/how-to-make-awesome-icons-for-your-iphone-app-in-60-seconds/

  5. The name of the icons, which you can match with the graph provided by Vicky and the documentation offered by Apple, should be the following ones:

    Default.png
    Default@2x.png
    Default-Landscape~ipad.png
    Default-Landscape@2x~ipad.png
    Default-Portrait~ipad.png
    Default-Portrait@2x~ipad.png
    iTunesArtwork.png
    iTunesArtwork@2x.png

    Icon.png
    Icon@2x.png
    Icon-Small.png
    Icon-Small@2x.png
    Icon-Small-20.png
    Icon-Small-20@2x.png
    Icon-Small-30.png
    Icon-Small-30@2x.png
    Icon-Small-50.png
    Icon-Small-50@2x.png
    Icon-72.png
    Icon-72@2x.png

    (the icons should also be specified in the app’s Info.plist file under the Icon files key IIRC)

    You also need to remember about the screenshots you will need to put on iTunes Connect.

  6. Hi

    First of all congrats for you post, it has been very helpfull to me. I wrote a comment a few days ago but I think it hasn’t been sent so I post it again (sorry if it was sent).
    My boudb is that in the iOS Human Interface Guidelines (HIG) it says there is one more required image: “Launch image”. You don’t mention it in the post and in my (only :( ) app published in the App Store I don’t send this Launch Icon… so it’s a new requirement from Apple? Or it’s optional?

    Thank you

    David Hidalgo

  7. vwenderlich says:

    Thanks for adding the icon names, AddictiveColors, and the launch image info, Sandor Nagy! I’m glad this chart has been useful to people – it should save us all some time.

    If anyone knows the corner radius info, let me know!

  8. moggytech says:

    This reference page of sizes and radius detail (but not names) may help: http://iconhandbook.co.uk/reference/chart/ios/

  9. Alex Hajdu says:

    Regarding radius. Always design square icons – apple ALWAYS put the correct mask automatic even you have one included in your exported picture.
    If you try to use your own radius the result may be final icon with colored line around the ico…

  10. Gusgsm says:

    Excellent post, Vick. Just the kind of concise and clear information I was looking for. Thanks a lot :)

    PS. Smile, you’ve been bookmarked ;)

  11. Verónica says:

    Alex is right. You do not need to apply the corner radius. Corners must be 90° as the iOS “adds” it for you.

    Same source as Sandor Nagy:
    http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

  12. off course Vicki these chart will definitely useful to people.this will help to upload the icon.

  13. Dheeraj says:

    yeah Alex ,Verónica is right :)

  14. Pedro says:

    check this tool. resizes your icon to all the ios required sizes.

    http://www.iconizer.co/

  15. Kurt says:

    Vicki,
    Any updates on this chart for iOS 7?

Leave a Comment

I'd love to hear your thoughts!