Apple Web Clips (Apple Touch Icons) not working on HTTPS site
I'm having a hard time getting the Apple Touch icon to display the Add Bookmark feature in Safari when I have HTTPS enabled for the site. I can get it to work with the Add to Home option, so I'm not sure if another call is being made for Add Bookmark.
I followed the Apple Documentation which doesn't contain very much information. I also found some useful links:
http://www.jonathantneal.com/blog/understand-the-favicon/
https://github.com/audreyr/favicon-cheat-sheet
https://mathiasbynens.be/notes/touch-icons
I've tried several different combinations of link links, for example:
- Providing items
<link>
and instead leaving the image namedapple-touch-icon.png
in the root directory. - Providing an element with a relative url like:
<link rel="apple-touch-icon" href="example.com/apple-touch-icon.png">
- Providing an element with an absolute url like:,
<link rel="apple-touch-icon" href="http://example.com/apple-touch-icon.png">
both withhttp
andhttps
- This was done behind an nginx proxy to provide ssl, I tried it when nginx was fetching images as static resources from a separate location, or just letting the webapp handle the image request.
I'm not sure what the problem is: these options work for "Add to Home" but don't work for "Add Bookmark", any ideas?
Note. Even though the site I really want to work on has HTTPS behind authentication, even when I run it on a test site without authentication, it still has a problem.
Update 1
I have nginx access logs and I see something weird. I load the site and then click the little box with an arrow pointing up and out. As soon as I do this, 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"
Ok, so he found one of the many apple-touch icons I've customized and it shows up when I click Add to Home Screen, great. Then when I click the Add Bookmark button I see the following 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 due to authentication. This call is made to determine the base color of the page so that the default compass icon can have a background color that matches the page. Strange thing: why is this even triggered, shouldn't I try to summon the apple touch icon first?
Also, the user agents are different, although both requests come from the same iPad - very strange.
source to share
No one has answered this question yet
See similar questions:
or similar: