DEV Community

Cover image for How to Fix the White Notification Icon in Android Push Notifications
Amit Kumar
Amit Kumar

Posted on

How to Fix the White Notification Icon in Android Push Notifications

#android #reactnative #fcm #firebase

If you are working with Firebase Cloud Messaging (FCM) and notice that your Android push notification is displaying a white square, blank icon, or incorrect icon, you are not alone.

This usually happens because Android handles notification icons differently from application launcher icons.

In this post, we'll configure a proper notification icon and set it as the default Firebase notification icon.

The Problem

You may see a notification where the icon appears as a simple white square instead of your expected notification icon.

This can happen when Firebase doesn't have a properly configured default notification icon or when the application icon is being used as the notification icon.

Android notification icons should be small, monochrome icons with a transparent background.

The Fix

The fix requires two changes:

  1. Add a default notification icon configuration to AndroidManifest.xml.
  2. Add ic_notification.png to the Android drawable density folders.

1. Configure the Notification Icon in AndroidManifest.xml

Open:

android/app/src/main/AndroidManifest.xml
Enter fullscreen mode Exit fullscreen mode

Inside the <application> tag, add:

<meta-data
    android:name="com.google.firebase.messaging.default_notification_icon"
    android:resource="@drawable/ic_notification" />
Enter fullscreen mode Exit fullscreen mode

For example:

<application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher">

    <meta-data
        android:name="com.google.firebase.messaging.default_notification_icon"
        android:resource="@drawable/ic_notification" />

    <!-- Other configuration -->

</application>
Enter fullscreen mode Exit fullscreen mode

The important part here is:

android:resource="@drawable/ic_notification"
Enter fullscreen mode Exit fullscreen mode

This tells Firebase to use ic_notification as the default notification icon.

2. Add ic_notification.png

Next, add your notification icon to the Android drawable folders.

Your project should look like this:

android/
└── app/
    └── src/
        └── main/
            └── res/
                ├── drawable-mdpi/
                │   └── ic_notification.png
                ├── drawable-hdpi/
                │   └── ic_notification.png
                ├── drawable-xhdpi/
                │   └── ic_notification.png
                ├── drawable-xxhdpi/
                │   └── ic_notification.png
                └── drawable-xxxhdpi/
                    └── ic_notification.png
Enter fullscreen mode Exit fullscreen mode

Add the same ic_notification.png file to:

drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi
Enter fullscreen mode Exit fullscreen mode

This allows Android to select an appropriate icon density for different devices.

3. Make Sure the Icon Is Designed for Notifications

One important thing to remember is that a notification icon is not the same as an app launcher icon.

For Android notifications, use a simple icon with:

  • A transparent background
  • A white foreground
  • A simple shape
  • No unnecessary colors
  • No full-color background

Conclusion

The white or blank notification icon issue can usually be resolved by providing Android with a dedicated notification icon instead of relying on the application's launcher icon.

Top comments (1)

Collapse
 
superfunicular profile image
Super Funicular •

The fix is right, and the missing half is the why, which explains a whole class of neighbouring surprises.

Since Lollipop the system reads only the alpha channel of the small icon and discards every colour value. A launcher icon is fully opaque across its whole square, so once colour is thrown away there is nothing left but a solid silhouette, which is exactly the white box in your screenshot. It is less that Firebase picked the wrong asset and more that any opaque asset renders identically.

Two things fall out of that. setColor() on the builder tints the silhouette, so the accent colour is effectively the only colour control you have. And testing the icon against a dark background alone will hide a bad one, because a white-on-white silhouette reads as missing rather than wrong.

Where this bites hardest in my experience is a foreground service notification rather than a push. It sits in the shade for hours instead of seconds, so a poor silhouette is on screen the whole time the feature runs, and the status bar copy is smaller still. Anything with interior detail turns to mush at that size.

Did the vector drawable route hold up for you as the FCM default, or did PNG per density turn out to be the safer bet?