Icon and splash screen sizes for PhoneGap applications

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.


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, 128x128 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:
    • 36x36 for LDPI screens,
    • 48x48 for MDPI screens,
    • 72x72 for HDPI screens,
    • 96x96 for XHDPI screens.
  • BadaOS (Bada 1.0):
    • 128x128.
  • Voluntas (badaWAC, Bada 2.0):
    • 48x48,
    • 50x50,
    • 80x80.
  • BlackBerry:
    • 80x80.
  • iOS:
    • 57x57 for iPhone,
    • 57x57 double sized (actually 114x114), for iPhone 4 and 5 with Retina display,
    • 72x72 for iPad,
    • 72x72 double sized (actually 144x144), for iPad 3 and iPad Mini with Retina Display.
  • WebOS:
    • 64x64.
  • Windows Phone:
    • 173x173 as large application tile,
    • 48x48 as application bar icons,
    • 62x62 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:
    • 320x200 for LDPI screens in landscape orientation,
    • 200x320 for LDPI screens in portrait orientation,
    • 480x320 for MDPI screens in landscape orientation,
    • 320x480 for MDPI screens in portrait orientation,
    • 800x480 for HDPI screens in landscape orientation,
    • 480x800 for HDPI screens in portrait orientation,
    • 1280x720 for XHDPI screens in landscape orientation,
    • 720x1280 for XHDPI screens in portrait orientation.
  • BadaOS (Bada 1.0):
    • 480x800 for portrait orientation,
    • landscape orientation is not supported on this platform.
  • Voluntas (badaWAC, Bada 2.0):
    • 320x480 for Type3 screens in portrait orientation,
    • 480x800 for Type4 screens in portrait orientation,
    • 240x400 for Type5 screens in portrait orientation,
    • landscape orientation is not supported on this platform.
  • BlackBerry:
    • 225x225 for all devices and screeen orientations.
  • iOS:
    • 1024x783 for iPad in landscape orientation,
    • 2008x1536 for iPad with Retina display in landscape orientation,
    • 768x1004 for iPad in portrait orientation,
    • 1536x2008 for iPad with Retina display in portrait orientation,
    • 480x320 for iPhone in landscape orientation,
    • 960x640 for iPhone with Retina display in landscape orientation,
    • 320x480 for iPhone in portrait orientation,
    • 640x960 for iPhone with Retina display in portrait orientation.
  • WebOS:
    • 64x64 (see notes in here for more info),
  • Windows Phone:
    • 480x800 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.


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 (173x173) and two splash screens (2008x1536 landscape + 1536x2008 portrait),
  • downscale it to each dimension mentioned in filenames in res folder (plus 128x128 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:

<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>

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

<icon src="icon.png"></icon>
<icon src="res/icon-36x36-android.png"                gap:platform="android"    gap:density="ldpi"></icon>
<icon src="res/icon-48x48-android-bada-wp.png"        gap:platform="android"    gap:density="mdpi"></icon>
<icon src="res/icon-72x72-android-ios.png"            gap:platform="android"    gap:density="hdpi"></icon>
<icon src="res/icon-96x96-android.png"                gap:platform="android"    gap:density="xhdpi"></icon>
<icon src="res/icon-80x80-blackberry-bada.png"        gap:platform="blackberry"></icon>
<icon src="res/icon-80x80-blackberry-bada.png"        gap:platform="blackberry" gap:state="hover"></icon>
<icon src="res/icon-57x57-ios.png"                    gap:platform="ios"        width="57" height="57"></icon>
<icon src="res/icon-72x72-android-ios.png"            gap:platform="ios"        width="72" height="72"></icon>
<icon src="res/icon-114x114-ios.png"                  gap:platform="ios"        width="114" height="114"></icon>
<icon src="res/icon-144x144-ios.png"                  gap:platform="ios"        width="144" height="144"></icon>
<icon src="res/icon-64x64-webos.png"                  gap:platform="webos"></icon>
<icon src="res/icon-48x48-android-bada-wp.png"        gap:platform="winphone"></icon>
<icon src="res/icon-173x173-wp.png"                   gap:platform="winphone"   gap:role="background"></icon>

<gap:splash src="res/splash-200x320-android.png"             gap:platform="android" gap:density="ldpi"  width="200" height="320"></gap:splash>
<gap:splash src="res/splash-320x480-android-bada-ios.png"    gap:platform="android" gap:density="mdpi"  width="320" height="480"></gap:splash>
<gap:splash src="res/splash-480x800-android-bada-wp.png"     gap:platform="android" gap:density="hdpi"  width="480" height="800"></gap:splash>
<gap:splash src="res/splash-720x1280-android.png"            gap:platform="android" gap:density="xhdpi" width="720" height="1280"></gap:splash>
<gap:splash src="res/splash-320x200-android.png"             gap:platform="android" gap:density="ldpi"  width="320" height="200"></gap:splash>
<gap:splash src="res/splash-480x320-android-bada-ios.png"    gap:platform="android" gap:density="mdpi"  width="480" height="320"></gap:splash>
<gap:splash src="res/splash-800x480-android-bada-wp.png"     gap:platform="android" gap:density="hdpi"  width="800" height="480"></gap:splash>
<gap:splash src="res/splash-1280x720-android.png"            gap:platform="android" gap:density="xhdpi" width="1280" height="720"></gap:splash>
<gap:splash src="res/splash-225x225-blackberry.png"          gap:platform="blackberry"></gap:splash>
<gap:splash src="res/splash-320x480-android-bada-ios.png"    gap:platform="ios"     width="320" height="480"></gap:splash>
<gap:splash src="res/splash-640x960-ios.png"                 gap:platform="ios"     width="640" height="960"></gap:splash>
<gap:splash src="res/splash-768x1024-ios.png"                gap:platform="ios"     width="768" height="1024"></gap:splash>
<gap:splash src="res/splash-1024x768-ios.png"                gap:platform="ios"     width="1024" height="768"></gap:splash>
<gap:splash src="res/splash-480x800-wp.jpg"                  gap:platform="winphone"></gap:splash>

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:

<icon src="icon.png" gap:role="default"></icon>
<gap:splash src="splash.png"></gap:splash>

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.


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