This tool will crop and resize JPEG and PNG source images to generate images for modern iOS and Android devices. It will also register the generated images in config.xml so that Cordova projects are updated accordingly.
$ npm install -g cordova-rescordova-res must run at the root of a Cordova project, such as:
resources/
├── icon.png
└── splash.png
config.xml
resources/icon.pngmust be at least 1024×1024pxresources/splash.pngmust be at least 2732×2732px
To generate resources with all the default options, just run:
$ cordova-rescordova-res accepts a platform for the first argument. If specified, resources are generated only for that platform:
$ cordova-res iosOtherwise, cordova-res looks for platforms in config.xml (e.g. <platform name="ios">) and generates resources only for them.
See the help documentation on the command line with the --help flag.
$ cordova-res --helpAndroid Adaptive Icons are also supported. If you choose to use them, create the following additional file(s):
resources/android/icon-foreground.pngmust be at least 432×432pxresources/android/icon-background.pngmust be at least 432×432px
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.
📝 Note: Cordova 9+ and cordova-android 8+ is required.
To avoid committing large generated images to your repository, you can add the
following lines to your .gitignore:
resources/android/icon
resources/android/splash
resources/ios/icon
resources/ios/splash
resources/windows/icon
resources/windows/splash
cordova-res can be used programmatically.
const run = require('cordova-res');
await run();run() takes an options object described by the interface Options. If options are provided, resources are generated in an explicit, opt-in manner. In the following example, only Android icons and iOS splash screens are generated.
import { Options, run } from 'cordova-res';
const options: Options = {
directory: '/path/to/project',
resourcesDirectory: 'resources',
logstream: process.stdout, // Any WritableStream
platforms: {
android: { icon: { sources: ['resources/icon.png'] } },
ios: { splash: { sources: ['resources/splash.png'] } },
},
};
await run(options);