Generating Icons and Splash Screens

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 and iOS are supported; Windows is not.

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. Windows requires a higher resolution of 1240×1240px.

splashTemplate.png - must be at least 2732×2732px. Can be in png or jpg format. Windows splash screens have an aspect ratio of roughly 2:1 - the suggested size is 2480×1200px.

config.xml

These lines are needed in your config.xml file for icons and splash screens:

<preference name="SplashScreenDelay" value="2000" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="AndroidWindowSplashScreenAnimatedIcon" value="resources/splashTemplate.png" />
<preference name="AndroidWindowSplashScreenBackground" value="#000000" />

You can remove any existing <splash... and <icon... lines. VoltBuilder will supply the correct ones. This greatly simplifies your config.xml file.

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.