Bad icon displayed on PWA Android/chrome splashscreen

Question

This is the manifest.json I use to make appear the largest icon possible on chrome/android splashscreen for my PWA :

{
    "name": "App name",
    "short_name": "App name",
    "icons": [                
        {  
          "src": "icons/touchIcon-192x192.png",
          "sizes": "192x192",  
          "type": "image/png"  
        },  
        {  
          "src": "icons/touchIcon-256x256.png",
          "sizes": "256x256",  
          "type": "image/png"  
        },  
        {  
          "src": "icons/touchIcon-384x384.png",
          "sizes": "384x384",  
          "type": "image/png"  
        },  
        {  
          "src": "icons/touchIcon-512x512.png",
          "sizes": "512x512",  
          "type": "image/png"  
        }
    ],
    "background_color": "#323A4F",
    "theme_color": "#323A4F",
    "start_url": "/?standalone",
    "display": "standalone",
    "orientation": "portrait",
    "lang": "fr"
}

The problem is that chrome always displays a very very small icon at center of screen, about 48px I think...

Any idea?

Answer 1

After some trial and frustration, I found out that you must only specify the icon with 512px in the manifest or else it will use a lower DP icon as the app icon, and based on that it will use the large or small layout for the splash. You can read more about it here: here:https://github.com/GoogleChrome/lighthouse/issues/291