Why is my web notification badge still showing generic chrome icon or blank even after customization?

Question

I'm trying to display a notification message from the service worker in a progressive web app(PWA) with a custom badge icon.

example of notification with custom badge

 self.registration.showNotification("Title", {
    icon: [path/to/icon],
    badge: [path/to/badge],
    body: "My message",
  });

I understand that I'm supposed to use an alpha image but depending on the icon I use, I either get the generic chrome Icon or a blank square.

I have tried using the following icons...

black icon with white background

white icon with black background

Answer 1

After spending hours turning the internet upside down and trying different icons, I learned that while rendering the icon to use, I had to export the alpha channel only hence a white icon with a transparent background in .png format.

Thanks to these docs