If you’ve ever submitted an application to either the Apple or Google app stores, then you would know the pain of creating all the necessary splash screen and icon sizes.
If you’ve been following my recent Learning Ionic as a Sencha Touch Developer series then you would also know I’ve been getting into the Ionic framework lately.
One of the coolest things about Ionic is the resources tool they provide for automatically generating all the splash screens and icons that you need. Even if you’re not using Ionic, it’d be worth installing just to use this tool and then transfer the splash screens and icons over to your actual project.
If you don’t already have Ionic, check out this post to get started.
Generating Icons and Splash Screens with Ionic
Ok, let’s walk through exactly how to do this. Ionic does a lot for you but it can’t quite yet design your graphical resources for you, so there’s a little set up work we need to do.
1. Design your icon
The Ionic resources tool only requires a single 192 x 192 icon as a base, but since the app store requires a larger icon anyway it’s best to design it at 1024 x 1024 first (or even 2048 x 2048). For the most part, scaling down large images into small icons works well, but if you want a really crisp looking icon it may be worth designing a smaller version of your icon specifically.
Once you’ve created your icon, save a 192 x 192 size version into a resources folder in the root of your Ionic project.
2. Design your splash screen
Icons are great because they are always square. Splash screens unfortunately come in all sorts of shapes and sizes. This means that you’re either going to have to make your design flexible, or make different designs for each individual splash screen size.
What’s a “flexible” design? Well, that’s just what I’ve decided to call a design that will play nicely with Ionic’s resource tool. If you design the splash screen at 2208 x 2208 then all of your splash screens should all automatically generate nicely.
The problem is though that there is always going to be a degree of cropping that occurs. To avoid important parts of your design getting chopped off you should make sure to place the important parts of the design near the center of the image, and the bits near the edges should be unimportant (e.g just part of a background image).
3. Add the platforms you are building for
If you want to build icons and splash screens for a platform in Ionic then you need to add the platform to your project first.
This is typically done so PhoneGap / Cordova knows how to build your project, so if you are used to using something like PhoneGap Build then you wouldn’t usually do this.
If you are creating resources for iOS run the following command within your project:
ionic platform add iosand if you are creating resources for Android:
ionic platform add android(if you’re building for both platforms just run both commands)
If you run the iOS command on a non-Apple operating system you will get this message:
WARNING: Applications for platform ios can not be build on this OSDon’t worry about that. This just means you can’t build your application since only Macs have the required SDK’s (as I mentioned before, this command is used to tell Cordova which platforms you are building for). The resources tool will still build your resources for you though.
4. Run the resources tool
Before you run the tool, make sure your icon.png and splash.png files are in a folder called resources that is located within the root folder of your project. Then run:
ionic resourcesThis will build all required splash screens and icons for you and add the appropriate references to your config.xml file.
Using PhoneGap Build?
If you’re using PhoneGap Build to build your application then there’s a little more work to do.
The automatically generated config.xml file and the one required by PhoneGap Build are slightly different, so you will have to change the format according to the PhoneGap Build documentation.
You should also [consider adding a .pgbomit file to drastically reduce the final build size][5]. A .pgbomit file essentially just says ”these resources are used for creating splash screens and icons, so don’t include them as a resource in the app”. If you don’t have a .pgbomit file, all splash screens and icons for all devices you are building for will be redundantly included in your final build.
Since I started developing HTML5 mobile applications, creating splash screens and icons has always been the part I LEAST enjoyed. It’s so tedious and frustrating; not only do you need to research all of the correct resolutions that are required for each device, but then you have to create each one in individually (and using a program like Photoshop on my not-so-hot computer to do this takes quite a while).
I’ve been looking for tools that can help with this process (even considered building one) and this is by far the best solution I have found. If you’re creating your icons and splash screens manually, stop right now and start using this.
[5]: http://www.joshmorony.com/using-phonegap-builds-pgbomit-to-drastically-reduce-file-size/ ‘Using PhoneGap Build’s .pgbomit to Drastically Reduce File Size’