Delivering Mobile Apps

Applies only to Mobile Apps

Modify the App Icon

Last updated

21:11, 25 Apr 2017
Save as PDF

When you create a mobile application, the icon for the app is generated automatically in the app creation wizard. This icon is then used to identify the app in the devices, being automatically adapted to all aspects of the device or context as the density or screen size of the device’s screen or the size of the place where the icon is displayed.

Define Custom Icons for Your App

To change the default icon and use your own icon image, providing multiple versions regarding the icon's context, device screen size or density:

Create (if not yet created) a zip file and add all the Android/iOS icons (.png image format);
Open the main application module and import the new or the updated zip file to the resources folder;
Select the application module, go to its properties and open the Extensibility Configurations property;
In the Extensibility Configurations value window, you must create a JSON object (if not created) where you can specify all the information about the icons to use. If not yet specified, start by indicating the resource file that contains the icons;
Add the “icons” tag to the JSON to indicate that you want to use your own icons for your application;
For each mobile platform, specify the size (iOS) and density (Android) and the correspondent icon location in the zip folders. Ensure that you define icons for all size and densities available, otherwise, you'll get an error (the example below is just for reference). Check the JSON template for the icons to avoid mistakes;
To make this change available for the users, publish and generate a new mobile application and distribute it.

Icon Sizes and Densities

For iOS

Width	Height	Displayed on
29	29	iPhone Spotlight (iOS 5, 6) iPhone Settings (iOS 5 - 9) iPad Settings (iOS 5 - 9)
40	40	iPad Spotlight (iOS 7 - 9)
50	50	iPad Spotlight (iOS 5, 6)
57	57	iPhone App (iOS 5, 6)
58	58	iPhone Spotlight (iOS 5, 6) iPhone Settings (iOS 5 - 9) iPad Settings (iOS 5 - 9)
72	72	iPad App (iOS 5, 6)
76	76	iPad App (iOS 7 - 9)
80	80	iPhone Spotlight (iOS 7 - 9) iPad Spotlight (iOS 7 - 9)
87	87	iPhone Spotlight (iOS 5, 6) iPhone Settings (iOS 5 - 9)
100	100	iPad Spotlight (iOS 5, 6)
114	114	iPhone App (iOS 5, 6)
120	120	iPhone Spotlight (iOS 7 - 9) iPhone App (iOS 7 - 9)
144	144	iPad App (iOS 5, 6)
152	152	iPad App (iOS 7 - 9)
167	167	iPad Pro App (iOS 9)
180	180	iPhone App (iOS 7 - 9)

For Android

Width	Height	Density	Displayed on
36	36	ldpi	Notification icons
48	48	mdpi	Launcher icons Action bar, Dialog and Tab icons Small Contextual Icons
72	72	hdpi	Launcher icons Notification icons
96	96	xhdpi	Launcher icons Action bar, Dialog and Tab icons Notification icons
144	144	xxhdpi	Launcher icons
192	192	xxxhdpi	Launcher icons

Icons JSON Template

{
    "resources": "<path_to_resources_file>",
    "icons": {
        "android": [{
            "resource": "<path_to_icon_image>",
            "density": "ldpi"
        },
        {
            "resource": "<path_to_icon_image>",
            "density": "mdpi"
        },
        {
            "resource": "<path_to_icon_image>",
            "density": "hdpi"
        },
        {
            "resource": "<path_to_icon_image>",
            "density": "xhdpi"
        },
        {
            "resource": "<path_to_icon_image>",
            "density": "xxhdpi"
        },
        {
            "resource": "<path_to_icon_image>",
            "density": "xxxhdpi"
        }],
        "ios": [{
            "resource": "<path_to_icon_image>",
            "width": "29",
            "height": "29"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "40",
            "height": "40"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "50",
            "height": "50"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "57",
            "height": "57"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "58",
            "height": "58"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "72",
            "height": "72"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "76",
            "height": "76"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "80",
            "height": "80"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "87",
            "height": "87"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "100",
            "height": "100"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "114",
            "height": "114"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "120",
            "height": "120"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "144",
            "height": "144"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "152",
            "height": "152"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "167",
            "height": "167"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "180",
            "height": "180"
        }]
    }
}