Icon and splash screen sizes for PhoneGap applications

adminCordova0 Comment
12 min. reading

Since PhoneGap is used to build mobile applications for many destination platforms, out of one source files package, and since each platform contains many mobile devices, with different screens sizes and orientations, it is fairly hard task to design set of mobile application icons and splash screens to suit all needs.

This post is meant to help you with solving this problem, but it is nothing more than a bunch of links to an external sources plus some comments.

Intro

If you want to get around the problem more deeply, you should spend some time on reading these topics.

For mobile application icon sizes:

For mobile application splash screen, there’s only PhoneGap General guide, without extra external links.

The problem gets even more complicated, as you probably haven’t got access to all these devices, to actually and visually test, if everything is really OK. Most developers uses emulators and only part of mobile devices, they really own or have access to.

Because of this, I have incorporated a bit different approach to this problem. I assumed that colective knowledge is far, far better than mine small experience in this area and I have addapted solution introduced in original PhoneGap HelloWorld application (more info in this post).

I have incorporated HelloWorld application’s res folder structure into my own base up. During this, I have done some heavy work on updating that base app (removing unecessary folders and subfolders or duplicated files, correcting some sizes etc.). If you would like to use my application instead of original HelloWorld, you can grab it at GitHub.

That app in general:

  • contains one, main icon icon.png, 128×128 pixels size directly in root application folder,
  • stores all other variations and combinations of icons and splash screens in res subfolder.

Mobile application icon

PhoneGap Hello World uses following set of files (in res folder) for mobile application icons:

  • Android:
    • 36×36 for LDPI screens,
    • 48×48 for MDPI screens,
    • 72×72 for HDPI screens,
    • 96×96 for XHDPI screens.
  • BadaOS (Bada 1.0):
    • 128×128.
  • Voluntas (badaWAC, Bada 2.0):
    • 48×48,
    • 50×50,
    • 80×80.
  • BlackBerry:
    • 80×80.
  • iOS:
    • 57×57 for iPhone,
    • 57×57 double sized (actually 114×114), for iPhone 4 and 5 with Retina display,
    • 72×72 for iPad,
    • 72×72 double sized (actually 144×144), for iPad 3 and iPad Mini with Retina Display.
  • WebOS:
    • 64×64.
  • Windows Phone:
    • 173×173 as large application tile,
    • 48×48 as application bar icons,
    • 62×62 as small application tile.

As you may read in here, BlackBerry supports many other icons sizes than the only one specified above. I’m not sure, why demo app contains only one icon for this platform, but I assume that this is due to having extra icon in root folder and notes for BlackBerry, saying: “the BBW packager will look for icon.gif, icon.png, and icon.jpg in the root of the app package by default, or go for what’s specified in config.xml”.

Splash screen for mobile app

As for splash screens we have following set of files in PhoneGap Hello World demo app:

  • Android:
    • 320×200 for LDPI screens in landscape orientation,
    • 200×320 for LDPI screens in portrait orientation,
    • 480×320 for MDPI screens in landscape orientation,
    • 320×480 for MDPI screens in portrait orientation,
    • 800×480 for HDPI screens in landscape orientation,
    • 480×800 for HDPI screens in portrait orientation,
    • 1280×720 for XHDPI screens in landscape orientation,
    • 720×1280 for XHDPI screens in portrait orientation.
  • BadaOS (Bada 1.0):
    • 480×800 for portrait orientation,
    • landscape orientation is not supported on this platform.
  • Voluntas (badaWAC, Bada 2.0):
    • 320×480 for Type3 screens in portrait orientation,
    • 480×800 for Type4 screens in portrait orientation,
    • 240×400 for Type5 screens in portrait orientation,
    • landscape orientation is not supported on this platform.
  • BlackBerry:
    • 225×225 for all devices and screeen orientations.
  • iOS:
    • 1024×783 for iPad in landscape orientation,
    • 2008×1536 for iPad with Retina display in landscape orientation,
    • 768×1004 for iPad in portrait orientation,
    • 1536×2008 for iPad with Retina display in portrait orientation,
    • 480×320 for iPhone in landscape orientation,
    • 960×640 for iPhone with Retina display in landscape orientation,
    • 320×480 for iPhone in portrait orientation,
    • 640×960 for iPhone with Retina display in portrait orientation.
  • WebOS:
    • 64×64 (see notes in here for more info),
  • Windows Phone:
    • 480×800 for all screens in portrait orientation.jpg,
    • landscape orientation and other screens sizes are not supported on this platform.

There are notes on many things (sometimes strange — like Windows Phone forcing standard 24-bit JPG files to be rendered in 16-bit color depth), that you should consider, when designing your app splash screen, to spend some time on reading PhoneGap general guide about this topic.

Reuse

If you would like to use file set from either mine or PhoneGap HelloWorld application, all you have to do is to:

  • copy res folder structure from PhoneGap HelloWorld or mine,
  • design one icon (173×173) and two splash screens (2008×1536 landscape + 1536×2008 portrait),
  • downscale it to each dimension mentioned in filenames in res folder (plus 128×128 icon for root folder!),
  • write downscaled files under proper filenames, overwriting original ones (plus the one in root folder),
  • add proper entries to your config.xml.

Here are lines to be added to config.xml to support above mentioned structure.

If you’re using PhoneGap HelloWorld application, then add:

[code language=”xml”]
<icon src="icon.png"></icon>
<icon src="res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:density="ldpi"></icon>
<icon src="res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:density="mdpi"></icon>
<icon src="res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:density="hdpi"></icon>
<icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:density="xhdpi"></icon>
<icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry"></icon>
<icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"></icon>
<icon src="res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57"></icon>
<icon src="res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72"></icon>
<icon src="res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114"></icon>
<icon src="res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144"></icon>
<icon src="res/icon/webos/icon-64.png" gap:platform="webos"></icon>
<icon src="res/icon/windows-phone/icon-48.png" gap:platform="winphone"></icon>
<icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone" gap:role="background"></icon>

<gap:splash src="res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:density="ldpi"></gap:splash>
<gap:splash src="res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:density="mdpi"></gap:splash>
<gap:splash src="res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:density="hdpi"></gap:splash>
<gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi"></gap:splash>
<gap:splash src="res/screen/blackberry/screen-225.png" gap:platform="blackberry"></gap:splash>
<gap:splash src="res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480"></gap:splash>
<gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960"></gap:splash>
<gap:splash src="res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024"></gap:splash>
<gap:splash src="res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768"></gap:splash>
<gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone"></gap:splash>
[/code]

If you prefer my base app‘s res folder structure, then you should add these lines to your config.xml:

[code language=”xml”]
<icon src="icon.png"></icon>
<icon src="res/icon-36×36-android.png" gap:platform="android" gap:density="ldpi"></icon>
<icon src="res/icon-48×48-android-bada-wp.png" gap:platform="android" gap:density="mdpi"></icon>
<icon src="res/icon-72×72-android-ios.png" gap:platform="android" gap:density="hdpi"></icon>
<icon src="res/icon-96×96-android.png" gap:platform="android" gap:density="xhdpi"></icon>
<icon src="res/icon-80×80-blackberry-bada.png" gap:platform="blackberry"></icon>
<icon src="res/icon-80×80-blackberry-bada.png" gap:platform="blackberry" gap:state="hover"></icon>
<icon src="res/icon-57×57-ios.png" gap:platform="ios" width="57" height="57"></icon>
<icon src="res/icon-72×72-android-ios.png" gap:platform="ios" width="72" height="72"></icon>
<icon src="res/icon-114×114-ios.png" gap:platform="ios" width="114" height="114"></icon>
<icon src="res/icon-144×144-ios.png" gap:platform="ios" width="144" height="144"></icon>
<icon src="res/icon-64×64-webos.png" gap:platform="webos"></icon>
<icon src="res/icon-48×48-android-bada-wp.png" gap:platform="winphone"></icon>
<icon src="res/icon-173×173-wp.png" gap:platform="winphone" gap:role="background"></icon>

<gap:splash src="res/splash-200×320-android.png" gap:platform="android" gap:density="ldpi" width="200" height="320"></gap:splash>
<gap:splash src="res/splash-320×480-android-bada-ios.png" gap:platform="android" gap:density="mdpi" width="320" height="480"></gap:splash>
<gap:splash src="res/splash-480×800-android-bada-wp.png" gap:platform="android" gap:density="hdpi" width="480" height="800"></gap:splash>
<gap:splash src="res/splash-720×1280-android.png" gap:platform="android" gap:density="xhdpi" width="720" height="1280"></gap:splash>
<gap:splash src="res/splash-320×200-android.png" gap:platform="android" gap:density="ldpi" width="320" height="200"></gap:splash>
<gap:splash src="res/splash-480×320-android-bada-ios.png" gap:platform="android" gap:density="mdpi" width="480" height="320"></gap:splash>
<gap:splash src="res/splash-800×480-android-bada-wp.png" gap:platform="android" gap:density="hdpi" width="800" height="480"></gap:splash>
<gap:splash src="res/splash-1280×720-android.png" gap:platform="android" gap:density="xhdpi" width="1280" height="720"></gap:splash>
<gap:splash src="res/splash-225×225-blackberry.png" gap:platform="blackberry"></gap:splash>
<gap:splash src="res/splash-320×480-android-bada-ios.png" gap:platform="ios" width="320" height="480"></gap:splash>
<gap:splash src="res/splash-640×960-ios.png" gap:platform="ios" width="640" height="960"></gap:splash>
<gap:splash src="res/splash-768×1024-ios.png" gap:platform="ios" width="768" height="1024"></gap:splash>
<gap:splash src="res/splash-1024×768-ios.png" gap:platform="ios" width="1024" height="768"></gap:splash>
<gap:splash src="res/splash-480×800-wp.jpg" gap:platform="winphone"></gap:splash>
[/code]

Usually you should add them by the end of your config.xml, just above “ closing tag.

Note: If you’re developing your app using a Mac (or know similar software for other systems), you may consider drawing for Android version of your app a nine-patch PNG image, where you can define areas with can be stretched. With such image, no matter which resolution is used on destination device, your splash screen (and/or icon) looks OK. More information can be found here. Pity, that there is no such soft for Windows.

Minimal approach

Of course, most of above mentioned guides are for production mode and for larger applications, that you wish to ship into different mobile apps markets (for example Apple store will not let you publish your app unless it contains icons and splash screens in number, size and format precisely described in documents mentioned in introduction to this document).

If you’re building only a developer version or an internal project, that will not ship to markets, you can drop the idea of splash screen or icon. Or use minimal approach. For example the one from alunny’s PhoneGap-start application.

This consists of putting just the two files (name doesn’t matter) into root folder and adding line similar to this:

[code language=”xml”]
<icon src="icon.png" gap:role="default"></icon>
<gap:splash src="splash.png"></gap:splash>
[/code]

to your config.xml file. But keep in mind, that too small images (prepared for old devices) for icons / splash screens will be ugly stretched on high-resolution devices (like Apple ones with Retina display or Android ones with XHDPI screens). And, if you choose to large image (good for newest devices), old devices could fail downscale it to proper size and your application size will increase. But, as rule of thumb says, it is always better to use to large than to small image, as down-scaling produces better effects most time than upscaling process.

Android’s landscape orientation issue

There is a known issue, that PhoneGap apps build with PhoneGap build does not displays landscape splash screens for Android platform and instead forcing user to see ugly streached portrait version. This problem has been pointed out by me on StackOverflow and on PhoneGap Google Groups, but there was nearly no response. There is also no information on either docs or blog on PhoneGap main site. So, we may assume that there is no official workaround for this problem.

The best way (not to much professional though, but still something) to solve it or how would I solve it, is to either avoid landscape orientation for Android at all.

And, if it is necessary, consider using your own splash screen. There are a lot of examples around Internet. The longest part of your PhoneGap application init process is the time to load PhoneGap itself and/or other framework like jQuery, Sencha or Bootstrap. So, you can design a very simple HTML file (your splash screen), that will not contain any external JavaScript libs and though, it will load fast. Use any redirection method in that file, to redirect your PhoneGap app to actual main screen, which contains all actual libs (including PhoneGap.js itself). As long as it is loading (during redirect) your user should see previously displayed splash screen HTML file.

This approach (or solution) is only a theoretical concept. I haven’t got opportunity to test it out live.

Conclusion

No matter, which approach you’re about to use, please keep in mind, that defaults setting (AutoHideSplashScreen set to True) is not good enough most time. As with it, your splash screen gets usually hidden to late, when you’re using just a pure JavaScript/CSS, thus making a user feeling, that your app loads way too long. Or, it gets hidden to early, when you’re using some frameworks like jQuery Mobile, Bootstrap, Sencha Touch etc., and your users see not fully loaded application.

Look into this post for more details on this.

Leave a Reply