Splash screen and launcher icons - sizes and structure, for Appcelerator Titanium project
Being new to developing with Titanium Studio, I came across a lack of (clear) documentation as the resource formats and structure of files required to develop a cross platform application (and for it to look great on each device!).
Both Android and iOS have different approaches as to where they expect resources to be located in the build of an application (after Titanium has converted each to their native language). Therefore, I hope this article will help others as a starting point.
To begin with we need to create the images (at the correct aspect ratios) for the application...
Creating the Images Required
To ensure your application is optimised for all platforms, it's essential you have all of the image dimensions (or more importantly aspect ratios) listed below.
Note: those mentioned in the right column are simply resized versions of the larger counterpart, therefore creative isn't needed for these - just a resize and file save!
Dimensions Orientation Aspect ratio Platform Used to also make these image sizes:
Splash Screens
2048x1496 Landscape 256:187 iPad retina 1024x748 1024x768 Landscape 4:3 Android/Mobile web 320x240 800x480 Landscape 5:3 Android 400x240 480x320 Landscape 3:2 Android 1536x2008 Portrait 192:251 iPad retina 768x1004 768x1024 Portrait 3:4 Mobile web 640x1136 Portrait 40:71 iOS iPhone 5 retina 640x960 Portrait 2:3 iOS iPhone 4S/iPod/Android 320x480 480x800 Portrait 3:5 Android 240x400
App Launcher Icons
512x512 [none] Android 128x128 512x512 [none] iOS 144x144, 114x114, 72x72, 57x57, 50x50, 29x29
Splash Screens
Now we've created our images, it's time to place them into the corresponding resource folders, with the appropriate filenames needed by each platform. You can do this manually (copying folder by folder and resizing as you go), but I recommend using a script mentioned to the foot of this article for quick deployment.
Dimensions Orientation Filename Notes Image to resize from Destination folder
iOS
2048x1496* Landscape [email protected] iPad retina [original] Resources/iphone/ 1024x748 Landscape Default-Landscape.png iPad 2048x1496 Resources/iphone/ 1536x2008* Portrait [email protected] iPad retina [original] Resources/iphone/ 768x1004 Portrait Default-Portrait.png iPad 1536x2008 Resources/iphone/ 640x1136* Portrait [email protected] iPhone 5 [original] Resources/iphone/ 640x960 Portrait [email protected] iPhone 4S/iPod [original] Resources/iphone/ 320x480 Portrait Default.png iPhone/iPod 640x960 Resources/iphone/
Android
800x480 Landscape default.png Large screen, high density, long screen [original] Resources/android/images/res-long-land-hdpi/ 800x480 Landscape default.png Large screen high, density [original] Resources/android/images/res-notlong-land-hdpi/ 480x320 Landscape default.png Medium screen, medium density [original] Resources/android/images/res-notlong-land-mdpi/ 400x240 Landscape default.png Small screen, low density, long screen 800x480 Resources/android/images/res-long-land-ldpi/ 320x240 Landscape default.png Small screen, low density 1024x768 Resources/android/images/res-notlong-land-ldpi/ 480x800 Portrait default.png Large screen, high density, long screen [original] Resources/android/images/res-long-port-hdpi/ 480x800 Portrait default.png Large screen high, density [original] Resources/android/images/res-notlong-port-hdpi/ 320x480 Portrait default.png Medium screen, medium density 640x960 Resources/android/images/res-notlong-port-mdpi/ 320x480 Portrait default.png Default fallback splash screen 640x960 Resources/android/ 240x400 Portrait default.png Small screen, low density, long screen 480x800 Resources/android/images/res-long-port-ldpi/ 240x400 Portrait default.png Small screen, low density 480x800 Resources/android/images/res-notlong-port-ldpi/
Mobile Web
1024x768 Landscape Place in splash folder Specified in CSS in splash folder [original] Resoures/mobileweb/splash/ 768x1024 Portrait Place in splash folder Specified in CSS in splash folder [original] Resoures/mobileweb/splash/
Launcher Icons
Finally, it's time for our application launcher icons. Again, simply place in the corresponding folder ensuring the correct filename specified.
Dimensions Orientation Filename Notes Image to resize from Destination folder
iOS
512x512 [none] [email protected] App Store icon 512x512 Resources/iphone/ 144x144 [none] appicon-144.png iPad Retina 512x512 Resources/iphone/ 114x114 [none] [email protected] iPhone/iPod Retina icon 512x512 Resources/iphone/ 72x72 [none] appicon-72.png Low res iPads 512x512 Resources/iphone/ 57x57 [none] appicon.png Low res iPhones 512x512 Resources/iphone/ 50x50 [none] appicon-Small-50.png Spotlight search for lower iPads 512x512 Resources/iphone/ 29x29 [none] appicon-Small.png Spotlight search for lower iPhones 512x512 Resources/iphone/
Android
128x128 [none] default.png Android app icon 512x512 Resources/android/
Android launcher icons: I had issues with specifying Android specific app launcher icons (again little documentation!). However having the default as 128x128, this meant (or at least from testing) that the platform was able to resize to the correct dimensions for each. If anyone's got any further information on Android launcher icons I'd love to add this information to the article.
Useful Resources
Automated Deployment of Images
If you'd like a quick tool to help you generate these images, you can visit Bob Sims Gist page, who's created a great script to help you out.
Note: the above script is run via a shell command prompt, but does not yet support the high density images for the iPhone 5 and iPad retina. These would need to be manually added as per the table above (marked by an *).
External Links
Android: Supporting multiple screens
iOS: Custom app icons and splash screens

















