The icon is an important part of your application because it represents your application’s brand, and it helps to identify quickly where the app is on your phone. In case you’re familiar with creating apps then you will remember that it is a tedious process to create a lot of different size images both for iOS and Android platforms. Also, the same goes for the so-called splash screen that shows up every time the application starts. Although having a splash screen is not mandatory, it certainly adds up to the feeling of a complete and professional application, which one would certainly want to convey with his application.
Ionic helps tremendously with this by providing a single Ionic CLI command to generate all the needed icon and splash screen sizes for us automatically. Also, Ionic createdPhotoshop Icon Template⁹²andPhotoshop Splash Screen Template⁹³, which you can download for free and use as a guideline for creating an icon.
For when you’re creating a branded product having a custom made icon is definitelly a must. However, in this case, we’ll show how to use one of the free services to search for a free icon which we can use in our application (even if our application is a commercial application). I tend to use
IconFinder⁹⁴a lot, and here are the setting which you have to use in order to filter out the calculator images which are Free (PRICE) and can be used in commercial applications and which do not even require a link back (LICENSE TYPE). Of course, you can also choose to buy an image if you happen to find one that you like. You can additionally search by format, size and background. The filters should look like this:
⁹²http://code.ionicframework.com/resources/icon.psd ⁹³http://code.ionicframework.com/resources/splash.psd ⁹⁴https://www.iconfinder.com
We’re going to use the first one in the second row. Simply click on it, and you should get to the download page that looks like it’s shown on the image below:
To download it just click on the green PNG button. We’re going to alter it just a bit by making it a size of 128x128px, so that it will finally look like this:
Now (download if you haven’t yet and) open up thePhotoshop Icon Template⁹⁵and you should see:
Don’t worry if you don’t have Photoshop, you can use open source tools like for example
Gimp⁹⁶orPaint.NET⁹⁷.
Now drag the calculator icon into the Photoshop and make sure you place the icon within the bounds of the blue guides. You should have something like this:
Next, remove the guides by going toView->Showand remove theGuidesoption. ⁹⁶http://www.gimp.org/
Also, you can remove the Grid in the same way if you like. Finally, remove the icon-cut-guide
layer by clicking on the eye icon next to it:
Now save the file by going toFile->Save for Weband select PNG-24 and after that click theSave...
Repeat the process to create the splash screen image and name issplash.png. The image I came up
If you’ve followed the second chapter you should have the app. In case you don’t have it, you canclone it from Github⁹⁸.
Now that you have both icon.png and splash.png images ready, you have to copy them in the resources folder in the root of the application (next to the folders like www and plugins). If you
don’t have this folder, then create it. Next, navigate with your Terminal/Command prompt to the root folder of the application and run the following command:
ionic resources
If at this point you get an error like this:
1 C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial>ionic resources
2 ? No platforms have been added.
3 ? Please add a platform, for example: ionic platform add ios
4 ? Or provide a platform name, for example: ionic resources android
that means that you haven’t added any platforms yet to which Ionic should build. Since we’re going to build the app for both Apple Store and Android Play Store we’re going to use the following two commands:
1 ionic platform add android
2 ionic platform add ios
You should see an output similar to this:
1 C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial>ionic platform add android
2 Updated the hooks directory to have execute permissions
3 Adding icons for platform: android
4 npm http GET https://registry.npmjs.org/cordova-android
5 npm http 304 https://registry.npmjs.org/cordova-android
6 npm http GET https://registry.npmjs.org/cordova-android
7 npm http 304 https://registry.npmjs.org/cordova-android
8 Adding android project...
9 Creating Cordova project for the Android platform:
10 Path: platforms\android
11 Package: com.ionicframework.ionic2ndtutorial616047
12 Name: Ionic_2ndTutorial
13 Activity: MainActivity
14 Android target: android-22
15 Copying template files...
16 Android project created with [email protected]
17 Running command: C:\NodeJS\node.exe C:\Users\Nikola\Desktop\IonicTesting\Ionic_3\
18 rdTutorial\hooks\after_prepare\010_add_platform_class.js
19
20 C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial
21 add to body class: platform-android
22 Installing "com.ionic.keyboard" for android
23 Installing "cordova-plugin-console" for android
24 Installing "cordova-plugin-device" for android
25 Installing "cordova-plugin-splashscreen" for android
26 Installing "cordova-plugin-whitelist" for android
27 Saving platform to package.json file
28
29 C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial>ionic platform add ios
30 Updated the hooks directory to have execute permissions
31 Adding icons for platform: ios
32 WARNING: Applications for platform ios can not be built on this OS - win32.
33 npm http GET https://registry.npmjs.org/cordova-ios
34 npm http 200 https://registry.npmjs.org/cordova-ios
35 npm http GET https://registry.npmjs.org/cordova-ios
36 npm http 200 https://registry.npmjs.org/cordova-ios
38 npm http 200 https://registry.npmjs.org/cordova-ios/-/cordova-ios-3.8.0.tgz
39 Adding ios project...
40 iOS project created with [email protected]
41
42 Running command: C:\NodeJS\node.exe C:\Users\Nikola\Desktop\IonicTesting\Ionic_3\
43 rdTutorial\hooks\after_prepare\010_add_p
44 latform_class.js C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial
45 add to body class: platform-ios
46 Installing "com.ionic.keyboard" for ios
47 Installing "cordova-plugin-console" for ios
48 Installing "cordova-plugin-device" for ios
49 Installing "cordova-plugin-splashscreen" for ios
50 Installing "cordova-plugin-whitelist" for ios
51 Saving platform to package.json file
After this you can safely run the ionic resources command and you should get the following
output:
1 C:\Users\Nikola\Desktop\IonicTesting\Ionic_3rdTutorial>ionic resources
2 Ionic icon and splash screen resources generator
3 uploading icon.png...
4 uploading splash.png...
5 ? icon.png (192x192) upload complete
6 ? splash.png (2208x2208) upload complete
7 generating splash ios Default~iphone.png (320x480)...
8 generating splash ios Default@2x~iphone.png (640x960)...
9 generating splash ios Default-Portrait~ipad.png (768x1024)...
10 ? splash ios Default~iphone.png (320x480) generated
11 generating splash ios Default-Portrait@2x~ipad.png (1536x2048)...
12 ? splash ios Default@2x~iphone.png (640x960) generated
13 generating splash ios Default-Landscape~ipad.png (1024x768)...
14 ? splash ios Default-Portrait~ipad.png (768x1024) generated
15 generating splash ios Default-Landscape@2x~ipad.png (2048x1536)...
16 ? splash ios Default-Landscape~ipad.png (1024x768) generated
17 generating splash ios Default-Landscape-736h.png (2208x1242)...
18 ? splash ios Default-Portrait@2x~ipad.png (1536x2048) generated
19 generating splash ios Default-736h.png (1242x2208)...
20 ? splash ios Default-Landscape-736h.png (2208x1242) generated
21 generating splash ios Default-667h.png (750x1334)...
22 ? splash ios Default-667h.png (750x1334) generated
23 generating splash ios Default-568h@2x~iphone.png (640x1136)...
25 generating splash android drawable-port-xxxhdpi-screen.png (1280x1920)...
26 ? splash android drawable-port-xxxhdpi-screen.png (1280x1920) generated
27 generating splash android drawable-port-xxhdpi-screen.png (960x1600)...
28 ? splash android drawable-port-xxhdpi-screen.png (960x1600) generated
29 generating splash android drawable-port-xhdpi-screen.png (720x1280)...
30 ? splash ios Default-568h@2x~iphone.png (640x1136) generated
31 generating splash android drawable-port-hdpi-screen.png (480x800)...
32 ? splash android drawable-port-hdpi-screen.png (480x800) generated
33 ? splash android drawable-port-mdpi-screen.png (320x480) generated
34 generating splash android drawable-port-ldpi-screen.png (240x320)...
35 ? splash android drawable-port-xhdpi-screen.png (720x1280) generated
36 generating splash android drawable-land-xxxhdpi-screen.png (1920x1280)...
37 ? splash android drawable-port-ldpi-screen.png (240x320) generated
38 generating splash android drawable-land-xxhdpi-screen.png (1600x960)...
39 ? splash ios Default-Landscape@2x~ipad.png (2048x1536) generated
40 generating splash android drawable-land-xhdpi-screen.png (1280x720)...
41 ? splash android drawable-land-xhdpi-screen.png (1280x720) generated
42 generating splash android drawable-land-hdpi-screen.png (800x480)...
43 ? splash android drawable-land-xxxhdpi-screen.png (1920x1280) generated
44 generating splash android drawable-land-mdpi-screen.png (480x320)...
45 ? splash android drawable-land-hdpi-screen.png (800x480) generated
46 generating splash android drawable-land-ldpi-screen.png (320x240)...
47 ? splash android drawable-land-ldpi-screen.png (320x240) generated
48 generating icon ios [email protected] (87x87)...
49 ? splash android drawable-land-xxhdpi-screen.png (1600x960) generated
50 generating icon ios [email protected] (58x58)...
51 ? icon ios [email protected] (87x87) generated
52 generating icon ios icon-small.png (29x29)...
53 ? icon ios icon-small.png (29x29) generated
54 generating icon ios [email protected] (152x152)...
55 ? splash android drawable-land-mdpi-screen.png (480x320) generated
56 generating icon ios icon-76.png (76x76)...
57 ? icon ios [email protected] (58x58) generated
58 generating icon ios [email protected] (144x144)...
59 ? icon ios [email protected] (152x152) generated
60 generating icon ios icon-72.png (72x72)...
61 ? icon ios icon-76.png (76x76) generated
62 generating icon ios [email protected] (180x180)...
63 ? icon ios [email protected] (144x144) generated
64 generating icon ios [email protected] (120x120)...
65 ? icon ios [email protected] (180x180) generated
67 ? icon ios icon-72.png (72x72) generated
68 generating icon ios [email protected] (100x100)...
69 ? icon ios [email protected] (120x120) generated
70 generating icon ios icon-50.png (50x50)...
71 ? icon ios icon-60.png (60x60) generated
72 generating icon ios [email protected] (80x80)...
73 ? icon ios [email protected] (100x100) generated
74 generating icon ios icon-40.png (40x40)...
75 ? icon ios [email protected] (80x80) generated
76 generating icon ios [email protected] (114x114)...
77 ? icon ios icon-50.png (50x50) generated
78 generating icon ios icon.png (57x57)...
79 ? icon ios icon-40.png (40x40) generated
80 generating icon android drawable-xxxhdpi-icon.png (192x192)...
81 ? icon ios [email protected] (114x114) generated
82 ? icon android drawable-xxhdpi-icon.png (144x144) generated
83 generating icon android drawable-xhdpi-icon.png (96x96)...
84 ? icon ios icon.png (57x57) generated
85 ? icon android drawable-hdpi-icon.png (72x72) generated
86 generating icon android drawable-mdpi-icon.png (48x48)...
87 ? icon android drawable-xxxhdpi-icon.png (192x192) generated
88 generating icon android drawable-ldpi-icon.png (36x36)...
89 ? icon android drawable-xhdpi-icon.png (96x96) generated
90 ? icon android drawable-ldpi-icon.png (36x36) generated
91 ? icon android drawable-mdpi-icon.png (48x48) generated
From the output you can see how much icons were created and hopefully now you can see how much time this saved. All the needed configuration regarding the icons and splash screens was generated by Ionic and placed in the config.xml file.
It’s worth noting that you will not see the icon nor the splash screen when using the browser testing or Ionic View testing (discussed in more detail in the How to use Ionic.io cloud service to share our application with other users without going through the app store section below). Instead, you will only see these once you deploy them to the actual physical device or the emulator (which we’ll cover in the How to test our application on the real physical devices and emulators section below). You can add an iOS platform if your developing on a Windows machine, and ionic resources
command will generate icons and splash screens for it. However, keep in mind that you will not be able to build the project for iOS on your Windows machine. Instead, you’ll need a Mac computer in order to do so. We’ll cover building the app in more detail in the aforementioned How to test our application on the real physical devices and emulators section below.