How to Add Icon and Splash Screen to your Ionic App

The first thing we all think about, when we start creating a brand new App is “what icon could I use to it?”

There are many web sites where professional designers make themselves available to create the icons of our App. Many icons are also available on the web, for free for download. Or again, if we have some good taste and ability to use graphic editing tools, we can also create our own icon by ourself.

Whatever the solution we choose, the time will always come to insert the icon in our App. And sometimes, this is not so trivial.

In this article
we will see how to create an icon and a splash screen for an Ionic application, how to add it to our App, and how to fix some “small defects” in the display. What we will get will be an App with an icon attractively, but above all correctly proportioned on the display of our device.

What do we need?
1. A graphic editor. For this article, I’ll be using Gimp: a simple, lightweight, and (more than that) free software.

2. An icon. Purchased from a professional designer, designed by you, or downloaded for free from the web.

Well, let’s get started!

First of all, we’ll need Ionic CLI. So, if you’ve never installed it on your desktop, than open your terminal and type

npm install -g @ionic/cli

Create the Project
When done, keep your terminal opened, navigate to the folder where you want to to create your project, and paste the following command

ionic start myApp blank --type=vue --package-id=io.my.app --capacitor

This will create a new blank Ionic/Vue application project inside the folder “myApp”, by enabling capacitor on it. Our APP name will be “myApp”, and its package-id “io.my.app”.

Of course, you can choose to give your APP a different name and package-id.

Install the required plugins
Now we need to install @capacitor/splash-screen plugin. So, navigate to the “myApp” folder, and type the following command

npm install @capacitor/splash-screen

Add Android Platform
Now, let’s add Android platform, by the following commands

ionic cap add android
ionic cap sync

Let’s create our Icon and Splash Screen
Create a “resources” folder in your project’s root. This will be the place where we will save our icons and splash screens.

Open your icon with Gimp, to edit it. Make sure it has equal width and height, and a transparent background. Resize this image to 512x512 pixels, and save it in “resources/logo.png”

Our 512x512 pixels logo.png

Now click the “Image > Canvas Size” menu. We have to put our icon to the center of a 1024x1024 px canvas. In the “Set Image Canvas Size” type 1024 for both “Width” and “Height”. Then click “Resize”.

Resizing canvas to 1024x1024 pixels

1024x1024 pixels canvas result

When done, save it as “resources/icon.png”

Now, we have to do the same, to create our Splash Screen.
Click again the “Image > Canvas Size” menu. We have to put our icon to the center of a 2372x12372 px canvas. In the “Set Image Canvas Size” type 2372 for both “Width” and “Height”. Then click “Resize”.

Resizing canvas to 2732x2732 pixels

2732x2732 pixels canvas result

When done, save it as “resources/splash.png”

Our “resources” folder content

Now that we’ve created our icon and splash screen
it’s time to add them to our Project. Let’s open our project with VSCode. In the terminal, type the following command

npx cordova-res android -skip-config -copy

This will create the “resources/android” folder, where we will find our icons and splash screens, in all formats needed by Android.

Unfortunately this command is not enough
because cordova-res DOES NOT create the adaptive icons introduced with Android 8.0. As a consequence, once launched on our device, our App will have the default Ionic icon.

We can remedy this with a simple trick: we’ll create the adaptive icons required by Android 8+ ourselves. In the terminal, type the following commands

on Windows

cd resources\android\icon
copy drawable-mdpi-icon.png mdpi-foreground.png
copy drawable-hdpi-icon.png hdpi-foreground.png
copy drawable-xhdpi-icon.png xhdpi-foreground.png
copy drawable-xxhdpi-icon.png xxhdpi-foreground.png
copy drawable-xxxhdpi-icon.png xxxhdpi-foreground.png

on Mac

cd resources/android/icon
cp drawable-mdpi-icon.png mdpi-foreground.png
cp drawable-hdpi-icon.png hdpi-foreground.png
cp drawable-xhdpi-icon.png xhdpi-foreground.png
cp drawable-xxhdpi-icon.png xxhdpi-foreground.png
cp drawable-xxxhdpi-icon.png xxxhdpi-foreground.png

Let’s see the result of what we have done!
We need our real device, connected via USB to our PC. This is important, as the Icon and Splash Screen may not be displayed correctly on an emulator. But above all, because the fixes that we are going to do later, give safe results on a real device.

Once you have connected your device via USB cable, type the following commands in the terminal, and when prompted select your device

npx cap sync
ionic capacitor run android -l --external

As you can see, our icon has been correctly applied to our App. Having centered a 512x512 pixel icon within a 1024x1024 pixel canvas, resulted in a practically perfect icon.

Our perfectly fitting App’s icon

Something obviously went wrong with our Splash Screen, which appears stretched instead

Ops, something went wrong with the Splash Screen :-(

This graphical defect, depends on the fact that the initial screen of our App fills the entire screen of our device, also occupying the area normally dedicated to the status bar and the navigation buttons of the software. So, to fill that vertical space as well, Capacitor warps our image.

No problem! Let’s fix it now!
Thanks to the @capacitor/splash-screen plugin that we have installed, we can easily control some properties of the Splash Screen of our App.

For example, we can set a background color or the time it will remain visible. And we can also tell capacitor how we want it to position and size our image within the Splash Screen of our App.

Open the capacitor.config.json file, and paste the following code

{
    "appId": "io.my.app",
    "appName": "myApp",
    "webDir": "dist",
    "bundledWebRuntime": false,
    "plugins": {
        "SplashScreen": {
            "launchShowDuration": 3000,
            "launchAutoHide": true,
            "androidScaleType": "CENTER_CROP",
            "splashImmersive": true,
            "backgroundColor": "#ffffff"
        }
    }
}

Now, we’re telling Capacitor that we want
1. the Splash Screen desplayed 3 seconds
2. Splash Screen will auto-hide (after 3 seconds)
3. our image will be cropped to the center of the screen
4 the Splash Screen is full-immersive, and hides both status bar and the navigation buttons
3 and we want our Splash Screen has a White (#ffffff) background

Now we need to edit the “android/app/src/main/res/values/styles.xml” file, by changing the following code

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:background">@drawable/splash</item>
</style>

into this

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:background">@drawable/splash</item><item name="android:windowIsTranslucent">true</item>
</style>

We did it all!
Now we can launch our App again, by running the following commands, and everything will be fine.

npx cap sync
ionic capacitor run android -l --external

Our App’s Splash Screen well proportioned

We’re done for today!
I hope this article is useful for you.

If you have any questions or suggestions, please feel free to contact me.

Finally, if you liked this article, please click “Follow” on my name at the top of this page.

Greetings! Simone