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 generate resources using ionic capacitor cli like what we were doing with cordova(ionic cordova resources android)? where should I replace icon and splash images with my own? after adding android platform using capacitor(ionic cap add android), it generates icon and splash images in android resources, but I don't know how to replace my own image.

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

UPDATE - It Copies the files AUTOMATICALLY now!

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

All of the answers are correct but not regarding the issue that came since ionic 4 in late patches and remains until now, which is the generated resources not being copied in the android folder. Let's go through it in details (it is also in the documentation but people usually ignore this part)

How to generate it

---

Not different from what has been stated in here so far and also in the documentation.

Step 1: Add the cordova res (check the documentation in case of doubts);

$ npm install -g cordova-res

Step 2: Generate the required images as defined in the documentation;

** Just so you guys know, this is the part where people usually ignores since there it is stated only those 2 images but, if you scroll up, you'll see the file tree.

Step 3: run the command for resource generation as stated in the capacitor sections (and also cited in previous posts here)

$ cordova-res ios --skip-config --copy
$ cordova-res android --skip-config --copy

Explaining:

• --skip-config: this config will inform that the project doesn't have a config.xml, therefore, not a cordova project that generates it;
• --copy: as the name stated, it copies the generated resources to each platform folder. If none is stated, it will place in all available platforms. If specified, obviously, it will perform only for the requested platform.

The issue

---

As I mentioned, people usually rushes through the documentation searching the topics and misses the small important points, which may cause the issue below:

But it is also in the documentation. It is regarding adaptive icons that are supported as well. It is described here in the documentation:

Solution

---

If you had the issue above all you have to do is to add the images to the folder resources/android and pay better attention to the documentation later (facepalm) (we've all been there at some point in our lives)

• resources/android/icon-foreground.png must be at least 432×432px
• resources/android/icon-background.png must be at least 432×432px

Once added, just run the resource generation again and it will work like a charm and place the images in the platform properly.

$ cordova-res ios --skip-config --copy
$ cordova-res android --skip-config --copy

Answer 4

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.

Answer 5

I found the official documentation using capacitor in my case.

https://capacitorjs.com/docs/guides/splash-screens-and-icons

$ cordova-res ios --skip-config --copy
$ cordova-res android --skip-config --copy