Setup Icon & Splash Screen for Cordova (PhoneGap)

How to Setup icon for phonegap project

Create a new folder called res outside to www directory

Method 1 (Simple & Easy Step)

1. Create your icon file with size of (500 X 500px)
2. Create new folder (root directory, not in www) called res for storing your icon file
3. Add this <icon src="res/icon.png"/> on your config.xml file
4. Save and compile

Method 2

• Create Icon Set
• Create New Folder (root directory, not in www) called res in your project directory
• Create Sub Directories under res folder
• Goto config.xml file and add / edit following lines

Android

<platform name="android">
<icon src="res/android/ldpi.png" density="ldpi" />
<icon src="res/android/mdpi.png" density="mdpi" />
<icon src="res/android/hdpi.png" density="hdpi" />
<icon src="res/android/xhdpi.png" density="xhdpi" />
</platform>

ios

<platform name="ios">
 <icon src="res/ios/icon-60@3x.png" width="180" height="180" />
 <icon src="res/ios/icon-60.png" width="60" height="60" />
 <icon src="res/ios/icon-60@2x.png" width="120" height="120" />
 <icon src="res/ios/icon-76.png" width="76" height="76" />
 <icon src="res/ios/icon-76@2x.png" width="152" height="152" />
 <icon src="res/ios/icon-40.png" width="40" height="40" />
 <icon src="res/ios/icon-40@2x.png" width="80" height="80" />
 <icon src="res/ios/icon.png" width="57" height="57" />
 <icon src="res/ios/icon@2x.png" width="114" height="114" />
 <icon src="res/ios/icon-72.png" width="72" height="72" />
 <icon src="res/ios/icon-72@2x.png" width="144" height="144" />
 <icon src="res/ios/icon-small.png" width="29" height="29" />
 <icon src="res/ios/icon-small@2x.png" width="58" height="58" />
 <icon src="res/ios/icon-50.png" width="50" height="50" />
 <icon src="res/ios/icon-50@2x.png" width="100" height="100" />
 </platform>

• Save & Recompile your application

how to setup splash screen for phonegap project

In this splash screen tutorial, we’re going to learn how to setup splash screen for phonegap project or apache cordova based applications.

Follow these steps:

Step 1 : Create your cordova (phonegap) project

cordova create projectname
cd projectname

Step 2 : Add Splash Screen Plugins

cordova plugin add cordova-plugin-splashscreen

step 3 :

Create New folder called (res) in your root directory and save / move your splash screen images.

Step 4:

Change your config.xml file with following

<platform name="android">
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>

<platform name="ios">
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
    <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
</platform>

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

<platform name="windows8">
    <splash src="res/screen/windows8/splashscreen.png" width="620" height="300"/>
</platform>
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="5000" />

where SplashScreenDelay is display duration in milliseconds

Step 5 : save and compile

There are two methods in splash screen plugin. such as

splashscreen.show
splashscreen.hide