Setup Icon & Splash for Cordova (PhoneGap)

SUNDARAVEL SUBSCRIBE

I teach how to build apps using ionic and flutter

How to Setup icon for PhoneGap project

Create a new folder called res outside to www directory

Method 1 (Simple & Easy Step)

Create your icon file with size of (500 X 500px)
Create new folder (root directory, not in www) called res for storing your icon file
Add this <icon src="res/icon.png"/> on your config.xml file
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>

where SplashScreenDelay is display duration in milliseconds

Categories: Cordova Tutorial PhoneGap Tutorial

Tags:Cordova tutorial cordova-plugin-splashscreen PhoneGap Tutorial