What size can we use for the notification badge icon in FCM?

Question

I am using FCM push notification for my app, everything is working fine. but right now, I am getting a small icon below my notification icon. See below image.

Can any one tell me what is the size we can use for this icon? And how can we customize it?How can i add icon or image at that place?

Solution 1

I tried this and it solved,sorry for late answer

    private void sendNotification(String messageBody,String titles) {


            Intent intent = new Intent(this, NotificationList.class);
            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
            PendingIntent pendingIntent = PendingIntent.getActivity(this, 0 /* Request code */, intent,
                    PendingIntent.FLAG_ONE_SHOT);

            Uri defaultSoundUri= RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
            Bitmap largeIcon = BitmapFactory.decodeResource(getResources(), R.mipmap.appicon);

            NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this)

                    .setContentTitle(titles)
                    .setLargeIcon(largeIcon)
                    .setContentText(messageBody)
                    .setAutoCancel(true)
                    .setSound(defaultSoundUri)
                    .setSmallIcon(getNotificationIcon())
                    .setContentIntent(pendingIntent);

            NotificationManager notificationManager =
                    (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);

            notificationManager.notify(0 /* ID of notification */, notificationBuilder.build());
        }

private int getNotificationIcon() {
        boolean useWhiteIcon = (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.M);
        return useWhiteIcon ? R.mipmap.notismall : R.mipmap.appicon;
    }

Solution 2

You can use badge icon of any size like 72x72 or any but the thing is your icon should be .png extension only of transparent background and icon color should be white only... Here is the code for setting large notification icon and badge icon

 String title = context.getString(R.string.app_name);
    Bitmap bm = BitmapFactory.decodeResource(context.getResources(), R.drawable.logo);
    NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(context)
            .setSmallIcon(R.drawable.tlogo)
            .setLargeIcon(bm)
            .setContentTitle(title)
            .setContentText(message)
            .setStyle(new NotificationCompat.BigTextStyle().bigText(message))
            .setWhen(when);

Solution 3

The icon in the image suggests that the notification has come from Chrome which recently added support for badge customisation in version 53.

There is sadly no guidance on the recommended size, but a square image with transparent background and only white would be the recommendation I can give.

72x72px is probably a good bet for image size based on Android docs which suggest a badge size of 24dips (which can be thought of as 24px multiplied by a devices screen density). So 24px x 3 = 72px.

To set the badge on a web notification you need to include a badge options:

self.addEventListener('push', function(event) {
  event.waitUntil(
    self.registration.showNotification(
      'Hello', {
        body: 'Thanks for sending this push msg.',
        icon: './images/icon-192x192.png',
        badge: './images/icon-72x72.png'
      })
  );
});

Info from: https://medium.com/dev-channel/custom-notification-badges-for-all-df524a4003e8#.jwbxe7eft

Further Info: https://web-push-book.gauntface.com/chapter-05/02-display-a-notification/#badge