Customize Icons

This section shows how to configure an app's icon for various platforms. Support for splash screen has moved to a Cordova plugin of its own. The configuration options can be found in the Splashscreen plugin docs.

Configuring Icons in the CLI

When working in the CLI you can define app icon(s) via <icon> element (config.xml). If you do not specify an icon then the Apache Cordova logo is used.

    <icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" />
Attributes Description
src Required
Location of the image file, relative to your project directory
platform Optional
Target platform
width Optional
Icon width in pixels
height Optional
Icon height in pixels
density Optional
Android
Specified icon density
target Optional
Windows
Destination filename for the image file and all its' MRT companions

The following configuration can be used to define single default icon which will be used for all platforms.

    <icon src="res/icon.png" />

For each platform you can also define a pixel-perfect icons set to fit different screen resolutions.

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>

See Also

BlackBerry10

    <platform name="blackberry10">
        <icon src="res/bb10/icon-86.png" />
        <icon src="res/bb10/icon-150.png" />
    </platform>

See Also

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" />
        <!-- iOS 6.1 -->
        <!-- 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" />
        <!-- 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" />
    </platform>

See Also

Windows

For Windows the recommended approach to define app icons is to use target attribute.

    <platform name="windows">
        <icon src="res/windows/storelogo.png" target="StoreLogo" />
        <icon src="res/windows/smalllogo.png" target="Square30x30Logo" />
        <icon src="res/Windows/Square44x44Logo.png" target="Square44x44Logo" />
        <icon src="res/Windows/Square70x70Logo.png" target="Square70x70Logo" />
        <icon src="res/Windows/Square71x71Logo.png" target="Square71x71Logo" />
        <icon src="res/Windows/Square150x150Logo.png" target="Square150x150Logo" />
        <icon src="res/Windows/Square310x310Logo.png" target="Square310x310Logo" />
        <icon src="res/Windows/Wide310x150Logo.png" target="Wide310x150Logo" />
    </platform>

where source is the path to the icon which needs to be added.

Please note that Windows platform handles MRT icons automatically, so if you specify src="res/windows/storelogo.png" the following files will be copied into app's images folder: res/windows/storelogo.scale-100.png, res/windows/storelogo.scale-200.png, etc.

The target attribute specifies the base name for resultant icons. For every icon file destination filename is calculated as target + '.' + MRT_qualifiers + extension(src). For the icons to display properly in resultant app every target value should be the one of icon filenames, defined in application's .appxmanifest file.

Summarizing the above, using target attribute it is possible to:

  • define a group of icons for different device scale factors using single <icon ...> element, for example: xml <icon src="res/Windows/AppListIcon.png" target="Square44x44Logo" /> which is equivalent to the following lines: xml <icon src="res/Windows/Square44x44Logo.scale-100.png" width="44" height="44" /> <icon src="res/Windows/Square44x44Logo.scale-150.png" width="66" height="66" /> <icon src="res/Windows/Square44x44Logo.scale-200.png" width="88" height="88" /> <icon src="res/Windows/Square44x44Logo.scale-240.png" width="106" height="106" />
  • define icons with scale factors other than scale-100 and scale-240 (and any other MRT qualifiers)

Though it is not recommended but is still possible to define icons using width and height attributes:

    <platform name="windows">
        <icon src="res/windows/logo.png" width="150" height="150" />
        <icon src="res/windows/smalllogo.png" width="30" height="30" />
        <icon src="res/windows/storelogo.png" width="50" height="50" />
        <icon src="res/Windows/Square44x44Logo.scale-100.png" width="44" height="44" />
        <icon src="res/Windows/Square44x44Logo.scale-240.png" width="106" height="106" />
        <icon src="res/Windows/Square70x70Logo.scale-100.png" width="70" height="70" />
        <icon src="res/Windows/Square71x71Logo.scale-100.png" width="71" height="71" />
        <icon src="res/Windows/Square71x71Logo.scale-240.png" width="170" height="170" />
        <icon src="res/Windows/Square150x150Logo.scale-240.png" width="360" height="360" />
        <icon src="res/Windows/Square310x310Logo.scale-100.png" width="310" height="310" />
        <icon src="res/Windows/Wide310x150Logo.scale-100.png" width="310" height="150" />
        <icon src="res/Windows/Wide310x150Logo.scale-240.png" width="744" height="360" />
    </platform>

See Also:

Windows Phone 8 (WP8 Platform)

    <platform name="wp8">
        <icon src="res/wp/ApplicationIcon.png" width="99" height="99" />
        <!-- tile image -->
        <icon src="res/wp/Background.png" width="159" height="159" />
    </platform>