Splash screen and Install dialog show black background behind app icon

Question

I'm having trouble with the icon that is shown for my PWA as:

• splash screen icon
• icon that is shown in the "Install app" dialog

See splash screen: (it's already fading out to the app a little bit, sorry about that):

https://i.stack.imgur.com/5BqXU.png

And the Install dialog:

https://i.stack.imgur.com/VGuZJ.png

My icons (up to 512x512) are just circular, with transparent backgrounds. I created them using a PWA icon generator website. The icon looks like this:

https://i.stack.imgur.com/ykmYG.png

Does anyone know why the icon is shown with a black background in the splash screen and in the Install app dialog?

My app manifest declares both the title bar color and the background color as #fafafa (almost white).

Thanks for the help!

Answer 1

I changed png to jpg image. It works for me
{ "src": "icon-48x48.jpg", "sizes": "48x48", "type": "image/jpg", "purpose": "maskable any" },