Generating Icons and Splash Screens

(This feature is in beta. Please send questions/comments to support@voltbuilder.com)

VoltBuilder can generate icons and splash screens in all the required sizes for your app. Just supply an icon and a splash screen template, and VoltBuilder will take care of the rest. The generated images will be added to your project and your config.xml file updated. Android, iOS and Windows are supported.

Not only does this make the production of your app easier, it also reduces the upload size to VoltBuilder: you no longer have to include images of all different sizes.

When new image sizes are required by platforms, VoltBuilder will automatically add them.

Of course, if you are happy with your current images, you can keep using them.

To use this feature, just two files are needed in your resources folder (at the top level of your project): iconTemplate.png and splashTemplate.png. There’s a optional resource.json file which gives you finer control over how the images are generated.

├-- resources
│   ├-- iconTemplate.png
│   ├-- splashTemplate.png
│   └-- resources.json (optional)

iconTemplate.png - must be at least 1024×1024px. Can be in png or jpg format.

splashTemplate.png - must be at least 2732×2732px. Can be in png or jpg format.

config.xml

Here are the only lines you need in your config.xml file for icons and splash screens:

<preference name="SplashScreenDelay" value="2000" />
<preference name="AutoHideSplashScreen" value="true" />
<plugin name="cordova-plugin-splashscreen" />

You can remove any existing <splash... and <icon... lines. VoltBuilder will supply the correct ones.

resources.json (optional)

You can specify how VoltBuilder generates images from your icon and splash files by adding an optional resources.json file in your resources folder.

The following optional attributes are supported:

Attributes Description
fit Specifies how to fit the image when resizing. Can be cover, contain, or fill. (default: cover)
icon-background-source Specifies hex color code (use if you are not specifying an image for your Android adaptive icon background).
position Specifies how to position the image when resizing. Can be center, top, right top, right, right bottom, bottom, left bottom, left or left top. (default: center)
orientation Specifies orientation of image. Can be landscape or portrait. (default: portrait)

Example

{
  "fit": "cover",
  "icon-background-source": "#FFFFFF",
  "orientation": "portrait",
  "position": "center"
}

Android Adaptive Icons

Android Adaptive Icons can display a variety of shapes across different device models. If you choose to use them, create the following additional file(s):

resources/android/icon-foreground.png - must be at least 432×432px. Can be in png or jpg format. resources/android/icon-background.png must be at least 432×432px. Can be in png or jpg format.

A color may also be used for the icon background by specifying the --icon-background-source` option with a hex color code, e.g.–icon-background-source ‘#FFFFFF’``.

Regular Android icons will still be generated as a fallback for Android devices that do not support adaptive icons.

VoltBuilder uses the cordova-res library to create these resources.