codesundar

Setup Icon & Splash for Cordova (PhoneGap)

cordova-icon-splash-setup

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>

where SplashScreenDelay is display duration in milliseconds

Categories: Cordova TutorialPhoneGap Tutorial
Tags:Cordova tutorialcordova-plugin-splashscreenPhoneGap Tutorial
Topics
About Me

Hey! I'm sundar. I created codesundar.com for sharing my knowledge to the world

Follow Me