Every app has an icon which is dispalyed on a device’s Home screen and in the Store. Every app has also a launch image which is displayed immediatly when the app is launched giving the app time to prepare its initial user interface. Since mobile applications runs on a variety of devices, graphics should be prepared in different sizes for different screen sizes and densities.
To change the app icon and splash screens you need to :
grunt createproject --name=myApp --id=com.my.app --template=mmw-essentials
grunt android
and grunt runandroid
grunt windows
and grunt runwindows
grunt ios
and grunt runios
The default application icon (icon.png) and splash screen (splashscreen.png) should be placed in '.\workspace\myApp\src\mobile\android\img\drawable' directory.
Android selects best matching drawable directory to use based on the device screen size and density.
Drawable directory naming convention is as follow: drawable-[screen size ]-[screen orientation]-[screen pixel density]
Complete icon and splash screen set for Android app:
Drowable directory name |
Splash screen size (pixels) |
Icon size (pixels) |
drawable-port-ldpi |
480x800 |
36x36 |
drawable-port-mdpi |
720x1280 |
48x48 |
drawable-port-hdpi |
1080x1920 |
72x72 |
drawable-port-xhdpi |
1440x2560 |
96x96 |
drawable-port-xxhdpi |
1440x2560 |
144x144 |
drawable-large-port-mdpi |
1200x1920 |
48x48 |
drawable-large-port-hdpi |
1600x2560 |
72x72 |
drawable-xlarge-port-mdpi |
1200x1920 |
48x48 |
drawable-xlarge-port-hdpi |
1600x2560 |
72x72 |
drawable-land-ldpi |
800x480 |
36x36 |
drawable-land-mdpi |
1280x720 |
48x48 |
drawable-land-hdpi |
1920x1080 |
72x72 |
drawable-land-xhdpi |
2560x1440 |
96x96 |
drawable-land-xxhdpi |
2560x1440 |
144x144 |
drawable-large-land-mdpi |
1920x1200 |
48x48 |
drawable-large-land-hdpi |
2560x1600 |
72x72 |
drawable-xlarge-land-mdpi |
1920x1200 |
48x48 |
drawable-xlarge-land-hdpi |
2560x1600 |
72x72 |
For more information see: http://developer.android.com/
The icons files should be placed in ‘.\workspace\myApp\src\mobile\ios\img\icons’ directory.
The launch/splash screen files should be placed in ‘.\workspace\myApp\src\mobile\ios\img\splash’ directory.
The standard bit depth for icons is 24 bits - that is, 8 bits each for red, green, and blue - plus an 8-bit alpha channel, for a total of 32 bits. Filles names should be as presented in the below tables.
Complete icon set for a iOS app:
Image size (pixels) |
Image file name |
40x40 |
icon-40.png |
80x80 |
icon-40@2x.png |
50x50 |
icon-50.png |
100x100 |
icon-50@2x.png |
60x60 |
icon-60.png |
120x120 |
icon-60@2x.png |
72x72 |
icon-72.png |
144x144 |
icon-72@2x.png |
76x76 |
icon-76.png |
152x152 |
icon-76@2x.png |
180x180 |
icon@3x.png |
29x29 |
icon-small.png |
58x58 |
icon-small@2x.png |
57x57 |
icon.png |
114x114 |
icon@2x.png |
1024x1024 |
appStoreIcon.png |
Complete splash screen set for a iOS app:
Image size (pixels) |
Image file name |
1024x748 |
Default-Landscape~ipad.png |
768x1024 |
Default-Portrait~ipad.png |
1536x2048 |
Default-Portrait@2x~ipad.png |
1024x768 |
Default-Landscape~ipad.png |
2048x1536 |
Default-Landscape@2x~ipad.png |
320x480 |
Default~iphone.png |
640x960 |
Default@2x~iphone.png |
640x1136 |
Default-568h@2x~iphone.png |
750x1334 |
Default-667h.png |
1242x2208 |
Default-736h.png |
2208x1242 |
Default-Landscape-736h.png |
For more information see http://developer.apple.com
The application icons and splash screens should be placed in '.\workspace\myApp\src\mobile\windows\img\WindowsPhone' directory for WIndows Phone app, and in '.\workspace\myApp\src\mobile\windows\img\Windows' directory for Windows app.
Complete icon set for a Windows Phone app:
Image size (pixels) |
Image file name |
44x44 |
Square44x44Logo.scale-100.png |
62x62 |
Square44x44Logo.scale-140.png |
106x106 |
Square44x44Logo.scale-240.png |
71x71 |
Square71x71Logo.scale-100.png |
99x99 |
Square71x71Logo.scale-140.png |
170x170 |
Square71x71Logo.scale-240.png |
150x150 |
Square150x150Logo.scale-100.png |
210x210 |
Square150x150Logo.scale-140.png |
360x360 |
Square150x150Logo.scale-240.png |
50x50 |
StoreLogo.scale-100.png |
70x70 |
StoreLogo.scale-140.png |
120x120 |
StoreLogo.scale-240.png |
310x150 |
Wide310x150Logo.scale-100.png |
434x210 |
Wide310x150Logo.scale-140.png |
744x360 |
Wide310x150Logo.scale-240.png |
Complete icon set for Windows app:
Image size (pixels) |
Image file name |
24x24 |
Square30x30Logo.scale-80.png |
30x30 |
Square30x30Logo.scale-100.png |
42x42 |
Square30x30Logo.scale-140.png |
54x54 |
Square30x30Logo.scale-180.png |
16x16 |
Square30x30Logo.target-16.png |
32x32 |
Square30x30Logo.target-32.png |
48x48 |
Square30x30Logo.target-48.png |
256x256 |
Square30x30Logo.target-256.png |
56x56 |
Square70x70Logo.scale-80.png |
70x70 |
Square70x70Logo.scale-100.png |
98x98 |
Square70x70Logo.scale-140.png |
126x126 |
Square70x70Logo.scale-180.png |
120x120 |
Square150x150Logo.scale-80.png |
150x150 |
Square150x150Logo.scale-100.png |
210x210 |
Square150x150Logo.scale-140.png |
270x270 |
Square150x150Logo.scale-180.png |
248x248 |
Square310x310Logo.scale-80.png |
310x310 |
Square310x310Logo.scale-100.png |
434x343 |
Square310x310Logo.scale-140.png |
558x558 |
Square310x310Logo.scale-180.png |
50x50 |
StoreLogo.scale-100.png |
70x70 |
StoreLogo.scale-140.png |
90x90 |
StoreLogo.scale-180.png |
248x120 |
Wide310x150Logo.scale-80.png |
310x150 |
Wide310x150Logo.scale-100.png |
434x210 |
Wide310x150Logo.scale-120.png |
558x270 |
Wide310x150Logo.scale-180.png |
Complete splash screen set for Windows Phone app:
Image size (pixels) |
Image file name |
480x800 |
SplashScreenPhone.scale-100.png |
672x1120 |
SplashScreenPhone.scale-140.png |
1152x1920 |
SplashScreenPhone.scale-240.png |
Complete splash screen set for Windows app:
Image size (pixels) |
Image file name |
620x300 |
SplashScreen.scale-100.png |
868x420 |
SplashScreen.scale-140.png |
1116x540 |
SplashScreen.scale-180.png |
For more information see Guidelines for Universal Windows Platform (UWP) apps - tile and icon assets and - splash screens