问题
I have a website with a mobile version and I am trying to get it so that when someone chooses to Bookmark the website or 'Add to home screen' it will save an Icon to the home screen. I have an Android Samsung Galaxy S3 and no matter what I try I cannot get it to use the icon instead of the standard ribbon with tiny preview in the middle.
Currently..The below code will get it to display the standard ribbon with tiny preview of favicon image but will not display the entire icon:
<link rel="icon" href="http://www.mydomain.com/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="http://www.mydomain.com/favicon.ico" type="image/x-icon"/>
I have also tried this code as well which only yields the standard ribbon icon when I add the bookmark to my homescreen. Not even a tiny preview like above:
<link rel="apple-touch-icon" href="http://www.mydomain.com/customicon.ico"/>
<link rel="apple-touch-icon-precomposed" href="http://www.mydomain.com/customicon.ico"/>
Note: I have also tried 1) Placing the icon files in the root. 2) Naming the filename to apple-touch-icon-precomposed.ico. 3) Icon is 57x57 and under 40 kb.
I know there is some way to accomplish this because I tested a couple of websites like AOL, and eBay and both save to my home screen with a normal sized icon that appears like an app.
If anyone has run into the same problem and found a solution that works please let me know. I am stumped!
回答1:
The entire issue was because the website was .htaccess password protected for testing purposes during design and development. All I had to do was move the folder that contained all icons outside of the password protected directory!
The following code is what I used and is now working:
<link rel="apple-touch-icon" sizes="144x144" href="http://m.mydomain.com/touch-icon-ipad-retina.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://m.mydomain.com/touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://m.mydomain.com/touch-icon-ipad.png" />
<link rel="apple-touch-icon" href="http://m.mydomain.com/touch-icon-iphone.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
来源：https://stackoverflow.com/questions/16588250/website-bookmark-shortcut-icon-for-android-help-cant-get-passed-standard-ribbo