Plans to make icons and splashscreens easy?

Hello, first off thank you to the ionic team for ngcordova it made using plugins so much better. I just can’t wait for cordova to finish the npm like plugin system. But since ionic is on the path to making cordova “just work” and is already fixing tons of major problems, are there any plans to make icons and splash screens easy?

There are currently afew online tools to help like and another one which looks like a toaster. But they both have problems and aren’t seamless. I’ve had to resort to just using photoshops export to web like 10 different times for all the icon sizes(and i’m pretty sure I didn’t cover all of them) because the icons became blurry with these tools. They also don’t name the files correctly and require you to at least(if the images come out right) to go rename everything. Finally I haven’t found a good way to do android 9 patch images that’s automatic.

Anyways I think a good updated tool for this preferably that became part of the gulp build process (I’m aware of gulp-image-resize it may be useful when making this) would be very helpful for everyone. If no one is willing to take this up I certainly will be but it will be a couple weeks because I have to work on some other things first but I thought I would at least raise this point.

Here is how I did it. Requires imagemagick. (brew install imagemagick on osx)


Thanks for the scripts!

What dimension and resolution do you recommend for the src image files (icon and splash) that is used as input.

Well for the icons I think a 512px would be great place to start. I wouldn’t go lower than 304x304, which is double the 152x152@2x.

For the splash image, what I’m doing in that script is taking my logo and layering it on top of and then centering on an image of the correct dimensions with a background color that is the same as my logo.

So, its going to depend on how small/large you want the icon. I’d make it no bigger than the smallest length, so 200px.

If you are going to do an actual full sized image, you’ll need to cut it up to fit properly.


Looking through the forums it seems I am not alone in thinking that the splash screen configuration for Cordova is somewhat confusing. In the official Cordova docs there is a section “Configuring Splash Screens in the CLI”

Can someone please explain when or if it’s possible to use this method of splash screen definition?

It seems that this would be by far the easiest way to define splash screens (in the main config.xml file) and then the build step should copy them into the specific platform locations (as with the app icons). But currently it seems that we have to create a hook or manually copy splash screens into the specific platform’s folder and edit the deafults.xml file for the specific platform as per the Customizing the SplashScreen tutorial