Incorrect display of the icon on Android devices

[ri-yarm]

Hello,

The problem with displaying the icon in notifications on Android devices

I am seeking assistance with an issue related to displaying the application icon in notifications on Android devices. The problem is that the icon is not being displayed correctly in notifications, despite following all the steps outlined in the documentation.

Devices:

Real devices: MIUI (vivo y33s, redmi 9), Samsung S20. Possibly on other devices.
Emulator: Pixel_6a_API_33 (AVD) - version 13.

Steps taken to resolve the issue:

Verified all the specified steps in the documentation. Transparency set for the icon on a blue background. The problem persists even after using Android Studio to process the icon.

Proof: samsung ->

redmi ->

vivo ->

emulator->

logo-> The logo is not complex, but it has a gradient. Could that be the issue?

You can notice that the icon is correctly displayed on almost all devices when the notification shade is closed, but it is displayed incorrectly on all devices when viewing notifications in the list of all notifications. At first, I thought that the issue was again due to the quirks of MIUI, but on the Poco X3 device, the icon is consistently displayed well in both cases (with the notification shade open and closed). Also, for your information, on iOS, the icon looks consistently good.

I invoke notifications like this:

const { count, pressAction, isMessage } =
      nAndroidRemoteMessagesVariables(remoteMessage);

    const channelId = await notifee.createChannel({
      id: "default",
      name: "Default Channel",
      importance: AndroidImportance.HIGH,
      visibility: AndroidVisibility.PUBLIC,
    });

    await notifee.displayNotification({
      title: remoteMessage.notification?.title,
      body: remoteMessage.notification?.body,
      android: {
        channelId,
        pressAction: {
          id: "default",
          launchActivity: `${remoteMessage.collapseKey}.MainActivity`,
        },
      },
      data: {
        custom_data: {
          click_action: pressAction,
        },
      },
    });

Thank you for your attention to this problem, and I would appreciate any help in resolving it!

[gtom84]

This reference seems to be missing in your notifee.displayNotification

  android: {
    smallIcon: 'ic_small_icon', // icon filename in android/app/src/main/drawable-[h|m|xh|xxh|xxxh]dpi
  }

[ri-yarm]

I did not specify the smallIcon because I wanted to use ic_launcher by default. However, I still used ic_small_icon, and there was a similar issue with displaying the icon. I created it using the Image Asset tool in Android Studio.

redmi 9 device ->

You can see how the application icon in notifications has changed, and it started to appear, but I would like to see a blue background. I used a PNG without transparency, and there is nothing visible at all. I also tried adding color to the displayNotification, but it leads to a different result.

[ri-yarm]

Well, I figured out this issue. Interestingly, it's not mentioned anywhere, or maybe I just didn't find it. In short, on not all Android versions (or on shells like MiUI), proper display of the icon is supported. On devices where it's possible to display the application icon (ic_launcher), it will show it and ignore ic_small_icon.

For ic_small_icon, you should use a simple logo without colors and gradients to support devices that can't display ic_launcher.