Generating iOS and Android Icons in Cordova/Phonegap

Generating iOS and Android icons in Cordova / PhoneGap

I wrote a script that auto generates icons for cordova using ImageMagick:

https://github.com/AlexDisler/cordova-icon

To use it, create an "icon.png" file and place it in the root folder of your project, then run:

cordova-icon

and it will generate all the required icons for the platforms your project has.

You can also configure it as a hook in your cordova project so the icons will be generated every time you build the project based on the icon.png you've added. (instructions in the readme).

How to set Icon for app using Cordova for Android and iOS

You can configure this using the <icon> element in config.xml which is the main Cordova configuration file for your project. You will need your icons in a range of sizes for the different platforms that you are targeting.

Example config.xml entry for Android:

<platform name="android">
<!--
ldpi : 36x36 px
mdpi : 48x48 px
hdpi : 72x72 px
xhdpi : 96x96 px
xxhdpi : 144x144 px
xxxhdpi : 192x192 px
-->
<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" />
<icon src="res/android/xxhdpi.png" density="xxhdpi" />
<icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
</platform>

and for iOS:

<platform name="ios">
<!-- iOS 8.0+ -->
<!-- iPhone 6 Plus -->
<icon src="res/ios/icon-60@3x.png" width="180" height="180" />
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="res/ios/icon-60.png" width="60" height="60" />
<icon src="res/ios/icon-60@2x.png" width="120" height="120" />
<!-- iPad -->
<icon src="res/ios/icon-76.png" width="76" height="76" />
<icon src="res/ios/icon-76@2x.png" width="152" height="152" />
<!-- Spotlight Icon -->
<icon src="res/ios/icon-40.png" width="40" height="40" />
<icon src="res/ios/icon-40@2x.png" width="80" height="80" />
<!-- iOS 6.1 -->
<!-- iPhone / iPod Touch -->
<icon src="res/ios/icon.png" width="57" height="57" />
<icon src="res/ios/icon@2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="res/ios/icon-72.png" width="72" height="72" />
<icon src="res/ios/icon-72@2x.png" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/ios/icon-small.png" width="29" height="29" />
<icon src="res/ios/icon-small@2x.png" width="58" height="58" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/ios/icon-50.png" width="50" height="50" />
<icon src="res/ios/icon-50@2x.png" width="100" height="100" />
<!-- iPad Pro -->
<icon src="res/ios/icon-83.5@2x.png" width="167" height="167" />
</platform>

You will need to set src to the appropriate relative path to where you are storing your icons in your project... res/<platform_name>/... would be a good path to use but you can use anything.

Further information can be found in the official Cordova documentation.

How to set icon in Cordova?

Next I generated all the necessary icon sizes and loaded them in res/icon/android and res/icon/ios and then added the following the icon references to the config.xml from the guide above.

Did you do that by hand? /p>

There's a package that does it all for you.

npm install -g cordova-res
cordova-res

You need the following file structure:

resources/
├── icon.png
└── splash.png
config.xml

Also: in Android, the icon is cached sometimes. You have to either restart your launcher or the phone. (maybe cleaning the app cache works too)

Adding icons to IOS App in Cordova CLI 6.3.1

You're probably missing the right icon size. Currently these are all the icons iOS requires.

<platform name="ios">
<icon height="57" src="res/icons/icon-57.png" width="57" />
<icon height="114" src="res/icons/icon-114.png" width="114" />
<icon height="72" src="res/icons/icon-72.png" width="72" />
<icon height="144" src="res/icons/icon-144.png" width="144" />
<icon height="76" src="res/icons/icon-76.png" width="76" />
<icon height="152" src="res/icons/icon-152.png" width="152" />
<icon height="40" src="res/icons/icon-40.png" width="40" />
<icon height="80" src="res/icons/icon-80.png" width="80" />
<icon height="50" src="res/icons/icon-50.png" width="50" />
<icon height="100" src="res/icons/icon-100.png" width="100" />
<icon height="120" src="res/icons/icon-120.png" width="120" />
<icon height="180" src="res/icons/icon-180.png" width="180" />
<icon height="29" src="res/icons/icon-29.png" width="29" />
<icon height="58" src="res/icons/icon-58.png" width="58" />
<icon height="87" src="res/icons/icon-87.png" width="87" />
<icon height="167" src="res/icons/icon-167.png" width="167" />
</platform>

iOS App icon and Splash screen aren't updating for PhoneGap Project

Looks like I was doing everything correctly, however in Xcode, I needed to go to:

Product > Clean

...to clear out any old settings and cache.

I found this answer here -> https://stackoverflow.com/a/18868704/647621



Related Topics



Leave a reply



Submit