问题
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:
- Providing no
<link>elements and instead only leaving an image with the nameapple-touch-icon.pngin the root directory. - Providing an element with a relative URL, such as:
<link rel="apple-touch-icon" href="example.com/apple-touch-icon.png"> - Providing an element with an absolute URL, such as:
<link rel="apple-touch-icon" href="http://example.com/apple-touch-icon.png">, both withhttpandhttps - 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.
来源：https://stackoverflow.com/questions/27412270/apple-web-clips-apple-touch-icons-not-working-for-site-with-https