How to change the Firebase push notification icon on Android

In this blog post I will explain how to change the notification icon and its color on an Android device. This is the small icon that is shown together with the push notification within the notification bar.

Notification icon sizes

The notification icon should have the following sizes, in pixels. Which icon is used depends upon the smartphone device:

• MDPI - 24 x 24 (drawable-mdpi)
• HDPI - 36 x 36 (drawable-hdpi)
• XHDPI - 48 x 48 (drawable-xhdpi)
• XXHDPI - 72 x 72 (drawable-xxhdpi)
• XXXHDPI - 96 x 96 (drawable-xxxhdpi)

Create a new notification icon

1. Create a PNG file for the notification icon with the graphic tool you like. I am a big fan of Affinity Designer. It is a paid application but relatively cheap with a lot of options.
2. The background of the image must be transparent. The foreground must be black. Don't use any other colors.
3. Save the files as follows:

Create a color for the notification icon

1. If not exists, create the file app/src/main/res/values/colors.xml.
2. Add the following content:

1<?xml version="1.0" encoding="utf-8"?>
2<resources>
3    <color name="notification_icon">#046F47</color>
4</resources>

You can change the color as you like. In this case we added a green color.

Replace the icon

1. Now modify the app/src/main/AndroidManifest.xml. Add the following meta-data lines:

 1<manifest >
 2   <application >
 3        
 4        <meta-data
 5            android:name="com.google.firebase.messaging.default_notification_icon"
 6            android:resource="@drawable/ic_notification" />
 7        <meta-data
 8            tools:replace="android:resource"
 9            android:name="com.google.firebase.messaging.default_notification_color"
10            android:resource="@color/notification_icon" />

2. If not exists, add xmlns:tools="http://schemas.android.com/tools" attribute to the manifest root element like this:

1<manifest 
2          xmlns:tools="http://schemas.android.com/tools"
3          
4          package="...">

Done! Now, when a push notification arrives, the app will show your new icon in the color you have chosen.