A very frustrating issue while building an Ionic 4 app along with FCM plugin , is the inability to set a custom Notification Icon, with custom color. I figured out how to achieve this, so just wanted to share the solution with our beautiful StackOverflow community :)
So check out the solution to customize Firebase Cloud Messaging (FCM) Notification Icon and it's Color for Android platform, in my answer below.
I am using Ionic 4 + FCM plugin and here is what worked for me (November 2019). Please note that this solution is Android specific, i.e. the settings shown in this solution will help customize the Notification Icon look and feel on Android platform.
So let's begin in a series of steps:
1. In config.xml located in the root folder of your app: Example: (yourapp/config.xml)
Add the following to the <widget id=""...> tag at the end:
xmlns:android="http://schemas.android.com/apk/res/android"
It should look something like this now:
<widget id="com.mydomain.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
Or simply, copy the above line, replace the value of widget id, with your own.
2. In the same config.xml file:
Within the tags: <platform name="android"> and </platform>, add this:
<resource-file src="res/drawable-xhdpi/fcm_push_icon.png" target="app/src/main/res/drawable/fcm_push_icon.png" />
<resource-file src="res/drawable-hdpi/fcm_push_icon.png" target="platforms/android/res/drawable-hdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-mdpi/fcm_push_icon.png" target="platforms/android/res/drawable-mdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xhdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xxhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xxhdpi/fcm_push_icon.png" />
<resource-file src="res/drawable-xxxhdpi/fcm_push_icon.png" target="platforms/android/res/drawable-xxxhdpi/fcm_push_icon.png" />
<resource-file src="colors.xml" target="app/src/main/res/values/colors.xml" />
<config-file parent="/manifest/application/" target="app/src/main/AndroidManifest.xml">
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/fcm_push_icon" />
<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/colorPrimary" />
</config-file>
3. Visit the following link: Notification Icon Generator
Upload a White version (single color) of your logo on a Transparent background. If you upload a colored version, you will get a dark gray icon, which would look nasty. If you don't have a white version of your logo, get it designed. Leave the rest of the settings as they are. For the Name textbox value, enter: fcm_push_icon. Then click on the Blue colored round shaped button to download the zip file.
4. Unzip the zip file and copy contents to your app root folder:
Unzip the zip file that you just downloaded in the step above and extract its contents to a folder. You will notice that it contains a res folder. If you open this folder, it will contain other folders with the following names:
Each of those folders will contain a PNG icon by the name "fcm_push_icon.png". The only difference between the icons in those different folders is their size.
5. Copy the res folder to project root:
Copy the res folder from the Point 4 above, to the root folder of your app. So it should look like this now:
yourApp/res/drawable-hdpi/fcm_push_icon.png
yourApp/res/drawable-mdpi/fcm_push_icon.png
yourApp/res/drawable-xhdpifcm_push_icon.png
yourApp/res/drawable-xxhdpi/fcm_push_icon.png
yourApp/res/drawable-xxxhdpi/fcm_push_icon.png
6. Create colors.xml in the root folder of your app:
Now create a new file called colors.xml in the root folder of your app. So it should look like this now:
yourApp > colors.xml
7. Copy following content into colors.xml:
Copy the following content into the file colors.xml that you created in the Step 6 above and save it.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3880ff</color>
<color name="colorAccent">#3880ff</color>
<color name="white">#FFFFFF</color>
<color name="ivory">#FFFFF0</color>
<color name="orange">#FFA500</color>
<color name="navy">#000080</color>
<color name="black">#000000</color>
</resources>
8. Change the value of colorPrimary:
Change the value inside the tags: <color name="colorPrimary"></color> to any color you like. For example, you can use:
<color name="colorPrimary">#eedd33</color>
9. Build your App:
That's it! Now just build your app. When the build runs, it will copy all the files from the src directory to the target directory and the app will read the contents from the target directory.
So from now on, whenever you send a notification on your Ionic based Android app, the receiver will see your Colored App icon in the notifications.
10. Enjoy!!!