Mobile Developer’s Icon & Image Checklist

by Tony Lukasavage on Thursday, March 24th, 2011 | comments 18 Comments | Tags: , , , , , ,

Overview

If there’s one thing I’ve learned from delving into iOS, Android, and Blackberry app development, it’s that there’s a lot more to creating a mobile app than just coding it. One of the things that can catch you off guard, especially if you are devoid of design ability like me, is the amount of icons and images necessary to deploy your apps. This becomes even more daunting when you intend to deploy to multiple platforms.

The other concern is that it isn’t always evident from the development tools how many different graphics you need to account for all scenarios. A new iOS developer will likely be unaware that you need a 58×58 pixel icon for iPhone 4 Spotlight and Settings. To attempt to alleviate some of this confusion, I put together these charts to detail what I know so far about the graphics required for submitting mobile apps to the various Android, iOS, and Blackberry markets.

Icons

Android iOS Blackberry Playbook Notes
29×29 iPhone Settings and Spotlight, iPad Settings
36×36 low pixel density icon
48×48 medium pixel density icon
50×50 iPad Spotlight. iOS will trim 1 pixel off each side and add a drop shadow, making it 48×48
57×57 standard iPhone icon
58×58 iPhone 4 Settings and Spotlight
64×64 optional small custom document icon
72×72 Android high pixel density icon, iPad icon
86×86 standard Playbook icon. It will trim 5 pixels off each side, making it 76×76
96×96 Potential icon size if iPad gets a high ppi screen
114×114 standard iPhone 4 icon
144×144 Potential icon size if iPad gets a high ppi screen
320×320 optional large custom document icon

Distribution Images

Android Market Apple App Store Blackberry App World Amazon App Store Notes
screenshot sizes 320×480, 480×800, 480×854, 1280×800 iPhone: 320×480, 480×320, 320×460, 480×300 iPhone 4: 640×960, 960×640 iPad: 768×1024, 1024×768, 748×1024, 1004×768 640×640 or smaller 480×854, 854×480 required # of screenshots:
Android: at least 2
Apple: at least 1
Blackberry: 1-50
Amazon: 3-10
114×114 device icon
180×120 Promotional graphic (no alpha)
480×480 Product icon that should match your 86×86 icon
512×512 Large/High resolution product icon
1024×500 Feature graphic for market

Additional Notes

For Android, your 36×36, 48×48, and 72×72 pixel icons should be placed in the drawable-ldpi, drawable-mdpi, and drawable-hdpi folders of your Android project respectively. Be sure to specify the name of the file you will be using in the android:icon attribute of the element in your AndroidManifest.xml file. Android also allows you to include a promotional video.

For iOS you simply need to add your appropriately sized and named icons to your Resources directory in your XCode project. Here’s a mapping of the icon sizes to the required name of the icon file. NOTE: There is purposely no extension on the 512×512 iTunesArtwork file.

  • 29×29 – Icon-Small.png
  • 50×50 – Icon-Small-50.png
  • 57×57 – Icon.png
  • 58×58 –
  • 72×72 – Icon-72.png
  • 114×114 –
  • 512×512 – iTunesArtwork

For Blackberry Playbook, you need to specify the name of your 86×86 application icon in your application’s blackberry-tablet.xml file. Below is a sample of how you would set that up.

>
    >
        >86x86.png>
    >
    >My Company>
    >core.games>
    >my_splashscreen.jpg>
>

For the Amazon App Store you can also submit promotional images of various sizes and up to 5 promotional videos.

Summary

So as you can see, you’ve got a lot to consider when it comes to presenting your mobile application to the masses. As a developer, I’m looking for the simple solution here. For me, the easiest thing to do was use this 512×512 iOS icon template, create my icon, and scale it down to all the required sizes. If you happen to be reading this post and know a better/easier workflow, please let me know.

Here’s a few references to check out to get some additional information on mobile app icons and market images:

18 Responses to “Mobile Developer’s Icon & Image Checklist”

  1. miku says:
    March 24, 2011 at 10:10 am

    Don’t forget QVGA for Android screenshots:
    http://www.tech-faq.com/qvga.html

  2. Tony Lukasavage says:
    March 24, 2011 at 10:14 am

    @Miku: While the QVGA 320×240 size is a valid screen size for Android devices, it is not a screenshot size supported in the Android market.

  3. Jonathan Campos says:
    March 24, 2011 at 10:52 am

    Agreed. Started with the 512×512 and just scale down where needed. I was lucky that I did that because the Amazon market wanted the 512×512.

  4. Tony Lukasavage says:
    March 24, 2011 at 10:59 am

    @Jonathan: The only place it doesn’t work out well is if you want to also use your product icon as a featured image on the Android Market or Amazon App Store. Those can be larger. Perhaps a 1024×1024 template is in order if anyone wants to tackle that.

    I took the lazy man’s route and scaled up and cropped my 512×512 to the 1024×500 needed for the Android Market. Came out looking rough, but that’s why God invented gaussian blur. ;)

  5. Daily Developer Journal – March 27th, 2011 says:
    March 28, 2011 at 3:01 am

    [...] Starting with the simple stuff and making sure I have all the right size app-icons I’ll need. Thanks to @tonylukasavage for putting this chart together with all the icon sizes for Android, Blackberry iOS. [...]

  6. @crushmedianet says:
    April 1, 2011 at 2:56 pm

    There are also icons needed if you are integrating with facebook.

    Appears next to your app name throughout Facebook (16×16)
    ppears in authorization dialogs, search results, and the app directory (75×75)

  7. Getting Ahead Of The Curve: Branding On Mobile Devices And Desktop Browsers - Smashing Magazine says:
    May 12, 2011 at 7:42 am

    [...] [...]

  8. Getting Ahead Of The Curve: Branding On Mobile Devices And Desktop Browsers says:
    May 12, 2011 at 10:28 am

    [...] Mobile Developer’s Icon & Image Checklist [...]

  9. Getting Ahead Of The Curve: Branding On Mobile Devices And Desktop Browsers | test2 says:
    May 12, 2011 at 11:11 am

    [...] Mobile Developer’s Icon & Image Checklist [...]

  10. Getting Ahead Of The Curve: Branding On Mobile Devices And Desktop Browsers | IdentityNepal.com says:
    May 12, 2011 at 1:09 pm

    [...] Mobile Developer’s Icon Image Checklist [...]

  11. Getting Ahead Of The Curve: Branding On Mobile Devices And Desktop Browsers | Remake Wordpress Theme says:
    May 12, 2011 at 8:01 pm

    [...] Mobile Developer’s Icon & Image Checklist [...]

  12. Getting Ahead Of The Curve: Branding On Mobile Devices And Desktop Browsers | Ruturaj Pradeep Kohok | Your Web Advisor says:
    May 12, 2011 at 9:32 pm

    [...] Mobile Developer’s Icon & Image Checklist [...]

  13. Getting Ahead Of The Curve: Branding On Mobile Devices And Desktop Browsers | Blogs – NG Outsourcing says:
    May 12, 2011 at 9:37 pm

    [...] Mobile Developer’s Icon Image Checklist [...]

  14. Getting Ahead Of The Curve: Branding On Mobile Devices And Desktop Browsers – Achmatim.Net says:
    May 23, 2011 at 4:42 pm

    [...] Mobile Developer’s Icon & Image Checklist [...]

  15. Getting Ahead Of The Curve: Branding On Mobile Devices And Desktop Browsers | Joomla Showcase : CSS Showcase says:
    May 24, 2011 at 7:35 pm

    [...] Mobile Developer’s Icon Image Checklist [...]

  16. says:
    May 26, 2011 at 9:10 am

    [...] One of the many issues you have to manage when creating mobile applications is the myriad number of icon sizes you have to deal with. There's a great summary of them at SavageLook.com. [...]

  17. AIR Mobile – Application Pokémon (21) – Icônes pour Android et iOS « Adobe Flex Tutorial says:
    July 3, 2011 at 12:02 pm

    [...] Merci à Tony Lukasavage pour son billet explicite sur ces points : MOBILE DEVELOPER’S ICON & IMAGE CHECKLIST [...]

  18. » Getting Ahead Of The Curve: Branding On Mobile Devices And Desktop Browsers / Graphic Juice says:
    July 11, 2011 at 10:55 pm

    [...] Mobile Developer’s Icon & Image Checklist [...]