Apple Web Clips (Apple Touch Icons) not working for site with HTTPS

Question

I'm having difficulty getting the Apple Touch Icon to show up for the "Add Bookmark" feature in Safari when I have HTTPS enabled for the site. I can get it working with the "Add to Home" option, so I'm not sure if a different call is being made for "Add Bookmark".

I've followed the Apple Documentation, which does not contain very much info. I also found the following links to be somewhat helpful:

http://www.jonathantneal.com/blog/understand-the-favicon/

https://github.com/audreyr/favicon-cheat-sheet

https://mathiasbynens.be/notes/touch-icons

Favicons - Best practices

I have tried multiple different combinations of link references, such as:

1. Providing no <link> elements and instead only leaving an image with the name apple-touch-icon.png in the root directory.
2. Providing an element with a relative URL, such as: <link rel="apple-touch-icon" href="example.com/apple-touch-icon.png">
3. Providing an element with an absolute URL, such as: <link rel="apple-touch-icon" href="http://example.com/apple-touch-icon.png">, both with http and https
4. This has been run behind an nginx proxy to provide ssl, I have tried it with having nginx retrieve the images as static resources from a separate location, or just letting the webapp handle the image request.

I'm not sure what the issue is - these options work for "Add to Home" but do not work for "Add Bookmark", any ideas?

Note: Although the site I really want this to work on has HTTPS behind authentication, even when I run this on a test site without authentication, it still has an issue.

Update 1

I have nginx access logs turned on, and I see something strange. I load the site, and then click the little box with an arrow pointing up and out of it. As soon as I do that I see the following access log:

"GET /apple-touch-icon-152x152-precomposed.png HTTP/1.1" 200 17758 0.000 "-" "MobileSafari/600.1.4 CFNetwork/711.1.12 Darwin/14.0.0"

Okay, so it found one of the many apple-touch-icons I setup, and it appears when clicking "Add to Home Screen", great. Then when I click the "Add Bookmark" button I see the next access log:

"GET /news/ HTTP/1.1" 302 0 0.001 "-" "Mozilla/5.0 (iPad; CPU OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B410"

This is a 302 redirect because of authentication. This call is being made to determine the primary color of the page, so that the default compass icon can have a background color that matches the page. The strange thing is: why does this even get called, shouldn't it try to call for an apple-touch-icon first?

Also, the user agents are different, even though both requests come from the same iPad - very strange.

Answer 1

My issue was that in my local dev environment I was using a self signed cert that was invalid. Safari wouldn't download the apple touch icon from a site with an invalid cert.