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

Favicons - Best Practices

I've tried several different combinations of link links, for example:

  • Providing items <link>

    and instead leaving the image named apple-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 with http

    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.

+3


source to share





All Articles