{"id":3630,"date":"2017-08-23T07:29:23","date_gmt":"2017-08-23T07:29:23","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=3630"},"modified":"2017-08-23T08:58:46","modified_gmt":"2017-08-23T08:58:46","slug":"create-icons-splash-screen-images-automatically-ionic-framework-3","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/javascript\/ionic3\/create-icons-splash-screen-images-automatically-ionic-framework-3\/","title":{"rendered":"How to create icons and splash screen images automatically in Ionic framework 3"},"content":{"rendered":"

\n \u26a0\ufe0f In case you’re looking for how to create icons and splash screen images automatically in Ionic framework version 1, then you can check out this post<\/a>. For more Ionic framework 3 posts check out the step by step info on How to get started with Ionic framework 3 on Windows and Mac<\/a>.\n<\/p><\/blockquote>\n

TL;DR<\/h2>\n

Just execute ionic cordova resources<\/code> command in your Ionic 3 project root folder.<\/p>\n

!TL;DR<\/h2>\n

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.<\/p>\n

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.<\/p>\n

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 created Photoshop Splash Screen Template<\/a>, which you can download for free and use as a guideline for creating an icon. However, if you create you project by using ionic start<\/code> command, as we have, then you’ll already have both the icon.png<\/code> and splash.png<\/code> files in the resources<\/code> folder, and you can just edit them.<\/p>\n

For when you’re creating a branded product having a custom made icon is definitely a must. However, in this case, I’ll show you how to use one of the free services to search for a free icon which you can then use in your application (even if your application is a commercial application).<\/p>\n

I tend to use IconFinder<\/a> a lot, and here are the settings which you have to use to filter out the calculator images that are Free (PRICE) and can be used in commercial applications and that don’t even require a link back (LICENSE TYPE).<\/p>\n

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 (or use this prepared link which sets them automatically<\/a>):<\/p>\n

\"\"<\/p>\n

I’m going to use the last one in the first row. Simply click on it, and you should get to the download page that looks like this:<\/p>\n

\"\"<\/p>\n

To download it just click on the green ‘Download PNG’ button.<\/p>\n

Now, in the resources<\/code> folder find and open the icon.png<\/code> file with an image editor of your choice. I’m going to use Gimp<\/a> in this example as it’s free cross-platform image editor available for all the major operating systems (Linux, OS X, Windows). You should see something like this:<\/p>\n

\"\"<\/p>\n

Now we need to do a few steps:<\/p>\n