Change the default Chrome icon (browser logo) for notifications

Is it possible to replace the Chrome logo / browser logo on notifications with the website logo?

The answer is that it depends on the OS.

On some OS, like MacOS, the notifications include the browser logo (Chrome) and the website icon. It's not possible to remove or replace the Chrome logo in this case, because MacOS wants to make it clear what application is displaying the notification. However the notification also includes an icon set by the website.

A notification on MacOS, with the Chrome logo on the left and a custom icon set by the website on the right.

On other operating systems, like Android, it's possible to change also the Chrome icon. In order to achieve that, you need to set both the icon and the badge when you display the notification. For example:

serviceWorkerRegistration.showNotification('Example notification', {
  icon: 'https://example.com/icon.png',
  badge: 'https://example.com/badge.png'
});

Here's a figure that illustrates the difference between the icon and the badge on Android:

Change the icon and badge using Pushpad

If you are sending the notifications from your website using Pushpad you can easily change the icon, the badge and the image for each notification.

Basically you can set them when you send a notification.

Here's an example with the Ruby library (there are also libraries for other languages or a REST API):

notification = Pushpad::Notification.new({
  body: "Example notification with custom icon, badge and image.",
  icon_url: "https://example.com/assets/icon.png",
  badge_url: "https://example.com/assets/badge.png",
  image_url: "https://example.com/assets/image.png"
})

notification.broadcast

You can also set the default icon and default badge in project settings from the Pushpad dashboard (so that you don't have to set them for each notification).

For more information read the documentation for images and icons.