Why won't this apple-touch-icon work?

5
votes

I have the following code in my website:

<link rel="apple-touch-icon" href="http://website.com/images/apple-touch-icon.png" />

When I view the source in Firefox and click the href attribute the icon shows (so its not a 404 error).

When the code is added to a page like http://website.com/mobile/index.php or http://website.com/mobile/page.php and the page is added to an iPhone homescreen the icon works fine, but when the page url is like http://website.com/page or http://website.com/index the icon doesn't show up.

No errors appear in the "website debug console" provided in Safari options and I've tried clearing the cache and cookies.

Also I use the tag <base href="http://website.com/mobile/" /> website, which shows up on both http://website.com/mobile/index.php and http://website.com/index. But i can't see how that would effect it since the apple-touch-icon uses a full url.

3
iphonehtmlmobilesafariapple-touch-icon
As a last resort you could put the image in the root folder of your site, then you don't need the link element. PS is the link element present in all pages? – Gerben

3 Answers

20
votes

This will only work from an HTTP or HTTPS site with a Valid and trusted security certificate.

If there's a certificate error, iOS will not load the image. Temporarily trusting the certificate in Safari for the page will not trust the certificate for the homescreen shortcut. If you are using a self-signed certificate, you must add the untrusted root certificate as a trusted certificate at the OS level.

  1. On the iOS device, navigate to a page which has a link to the .crt file
  2. Tap the link
  3. Approve/Install through all the confirmation screens
4
votes

Try using a relative URL:

<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />

It should go to your base directory and find the icon in /images.

0
votes

After days of trial and error, I seem to have figured out a solution.

As of this writing, locally trusting a self-signed certificate just doesn't seem to work. Given Apple's updated requirements for trusted certificates, it looks like they are serious on tightening security on all fronts.

So here's what you can try:

  1. To start off with, make sure you have valid icons. You can use realfavicongenerator.net to render a single image into multiple properly formatted and sized images to help ensure browsers like Safari will actually use them.

  2. You need a valid/publicly trusted SSL certificate. I came to this conclusion after I placed the apple-touch-icon.png into my google drive and linked to the icon. It worked!..But...not the greatest solution... I've tried everything out there to make a self-signed SSL certificate work. But the fact of the matter is, browsers rely on verified Certificate Authorities (CA's) to determine a certificate's authenticity. So most likely, the easiest thing to do would be to acquire a trusted certificate. Fortunately, there are free options like Certbot or CloudFlare to do the job.

Take a look at this Ubuntu guide by DigitalOcean on how to secure an Apache web server with HTTPS and use Certbot to generate an SSL certificate for it.