Setup Icon & Splash 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)
- 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 yourconfig.xmlfile - 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.xmlfile 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 projectnameStep 2 : Add Splash Screen Plugins
cordova plugin add cordova-plugin-splashscreenstep 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