How to add Icon & Splash to Ionic manually
The Ionic CLI has the capability to generate different sizes for your app icon and splash image by just using one image source for each. Right now it’s still in beta version 1.3.1. though. When I tried it a few times, it didn’t work for me while it worked for others. This is the error I got from the terminal:
So I decided that I wanted to see if I could add them manually just in case the generator didn’t work again in the future. This is how to add icon & splash to ionic manually:
1. Modify the config.xml
Copy and paste this code inside <widget> just right after </feature>
...
<platform name="android">
<icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
<splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
<splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
<splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
<splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
<splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
<splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
<splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
<splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
<splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
</platform>
<platform name="ios">
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="resources/ios/icon/icon-60.png" width="60" height="60" />
<icon src="resources/ios/icon/icon-60@2x.png" width="120" height="120" />
<icon src="resources/ios/icon/icon-60@3x.png" width="180" height="180" />
<!-- iPad -->
<icon src="resources/ios/icon/icon-76.png" width="76" height="76" />
<icon src="resources/ios/icon/icon-76@2x.png" width="152" height="152" />
<!-- iOS 6.1 -->
<!-- Spotlight Icon -->
<icon src="resources/ios/icon/icon-40.png" width="40" height="40" />
<icon src="resources/ios/icon/icon-40@2x.png" width="80" height="80" />
<!-- iPhone / iPod Touch -->
<icon src="resources/ios/icon/icon.png" width="57" height="57" />
<icon src="resources/ios/icon/icon@2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="resources/ios/icon/icon-72.png" width="72" height="72" />
<icon src="resources/ios/icon/icon-72@2x.png" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="resources/ios/icon/icon-small.png" width="29" height="29" />
<icon src="resources/ios/icon/icon-small@2x.png" width="58" height="58" />
<icon src="resources/ios/icon/icon-small@3x.png" width="87" height="87" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="resources/ios/icon/icon-50.png" width="50" height="50" />
<icon src="resources/ios/icon/icon-50@2x.png" width="100" height="100" />
<splash src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" height="1136"/>
<splash src="resources/ios/splash/Default-667h.png" width="750" height="1334"/>
<splash src="resources/ios/splash/Default-736h.png" width="1242" height="2208"/>
<splash src="resources/ios/splash/Default-Landscape-736h.png" width="2208" height="1242"/>
<splash src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
<splash src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" height="768"/>
<splash src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
<splash src="resources/ios/splash/Default-Portrait~ipad.png" width="768" height="1024"/>
<splash src="resources/ios/splash/Default@2x~iphone.png" width="640" height="960"/>
<splash src="resources/ios/splash/Default~iphone.png" width="320" height="480"/>
</platform>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="5000" />
...After hours of research, these are what Ionic’s Image generator should add to config.xml. So yeah, we’re basically trying to produce the outcomes that Ionic’s image generator produces. Notice that each of the images have unique names. That’s one of the inconveniences when you have to resize images for each platform. Here, we’re telling Ionic that there are these assets to be rendered as app icons and splash images. Though, they don’t physically exist in the project yet.
2. Create the resources folder
Create this folder at the root of your Ionic project.
3. Add folders ios and android inside resources
Make sure that they are all lowercase.
4. Create folders icon and splash inside ios and android
These should also be lowercase. We’re going to save all the icons inside the icon folders and the splash images in the splash folders.
5. I first designed the app icon in Illustrator
Based on Ionic’s Image generator instructions, the least amount of size to use for the app icon is 192px x 192px. From this size, we can manually create different sized icons for different iOS and Android screen resolutions. I opened Ionic’s app icon template in Illustrator (originally a Photoshop file but I like vectors).
Note: You can download the Illustrator file and delete my placeholder icon, or just add your own layers on top of the existing layers and then just hide those layers. Afterwards, show the bottom most layer, which contains the borders from the original Ionic template. Remember to hide the borders when you’re ready to Save for Web…
So since the app icon will always be a square, just go to File > Save for Web… and resize for iOS and Android requirements. Refer to the config.xml for the sizes and the corresponding file names.
This part’s a little easier. But I found the splash images to be tedious because of the varying file names and sizes. Since I had to copy and paste the artwork from one splash image to another, sometimes I had to thin out some lines or make them thicker. I also had to make some text bigger to be legible or smaller for contrast, etc. But modifications depends on your preferences.
6. Working on the Splash Image
Android
For this part, I started with Android’s land-ldpi density. I copied and pasted my placeholder app icon and added some text at the bottom. Then, I made sure that it was centered inside the artboard.
Then I did the same to all the other densities all the way to port-xxxhdpi. So I saved the Illustrator files for each density and named the Illustrator file according to its corresponding .png filename. This way, you can just save for the web and not have to resize each and every single one of them and try get the.png filenames right too.
iOS
I made a few more Illustrator files and named them according to the required splash image file names. I did the same thing I did for the Android splash images.
My thoughts on the image generator
It’s very convenient that the Ionic creators thought of this. Having just one source for the app icon and one source for the splash image and the CLI takes care of the resizing. You don’t even have to save the source as a .png. You can just drop the .psd (Photoshop) or .ai (Illustrator) in the resources folder of your Ionic project. This is very convenient because you don’t want to spend so much time resizing all your images for iOS and Android over and over again. It’s a whole day’s job if you’ve done it so many times before, if not more than a day. The reason why I said “over and over again” is because there are times when you need to run your app to check if the image looks presentable. For example, if you need to make sure the elements are centered or aligned correctly. It’s tedious. There are basically at least 16 sizes for icons and at least 10 splash image sizes for iOS. For Android, it’s about 6 icon sizes and 12 splash images. That’s a lot. How about if Ionic can run on FirefoxOS or Amazon Fire one day and your boss (or client) will want you to make executable binaries for those too? That’s more work. But like I said at the beginning, this part of Ionic CLI is still in beta.
I was a little frustrated but I looked on the forum to get some answers, and other people were having the same problem. But unlike me, some people were able to generate icons and splash images, though the next time they tried it, the generator just stopped working somehow with no explanation from the creators. Well, there’s no explanation yet anyways, but I believe in what Ionic can do and I know the creators can fix this. Plus, we can add the icons and splash images manually. My suggestion is to use your ready made .psd or .ai templates with the corresponding file names and sizes. That way, you can just change the artwork (or whatever else), then just Save for Web.. and drop them to their rightful directories.
For more information:
- Icon and Splash Screen Image Generation – Instructions
- Icon and Splash Screen Image Generator – Ionic Forum
- View this tutorial’s project files on GitHub – Add-Ionic-Icon-and-Splash-example
I hope this tutorial and/or my .ai templates can help just in case the Ionic icon and splash image generator acts up again. But just because one part isn’t working doesn’t mean we stop and give up. We have to find a work-around it. Come on, we can’t just rely on computers to do things for us all the time.