I have PWA support in the application, and icons are not always visible on the screen.
After thoroughly examining all PWA forums, no answer seemed to solve the problem.
Here is the index.html file(web app manifest and icon attached):
<link rel="manifest" href="webmanifest.json" />
<link rel="apple-touch-icon" href="assets/icons/CC_192x192.png" />
The icon is provided in the mentioned location and accessible with the link. The web app manifest file is properly configured.
"name": "Name",
"short_name": "ShortName",
"id": "/",
"theme_color": "#000",
"background_color": "#fff",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [
{
"src": "assets/icons/CC_192x192.svg",
"type": "image/svg",
"sizes": "192x192"
},
{
"src": "assets/icons/CC_192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "assets/icons/CC_512x512.svg",
"type": "image/svg",
"sizes": "512x512"
},
{
"src": "assets/icons/CC_512x512.png",
"type": "image/png",
"sizes": "512x512"
}
]
Please help.
Here are some sources I have read:
https://developer.chrome.com/en/docs/lighthouse/pwa/apple-touch-icon/ https://github.com/h5bp/html5-boilerplate/pull/1622 https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
In my case I figured out that by using https with a self-signed certificate, iOS will not download the apple-touch-icon and uses the first letter of the app name as icon.
By removing https from my PWA it was displayed on iOS.
In productional environment with a real signed certificate it will work.