We are creating a web app which will be added to Home screen and used as a native app.
We followed these recommendations from Apple: Configuring Web Applications And everything works great. App is added to Home screen with icon and title. It is launched without browser control buttons and address bar, etc.
But there is one one issue. Our app uses browser geolocation. When user allows to track location, the app is added to Settings --> ... --> Geolocation:
As you can see, the app is added without icon.
What do we need fix to make app icon appear everywhere, not only on Home screen?
Here is relevant part of our HTML-code:
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="manifest" href="manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Short title">
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/png" sizes="192x192" href="icons/icon-192x192.png">
<link rel="apple-touch-icon" sizes="152x152" href="icons/apple-touch-icon-152x152.png">
</head>
This is simply out of your control. You've done your part by specifying the icon, it's up to Apple to honour it.