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.
|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|
|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
|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|
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 <application> 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 – Icon-Small@2x.png
- 72×72 – Icon-72.png
- 114×114 – Icon@2x.png
- 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.
<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.
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: