Standartized splash screen support for Cordova

Configuring splash screen

Configuration of splashscreen is similar to existing phonegap build specification, and to existing <icon> behaviour.

You can define app splashscreen via <splash> element (config.xml). If you do not specify a splash screen then the default splash screen for each platform is used.

    <splash src="splash.png" width="120" height="240" density="mdpi"/>

src: (required) specifies the location of the image file, relative to application root directory

width: (optional) image width in pixels

height: (optional) image height in pixels

density: (optional) android specific, specifies image density

For each platform you can also define a splashscreens to fit different screen resolutions.


     <platform name="android">
              <!-- Portrait -->
              <splash src="res/android/splash-portrait-ldpi.png" density="port-ldpi" width="320" height="426" />
              <splash src="res/android/splash-portrait-mdpi.png" density="port-mdpi" width="320" height="470" />
              <splash src="res/android/splash-portrait-hdpi.png" density="port-hdpi" width="480" height="640" />
              <splash src="res/android/splash-portrait-xhdpi.png" density="port-xhdpi" width="720" height="960" />
              <!-- Landscape -->
              <splash src="res/android/splash-ldpi.png" density="land-ldpi" width="426" height="320" />
              <splash src="res/android/splash-mdpi.png" density="land-mdpi" width="470" height="320" />
              <splash src="res/android/splash-hdpi.png" density="land-hdpi" width="640" height="480" />
              <splash src="res/android/splash-xhdpi.png" density="land-xhdpi" width="960" height="720" />


     <platform name="ios">
              <!-- iPhone  -->
              <splash src="res/ios/splash.png" width="320" height="480" />
              <!-- iPhone Retina  -->
              <splash src="res/ios/splash-2x.png" width="640" height="960" />
              <!-- iPhone 5  -->
              <splash src="res/ios/splash-wide.png" width="640" height="1136" />
              <!-- iPad -->
              <splash src="res/ios/splash-ipad-portrait.png" width="768" height="1024" />
              <splash src="res/ios/splash-ipad-landscape.png" width="1024" height="768" />
              <!-- iPad Retina -->
              <splash src="res/ios/splash-ipad-portrait-2x.png" width="1536" height="2048" />
              <splash src="res/ios/splash-ipad-landscape-2x.png" width="2048" height="1536" />

Windows Phone8

     <platform name="wp8">
              <splash src="res/wp/splash.jpg" width="768" height="1280" />


     <platform name="windows8">
              <splash src="res/windows8/splash.png" width="300" height="620" />

Platform-specific quirks

Splash Screens for the Android Platform

The size for each should be:

  • xlarge (xhdpi): at least 960 × 720
  • large (hdpi): at least 640 × 480
  • medium (mdpi): at least 470 × 320
  • small (ldpi): at least 426 × 320

More info here

Splash Screens for the iOS Platform

Sizes of images for IOS platform defined here

Splash Screens for the Windows Phone 8 platform

Image size for Windows phone devices should be 768 × 1280 px (Guide)

Also Windows Phone 8 supports only JPEG splashscreen images.

Splash Screens for the Windows 8 platform

Image size for Windows 8 should be 620 x 300 px. Also Background color for splashscreen is not requred, but recommended.Design Guidelines, SplashScreen Quickstart, Appxmanifest reference


Image, specified by src attribute copied during ‘prepare’ step to platform splashscreen location:

  • Windows8: images/splashscreen.png
  • WP8: splashscreenimage.jpg
  • Android: res/drawable-land|port-{dpi}/screen.png
  • IOS: resources/splash/default-*.png

Resulting name of the file is defined from its’ width and height attributes, or density attribute, if defined.


Leave a Reply

Your email address will not be published. Required fields are marked *