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);