I just set up icons using a generator, and it almost works. When I launch my site in a Firefox browser for example, I see the intended favicon in the tab.
But when I use Firefox on Android, and I use the feature "Install", what I get on my home screen is a circle with the first letter of the app, as if I had no favicon.
Fun : when I put my phone on airplane mode, I can use the "add to homescreen" feature. And it that case, it works, I get the right icon on my home screen.
The manifest.json :
{
"name": "Super app",
"display": "standalone",
"start_url": "super_url",
"icons": [
{
"src": "/icon.svg",
"sizes": "512x512",
"type": "image/svg+xml"
},
{
"src": "/android-512-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/android-192-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-144-144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/android-96-96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/android-72-72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/android-48-48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/favicon-32x32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png"
}
]
}
the relevant part of my Html head :
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="manifest" href="icons/manifest.json">