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 (0)