Tony Lukasavage

Caffeine. Whiskey. Code. Mostly the last one.

Mobile Developer's Icon & Image Checklist

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 58x58 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
29x29 iPhone Settings and Spotlight, iPad Settings
36x36 low pixel density icon
48x48 medium pixel density icon
50x50 iPad Spotlight. iOS will trim 1 pixel off each side and add a drop shadow, making it 48x48
57x57 standard iPhone icon
58x58 iPhone 4 Settings and Spotlight
64x64 optional small custom document icon
72x72 Android high pixel density icon, iPad icon
86x86 standard Playbook icon. It will trim 5 pixels off each side, making it 76x76
96x96 Potential icon size if iPad gets a high ppi screen
114x114 standard iPhone 4 icon
144x144 Potential icon size if iPad gets a high ppi screen
320x320 optional large custom document icon


Distribution Images

Android Market Apple App Store Blackberry App World Amazon App Store Notes
screenshot sizes 320x480, 480x800, 480x854, 1280x800 iPhone: 320x480, 480x320, 320x460, 480x300 iPhone 4: 640x960, 960x640 iPad: 768x1024, 1024x768, 748x1024, 1004x768 640x640 or smaller 480x854, 854x480 required # of screenshots: Android: at least 2 Apple: at least 1 Blackberry: 1-50 Amazon: 3-10
114x114 device icon
180x120 Promotional graphic (no alpha)
480x480 Product icon that should match your 86x86 icon
512x512 Large/High resolution product icon
1024x500 Feature graphic for market

Additional Notes

For Android, your 36x36, 48x48, and 72x72 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 512x512 iTunesArtwork file.

  • 29x29 - Icon-Small.png
  • 50x50 - Icon-Small-50.png
  • 57x57 - Icon.png
  • 58x58 - Icon-Small@2x.png
  • 72x72 - Icon-72.png
  • 114x114 - Icon@2x.png
  • 512x512 - iTunesArtwork

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

1
2
3
4
5
6
7
8

<qnx>
    <icon>
        <image>86x86.png</image>
    </icon>
    <publisher>My Company</publisher>
    <category>core.games</category>
    <splashscreen>my_splashscreen.jpg</splashscreen>
</qnx>

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 512x512 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: