0

I have a single-page Progressive Web App (accessed from iPhones), and I've added the following to my <head>:

<link rel="apple-touch-icon" href="img/appicon/acme_homescreen_60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/appicon/acme_homescreen_120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/appicon/acme_homescreen_152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="img/appicon/acme_homescreen_167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/appicon/acme_homescreen_180x180.png">

This works on https://acme.com/login, so there's no basic problem such as misspelled file name, wrong path, password protection, ... Yet it doesn't work on https://acme.com/selection nor any other URL besides /login. I get the default screenshot there.

I double checked: There's the same <head> on all URLs, so what am I missing?

PS: I cannot use https://realfavicongenerator.net/favicon_checker as suggested here, as the server is running locally.

crusy
  • 1,424
  • 2
  • 25
  • 54
  • https://acme.com/login and https://acme.com/selection are 404. Is this normal ? Anyway, `img/appicon/acme_homescreen_120x120.png` seems to be relative path, is it possible that you error come from here ? – Thomas Betous Aug 12 '19 at 08:27
  • Acme [is fictional](https://en.wikipedia.org/wiki/Acme_Corporation), but no, the relative path is the same from both URLs. It seems to be kind of a bug, see my answer: While it works for one URL it has to be in the root directory – crusy Aug 12 '19 at 08:29

1 Answers1

0

While I still not understand why it's working on /login, the solution seems to be to put an (additional) apple-touch-icon.png in the root directory. In order to have all icons in one place I moved all the referenced icons to the root, but it seems to be sufficient to have apple-touch-icon.png there.

To use the root directory is mentioned in the documentation, to be fair.

crusy
  • 1,424
  • 2
  • 25
  • 54