Ionic 5 - How to replace default icon and splash screen image and generate resources

Question

I recently started using ionic 6 and capacitor(not cordova), and I don\'t know how to replace its default application icon and splash screen. Is there any way to do it and gene

Answer 1

Automatic icon and splash screen resizing CLI tool for Capacitor based applications.

It automatically resizes and copies your icon.png and splash.png files to platform dedicated directories.

It does NOT require any external binary libraries. Javascript only.

Installation

$ npm install capacitor-resources -g

Usage

Required files Add your icon.png (1024x1024 px) and splash.png (2732x2732 px) files to the 'resources' folder under the root of your capacitor based project.

$ capacitor-resources

https://www.npmjs.com/package/capacitor-resources

Answer 2

I solved this by using capacitor-resources and this script below. Save it as resources.js in your root. Then in your package.json file under scripts add:

"resources": "capacitor-resources -p android,ios && node resources.js",

const fs = require('fs');

function copyImages(sourcePath, targetPath, images) {
  for (const icon of images) {
    let source = sourcePath + icon.source;
    let target = targetPath + icon.target;
    fs.copyFile(source, target, err => {
      if (err) throw err;
      console.log(`${source} >> ${target}`);
    });
  }
}

const SOURCE_ANDROID_ICON = 'resources/android/icon/';
const SOURCE_ANDROID_SPLASH = 'resources/android/splash/';

const TARGET_ANDROID_ICON = 'android/app/src/main/res/';
const TARGET_ANDROID_SPLASH = 'android/app/src/main/res/';

const ANDROID_ICONS = [
  { source: 'drawable-ldpi-icon.png', target: 'drawable-hdpi-icon.png' },
  { source: 'drawable-mdpi-icon.png', target: 'mipmap-mdpi/ic_launcher.png' },
  { source: 'drawable-mdpi-icon.png', target: 'mipmap-mdpi/ic_launcher_round.png' },
  { source: 'drawable-mdpi-icon.png', target: 'mipmap-mdpi/ic_launcher_foreground.png' },
  { source: 'drawable-hdpi-icon.png', target: 'mipmap-hdpi/ic_launcher.png' },
  { source: 'drawable-hdpi-icon.png', target: 'mipmap-hdpi/ic_launcher_round.png' },
  { source: 'drawable-hdpi-icon.png', target: 'mipmap-hdpi/ic_launcher_foreground.png' },
  { source: 'drawable-xhdpi-icon.png', target: 'mipmap-xhdpi/ic_launcher.png' },
  { source: 'drawable-xhdpi-icon.png', target: 'mipmap-xhdpi/ic_launcher_round.png' },
  { source: 'drawable-xhdpi-icon.png', target: 'mipmap-xhdpi/ic_launcher_foreground.png' },
  { source: 'drawable-xxhdpi-icon.png', target: 'mipmap-xxhdpi/ic_launcher.png' },
  { source: 'drawable-xxhdpi-icon.png', target: 'mipmap-xxhdpi/ic_launcher_round.png' },
  { source: 'drawable-xxhdpi-icon.png', target: 'mipmap-xxhdpi/ic_launcher_foreground.png' },
  { source: 'drawable-xxxhdpi-icon.png', target: 'mipmap-xxxhdpi/ic_launcher.png' },
  { source: 'drawable-xxxhdpi-icon.png', target: 'mipmap-xxxhdpi/ic_launcher_round.png' },
  { source: 'drawable-xxxhdpi-icon.png', target: 'mipmap-xxxhdpi/ic_launcher_foreground.png' }
];
const ANDROID_SPLASHES = [
  { source: 'drawable-land-mdpi-screen.png', target: 'drawable/splash.png' }, 
  { source: 'drawable-land-mdpi-screen.png', target: 'drawable-land-mdpi/splash.png' },
  { source: 'drawable-land-hdpi-screen.png', target: 'drawable-land-hdpi/splash.png' },
  { source: 'drawable-land-xhdpi-screen.png', target: 'drawable-land-xhdpi/splash.png' },
  { source: 'drawable-land-xxhdpi-screen.png', target: 'drawable-land-xxhdpi/splash.png' },
  { source: 'drawable-land-xxxhdpi-screen.png', target: 'drawable-land-xxxhdpi/splash.png' },
  { source: 'drawable-port-mdpi-screen.png', target: 'drawable-port-mdpi/splash.png' },
  { source: 'drawable-port-hdpi-screen.png', target: 'drawable-port-hdpi/splash.png' },
  { source: 'drawable-port-xhdpi-screen.png', target: 'drawable-port-xhdpi/splash.png' },
  { source: 'drawable-port-xxhdpi-screen.png', target: 'drawable-port-xxhdpi/splash.png' },
  { source: 'drawable-port-xxxhdpi-screen.png', target: 'drawable-port-xxxhdpi/splash.png' }
];

copyImages(SOURCE_ANDROID_ICON, TARGET_ANDROID_ICON, ANDROID_ICONS);
copyImages(SOURCE_ANDROID_SPLASH, TARGET_ANDROID_SPLASH, ANDROID_SPLASHES);

Answer 3

cordova-res now supports Capacitor. You just need to install cordova-res globally (or use npx) and run it to generate and copy to the appropriate native projects. You can read the docs on GitHub: https://github.com/ionic-team/cordova-res#capacitor, but basically you only need to run these commands and it will use the /resources folders icon.png and splash.png for generation as expected:

npm install -g cordova-res
// From within your Ionic project:
cordova-res --skip-config --copy // Android, iOS, and Windows

I tend to stick that last line in package.json scripts so I don't have to keep looking it up when updates occur by running npm run resources.

File: package.json

"scripts": {
  // ...
  "resources": "cordova-res --skip-config --copy"
},

If you don't want to install a global package you can use npx, and to avoid see the warning about how cordova-res not handling exporting to the Windows platform you can isolate the export to iOS and Android:

Alternative: package.json

"scripts": {
  // ...
    "resources": "npx cordova-res ios --skip-config --copy && npx cordova-res android --skip-config --copy"
}

If you need the PSD to generate your splash screen it can be found by scanning the Ionic Docs for the CLI https://ionicframework.com/docs/cli/commands/cordova-resources, or downloaded directly from https://code.ionicframework.com/resources/splash.psd.