How to replace icon and splash in Capacitor

Question

I have successfully packaged the project on the device, but I want to replace the icon and splash. Is there any way to replace it?

Using Vue development, packaged to android.

Peony

Answer 1

Most simplest and easiest way to do that is this package:

1. npm install capacitor-resources

2. Create the folder which is named resources under the root of your capacitor based project

3. Add your icon.png (1024x1024 px) and splash.png (2732x2732 px)

4. Add to your package.json a script definition:

   {   
       ...   
       "scripts": {
           ...
           "resources": "capacitor-resources -p android,ios" 
       } 
   }
   

5. npm run resources

Note: Make sure that you have android, ios and www folders, if you don't have "ionic build & npx cap add android & npx cap add ios".

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

Polypetalous

Works nice. Only thing I had to do was scale down the image in icon.png – Acerbic

Can you please specify what is the resources folder? is it the one that is named android or ios when built or the main folder where package.json located at? – Juarez

resources folder needs to be placed as the same level as node_modules, src, dist etc – Ambassadoratlarge

Answer 2

TO SUCCESSFULLY REPLACE ICON and SPLASH in Capacitor

If you're using windows PC to execute your CLI. Do these 5 STEPS action

STEP 1

install capacitor resources by running npm install capacitor-resources -g

STEP 2

Create just 4 customized images (app icon, splash screen, icon background, and icon foreground) using any image editing software.

a. app icon - (a png file with dimension 1024x1024) and save as icon.png inside <Project Directory>/resources/ Let it replace the default

b. splash screen - (a png file with dimension 2732x2732) and save as splash.png inside <Project Directory>/resources/ Let it replace the default

c. icon background - (a png file with dimension 432x432) You may decide to make the color transparent or not and save as icon-background.png inside <Project Directory>/resources/android/

b. icon foreground - (a png file with dimension 432x432) and save as icon-foreground.png inside <Project Directory>/resources/android/ icon foreground is just same as app icon. it is the logo that will represent your app in app collections.

STEP 3

let capacitor help you to make the icon and splash in multiple dimensions by running

ionic cordova resources

STEP 4

copy the resources to the android build by running cordova-res --skip-config --copy

STEP 5

then run either of the following from the project directory, depending on whichever works for you. number 1 worked for me.

1. cd android && gradlew assembleDebug && cd ..

2. ionic cordova run android

Cybele

Answer 3

As of 2023, the current supported way to do this is to use the plugin @capacitor/assets.

Just follow the instructions provided at https://github.com/ionic-team/capacitor-assets

Shooin

Answer 4

Use this tool to generate the icons and splash screens, along with their configuration files. Just replace the files in the desired platform and you should be good to go. Tool

More on this, follow this tutorial

Conditional