CODEWITHSUNDEEP
androidioscordova
Shivanand L.C
Shivanand L.C

Reputation: 105

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

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.

Upvotes: 3

Views: 13568

Answers (3)

Uche Azinge
Uche Azinge

Reputation: 692

Also ensure that the platform being targeted is that your intended platform using the config-file tag.

Example:

<gap:config-file platform="android">

Upvotes: 0

Sanjay
Sanjay

Reputation: 604

paste your icon in res->icon->android = if android then paste in android,if ios than ios. than after open main config file of cordova project. it will look like below : 

<platform name="android">
    <allow-intent href="market:*" />
    <icon density="ldpi" src="res/icon/android/user.png" />
    <icon density="mdpi" src="res/icon/android/user.png" />
    <icon density="hdpi" src="res/icon/android/user.png" />
    <icon density="xhdpi" src="res/icon/android/user.png" />
</platform>

Upvotes: 0

Simon Prickett
Simon Prickett

Reputation: 4148

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.

Upvotes: 16

Related Questions