iosiconsprogressive-web-appsipados

Progressive Web App icon on iOS and iPadOS loses transparency


I am experimenting with creating a Progressive Web Application. I've created a manifest and icons as described in https://web.dev/learn/pwa/web-app-manifest. I can install it on iOS and iPadOS as expected using Send to, Add to Home Screen.

My test icon is mostly transparent:

Screenshot of icon in Paint.NET

However, when rendered on the home screen or in the dock, my icon loses its transparency instead showing with a black background:

Screenshot of icon on iPadOS home screen

Curiously, if I click on the icon to launch the app, then swipe up to return to the home screen, the icon briefly shows correctly with transparency during the return to home screen animation. However, shortly afterwards it changes to show a black background again.

Here is the PNG file I'm using for my icon:

Icon (PNG)

This is 512-maskable.png. The page I am installing from specifies:

  <link rel="manifest" href="/open/pwa/app.webmanifest">
  <link rel="apple-touch-icon" href="/open/pwa/icons/512-maskable.png">

My manifest file is:

{
    "name": "PWA Test",
    "start_url": "/open/pwa",
    "display": "standalone",
    "icons": [
        {
            "src": "/open/pwa/icons/512.png",
            "type": "image/png",
            "sizes": "512x512"
        }, {
            "src": "/open/pwa/icons/1024.png",
            "type": "image/png",
            "sizes": "1024x1024"
        }, {
            "src": "/open/pwa/icons/192.png",
            "type": "image/png",
            "sizes": "192x192"
        }, {
            "src": "/open/pwa/icons/384.png",
            "type": "image/png",
            "sizes": "384x384"
        }, {
            "src": "/open/pwa/icons/512-maskable.png",
            "type": "image/png",
            "sizes": "512x512",
            "purpose": "maskable"
        }
    ]
}

I've posted a video showing the transparency disappearing after animation here: https://youtube.com/shorts/hgDhh-0Mw8I

Is it possible to keep the icon transparent on iOS and iPadOS?


Solution

  • Thanks, @Paulw11. Your answer, that iOS icons can’t be transparent, seems rather obvious now that I look at other icons there.