Apple touch icon not showing on mobile Phones

Question

I'm currently struggling to get the apple-touch-icon to appear on mobile Phones. In Safari on my Laptop, the icon is displayed as as part of the tab and in my bookmarks. On mobile phones however, it does not show up. From my research, I should be doing it right but it still doesn't work. I'm testing it on a stage envrionment as the site I'm working on is not live yet.

This is my implementation of the apple-touch-icons:

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

My project also contains a manifest.json file which contains all the paths and I reference it like this:

 <link rel="manifest" href="manifest.json" crossorigin="use-credentials">

When I'm on the website, I can also open the manifest file in the dev tools, so the browser definitely has access to it.

Can anyone help me figure out what the problem might be here?

Answer 1

For anyone running into this issue - my "problem" ended up being testing on the stage environment. It worked in production. So the way I'm showing in the example is correct.