Search code examples
androidandroid-manifestmobile-website

Why is android chrome add to homescreen using apple-touch-icon instead of what's specified in my manifest?


Here's my manifest.json:

{
  "lang": "en",
  "name": "Complice",
  "short_name": "Complice",
  "icons": [
    {
      "src": "favicon-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": "0.75"
    },
    {
      "src": "favicon-48x48.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": "1.0"
    },
    {
      "src": "favicon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": "1.5"
    },
    {
      "src": "favicon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": "2.0"
    },
    {
      "src": "favicon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "density": "3.0"
    },
    {
      "src": "favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "density": "4.0"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait"
}

Solution

  • Turns out the answer was really silly. I had

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

    but this link was only accurate on the homepage, not the main app page that you'd want to save a link to. Changed it to this and it worked as expected:

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

    I'm adding this question and answer because I got no results when I searched for my question, and I figured this might help future people.