Grey square as notification icon using Firebase notifications

Question

I am attempting to integrate Firebase Cloud Messaging into my android app. But when the app is in the background or closed, Firebase notification is displayed with grey squa

Answer 1

Create the base shape within a 25x25 px image on a transparent background. Mind the safeframe, and keep the upper and lower 2 pixels free. Export the icon at 25x25 as a PNG file with transparency enabled.

Answer 2

From Firebase 9.8.0 it is possible to change this icon, by adding info about this in Manifest:

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

Example you will find here:

https://github.com/firebase/quickstart-android/blob/master/messaging/app/src/main/AndroidManifest.xml

Answer 3

Its a bug in firebase. If your app is in foreground and notification is sent from Firebase Console, you will get the grey icon.

Workaround is: Send notifications via API and not from Console.

Answer 4

It's not related to Firebase. Starting with Android 3.0 status icons were revised, and "are composed simply of white pixels on a transparent backdrop, with alpha blending used for smooth edges and internal texture where appropriate" https://developer.android.com/guide/practices/ui_guidelines/icon_design_status_bar.html. From what I've seen, starting Android 5.0 you are forced to provide these all white small status icons otherwise the gray square icon shows up.

This question Icon not displaying in notification: white square shown instead has answers that explain further and also show how to force your app to use the original ic_launcher icon although that doesn't seem like a good idea to me since you are forcing it to target an older sdk and also not following material design guidelines.

What you really should do is provide the small white icons which you can generate here http://romannurik.github.io/AndroidAssetStudio/icons-notification.html add them to your project and then configure FCM to use them as explained in the accepted answer

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

Answer 5

I used below solution and it worked for me in Flutter:

1. Create a transparent and white notification icon (you can use the following tool: AndroidAssetStudio )

2. Download the zip folder, unzip and you'll see it contains a res folder with different drawable folders. Copy and paste the contents of the res folder in "android\app\src\main\res" path

3. Then open the AndroidManifest.xml file and add the following lines to it:

ic_stat_calendar_today is the name of my notification icon. And each of the drawable folders that have been pasted contain a different size of icon with the same name.

4. If you want to change the color of the icon then check the above image. Add the metadata tag after the notification icon tag

5. Go to "android\app\src\main\res\values" and add a colors.xml file

Stackoverflow does not allow me to add colors.xml file code here so i am just adding code in above image, you will have to type it in your colors.xml manually. Sorry for that.

Special thanks to "RumanaB" on github.