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
Fragment in Viewpager Not Restored After Popbackstack
Coordinatorlayout Using The Viewpager's Recyclerview
Android: How to Get a Modal Dialog or Similar Modal Behavior
Animation for Expandablelistview
Using Espresso to Unit Test Google Maps
How to Store Files Generated from App in "Downloads" Folder of Android
Syncadapter Without a Contentprovider
Android: How to Check How Much Memory Is Remaining
How to Capture Key Events from Bluetooth Headset with Android
Failed to Find Build Tools Revision 21.1.1 - Sdk Up to Date
Speechrecognizer Causes Anr... I Need Help with Android Speech API
How to Store Object in Sqlite Database
Change The Background Color of Cardview Programmatically
Should The Call to The Superclass Method Be The First Statement
How to Get Md5 from Debug.Keystore File