How to configure app-name for website shortcut (homescreen)?

Question

I´m having a website my client wants to add to his home screen on android, so when I´m doing this (with chrome), chrome/android asks to provide/change the displayed name. In my case it is prefilled with "App".

The label of the popup translated to english is "Add to Homesceen"

But when I do the same with for-example stackoverflow I get it prefilled with a "name" probably the site title.

so what I tried:

• I have a title tag and tried to shorten it, but even with very small title theres still "App" by default
• I added a <meta name="application-name" content="name-X"> with no effect, also tried <meta name="apple-mobile-web-app-title" content="name-X">
• checked the markup which validates with no errors/warning (w3c-validator)
• App-icons for different devices and sizes work as expected
• and I tried to search the web with no success :/
• I can´t even Figure out where "App" may come from as its not occuring in source

for any help thanks in advance :)

Answer 1

You're looking for a PWA JSON manifest. It will tell your browser about your app.

As you can see in the link above, you shall provide short_name and/or name attribute. Don't forget to link your manifest:

<link rel="manifest" href="/manifest.json">

Example:

{
  "short_name": "Maps",
  "name": "Google Maps",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/maps/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/maps/",
  "theme_color": "#3367D6"
}