Setting website A2HS icon in iOS/Android

Some people will use iOS/Android Add to Home Screen, let website turn to a shortcut in Home Screen, our site created by create-react-app, if not set, it’s will showing React App is name and icon will be a current screenshot.

To setting showing name and icon it to edit [project_name]/public/manifest.json

it will look like

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

you can change short_name and name, but the icon has a different setting because iOS can’t not working in safari, you need setting in index.html like this

<link rel="apple-touch-icon" href="/a2hs.png">
<link rel="apple-touch-icon" sizes="152x152" href="/a2hs.png">
<link rel="apple-touch-icon" sizes="180x180" href="/a2hs.png">
<link rel="apple-touch-icon" sizes="167x167" href="/a2hs.png"

In Android you can be setting in [project_name]/public/manifest.json like

"icons": [
    {
      "src": "a2hs.png",
      "sizes": "64x64 32x32 24x24 16x16",
    }
]

But you will see your app will be square not round, in my case, I edit icon to round and edit like

"icons": [
    {
      "src": "a2hs.png",
      "sizes": "64x64 32x32 24x24 16x16",
      "purpose": "any maskable"
    }
]

It’s work in Android to show App in the round.

reference:

https://web.dev/maskable-icon/