How to set Icon for app using Cordova for Android and iOS
12,834
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/[email protected]" 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/[email protected]" width="120" height="120" />
<!-- iPad -->
<icon src="res/ios/icon-76.png" width="76" height="76" />
<icon src="res/ios/[email protected]" width="152" height="152" />
<!-- Spotlight Icon -->
<icon src="res/ios/icon-40.png" width="40" height="40" />
<icon src="res/ios/[email protected]" width="80" height="80" />
<!-- iOS 6.1 -->
<!-- iPhone / iPod Touch -->
<icon src="res/ios/icon.png" width="57" height="57" />
<icon src="res/ios/[email protected]" width="114" height="114" />
<!-- iPad -->
<icon src="res/ios/icon-72.png" width="72" height="72" />
<icon src="res/ios/[email protected]" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/ios/icon-small.png" width="29" height="29" />
<icon src="res/ios/[email protected]" width="58" height="58" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/ios/icon-50.png" width="50" height="50" />
<icon src="res/ios/[email protected]" width="100" height="100" />
<!-- iPad Pro -->
<icon src="res/ios/[email protected]" 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.
Related videos on Youtube
Author by
Shivanand L.C
Updated on October 02, 2022Comments
-
Shivanand L.C over 1 year
I build an app using Cordova Phonegap for Android but confusing about how to set an app icon for my app so that it should support for both Android as well as iOS.
-
ELITE over 6 yearsnot working.. I tried adding
icon
inconfig.xml
but no success..still seeing default logo -
Gina Gina over 5 yearssame here..not working for iPhone..how did you resolve the issue?