splashicon-generator
Automatic icon and splash screen resizing for any Cordova based applications including PhoneGap. It uses an icon.png and a splash.png to automatically resize and copy it for all the platforms your project supports (currently works with iOS, Android and Windows Phone 8).
Consider using the base icon and splash images in the model folder, so that images are not cropped and resized incorrectly.
Installation
$ npm install splashicon-generator -g
Usage
Create an icon.png and a splash.png file in a 'model' folder under the root folder of your cordova project and run:
$ splashicon-generator
You can change the default folder for the base images using the argument imagespath. Consider the following example:
$ splashicon-generator --imagespath="project/assets"
This will look for an icon.png and a splash.png in the project/assets folder under the root folder of your cordova project.
Model
Use the Photoshop templates provided in the model folder to generate the PNG files.
Icon
Should be a 1024x1024px with a 5% margin.
Splash
Your splash must be 2732x2732px as it now is the largest resolution (used by iPad Pro 12.9"), and the artwork should fit a center square (1200x1200px). This Photoshop splash screen template provides the recommended size and guidelines of the artwork’s safe zone.
Platform specific assets
You can provide a platform-specific icon by creating a subfolder with the name of the platform.
- model
- icon.png // Default icon used for all platforms if not overriden.
- splash.png // Default splash used for all platforms if not overriden.
- android
- icon.png // Override the default icon for the 'android' platform. So you can use an icon with alpha, as apple doens't allow.
Requirements
ImageMagick
Install on a Mac:
$ brew install imagemagick
On linux:
$ sudo apt-get install imagemagick
On windows see http://www.imagemagick.org/script/binary-releases.php#windows
Configuring icons for Cordova project
Include in your config.xml file:
Configuring splash for Cordova project
Include in your config.xml file:
Notes:
With new versions of the Cordova you may want to use the config <preference name="SplashMaintainAspectRatio" value="true" /> to avoid distorted images on android.
More info on cordova-plugin-splashscreen.
Configuring splash and icon for PhoneGap project
You can use the same configuration of an cordova project just adjusting the xml elements as their documentation says:
http://docs.phonegap.com/phonegap-build/configuring/icons-and-splash/
Generate custom assets
You can use this package under node to specify custom assets. I personally use this for adding a custom Icon for Push on android. That needs to be an icon with transparency. I use it with gulp like this:
var splashiconGenerator = ; gulp;Then just add it to the config.xml:
<!-- pushicon --> References
License
MIT