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

Question

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.

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, Jul 24 '11 at 14:48

score 23 · Answer 1 · edited Jul 11 '16 at 20:42

23

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.

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

edited Jul 11 '16 at 20:42

Charlie

8,530
2
55
53

answered Apr 04 '15 at 21:32

rickatech

551
4
10

I did it for my local website which is in HTTPS using MAMP Pro, but still not working, do you have any other idea ? – KeizerBridge Jun 21 '17 at 14:52
after running my app without self signed https now it works – Rman__ Aug 05 '23 at 08:07

score 4 · Accepted Answer · answered Jul 24 '11 at 14:39

4

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.

answered Jul 24 '11 at 14:39

element119

7,475
8
51
74

5

well, thats an absolute url – Andrea Jun 05 '14 at 16:15
6

@andrea-zironda Not sure if the answer has been edited or what but the path in the answer is _definitely_ a relative path. **Relative:** /path/to/image.png **Absolute:** //www.website.com/path/to/image.png – chapeljuice Oct 14 '16 at 15:34

score 0 · Answer 3 · edited Feb 28 '21 at 01:02

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:

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.
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.

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

3 Answers3

Linked