{"id":270,"date":"2015-01-05T02:00:00","date_gmt":"2015-01-05T02:00:00","guid":{"rendered":"http:\/\/localhost\/?p=270"},"modified":"2019-07-13T13:50:49","modified_gmt":"2019-07-13T13:50:49","slug":"automating-icons-and-splash-screens","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/automating-icons-and-splash-screens","title":{"rendered":"Automating Icons and Splash Screens"},"content":{"rendered":"

\n Note: Updated July 13th, 2019 based on Ionic CLI version 5.0.0+<\/a>\n<\/p><\/blockquote>\n

What\u2019s the first thing users see when they download your app? What about after they install it and start the app?<\/p>\n

An app icon and splash screen (launch image) are important parts of any app, yet making them used to be incredibly tedious. You needed numerous icons for iOS and Android, and then you had to deal with splash screens and all their different sizes. To save you the stress of dealing with all that, we\u2019ve made it possible for you to generate app icons and splash screens via the Ionic CLI.<\/p>\n

<\/p>\n

Generate those Resources<\/h3>\n

With the new CLI, all you need is a resource directory and two images. These images must be .png<\/code> files named icon.png and splash.png. With the images in a resources directory, .\/resources<\/code>, the ionic cordova resources<\/code> command will generate the icons and splash screen images locally for each platform setup in the project by using the cordova-res<\/code> tool<\/a>.<\/p>\n

$ npm install -g cordova-res\n$ ionic cordova resources\n<\/code><\/pre>\n
After the images are generated, the CLI will update the config.xml<\/code> to include the icons and splash screens<\/a>, so they will be transferred over in Cordova’s build process. NOTE: This process requires Cordova CLI version 3.6 or higher.<\/p>\n
If you only need to update one of the resources, or you only want to generate icons and not both, the ionic cordova resources<\/code> command has two flags that allow you to target each asset, instead of generating both.<\/p>\n
$ ionic cordova resources --icon\n$ ionic cordova resources --splash\n<\/code><\/pre>\n
Image Sizes<\/h3>\n
In order to be able to crop and resize images to fit the various needs of each platform, icons and splash screen images should meet a minimum size requirement.<\/p>\n
The icon image’s minimum dimensions should be 1024×1024 pixels and should have no rounded corners. Note that each platform will apply its own mask and effects to the icons. For example, iOS will automatically apply its custom rounded corners, so the source file should not already come with rounded corners.<\/p>\n
Splash screen dimensions vary for each platform, device, and orientation, so a square source image is required to generate each of the various screen sizes. The source image’s minimum dimensions should be 2732×2732 pixels, and the artwork should be centered within the square, because each generated image will be center cropped into landscape and portrait images.<\/p>\n
The splash screen’s artwork should roughly fit within a center square (1200×1200 pixels). This template<\/a> provides the recommended size and guidelines about the artwork’s safe zone.<\/p>\n
Platform Specifics<\/h3>\n
Want different icons for the iOS and Android versions of your app? No problem; we\u2019ve got that covered, too. To use different source images for individual platforms, place the source image in the respective platform’s directory. To use a different icon for Android, the image should follow this path: resources\/android\/icon.png<\/code>, and the image for iOS should use this path: resources\/ios\/icon.png<\/code>. This way, you can have an iOS icon with native rounded corners and an Android icon with a transparent background.<\/p>\n
This is just one more way Ionic aims to make developers\u2019 lives easier, not to mention more fun. Update your CLI and install cordova-res<\/code>, then try out the resource generator today.<\/p>\n
$ npm install -g ionic cordova-res\n<\/code><\/pre>\n
What’s Next<\/h3>\n
As we mentioned in our Beta 14 blog post, we’ve been working on adding Crosswalk integration for Android into our CLI. Josh has been hard at work on this, and it will be landing in the CLI as a beta feature soon. Keep an eye on the CLI!<\/p>\n