Modify the App Icon
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 |
|---|---|---|
| 20 | 20 | iPad Notifications (iOS 7–11) |
| 29 | 29 | iPhone Spotlight (iOS 5, 6) iPhone Settings (iOS 5–11) iPad Settings (iOS 5–11) |
| 40 | 40 | iPhone Notifications (iOS 7–11) iPad Notifications (iOS 7–11) iPad Spotlight (iOS 7–11) |
| 48 | 48 | Apple Watch Notification Center |
| 50 | 50 | iPad Spotlight (iOS 5, 6) |
| 55 | 55 | Apple Watch Notification Center |
| 57 | 57 | iPhone App (iOS 5, 6) |
| 58 | 58 | iPhone Spotlight (iOS 5, 6) iPhone Settings (iOS 5–11) iPad Settings (iOS 5–11) |
| 60 | 60 | iPhone Notifications (iOS 7–11) |
| 72 | 72 | iPad App (iOS 5, 6) |
| 76 | 76 | iPad App (iOS 7–11) |
| 80 | 80 | iPhone Spotlight (iOS 7–11) iPad Spotlight (iOS 7–11) |
| 87 | 87 | iPhone Spotlight (iOS 5, 6) iPhone Settings (iOS 5–11) |
| 88 | 88 | Apple Watch Long Look |
| 100 | 100 | iPad Spotlight (iOS 5, 6) |
| 114 | 114 | iPhone App (iOS 5, 6) |
| 120 | 120 | iPhone Spotlight (iOS 7–11) iPhone App (iOS 7–11) |
| 144 | 144 | iPad App (iOS 5, 6) |
| 152 | 152 | iPad App (iOS 7–11) |
| 167 | 167 | iPad Pro App (iOS 9–11) |
| 172 | 172 | Apple Watch Short Look |
| 180 | 180 | iPhone App (iOS 7–11) |
| 196 | 196 | Apple Watch Short Look |
| 1024 | 1024 | App Store iOS |
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": "20",
"height": "20"
},
{
"resource": "<path_to_icon_image>",
"width": "29",
"height": "29"
},
{
"resource": "<path_to_icon_image>",
"width": "40",
"height": "40"
},
{
"resource": "<path_to_icon_image>",
"width": "48",
"height": "48"
},
{
"resource": "<path_to_icon_image>",
"width": "50",
"height": "50"
},
{
"resource": "<path_to_icon_image>",
"width": "55",
"height": "55"
},
{
"resource": "<path_to_icon_image>",
"width": "57",
"height": "57"
},
{
"resource": "<path_to_icon_image>",
"width": "58",
"height": "58"
},
{
"resource": "<path_to_icon_image>",
"width": "60",
"height": "60"
},
{
"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": "88",
"height": "88"
},
{
"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": "172",
"height": "172"
},
{
"resource": "<path_to_icon_image>",
"width": "180",
"height": "180"
},
{
"resource": "<path_to_icon_image>",
"width": "196",
"height": "196"
},
{
"resource": "<path_to_icon_image>",
"width": "1024",
"height": "1024"
}]
}
}