我有一个带有移动版本的网站，我正试图让它能够当有人选择将网站收藏或“添加到主屏幕”时，它会将图标保存到主屏幕。我有一个Android三星Galaxy S3，无论我尝试什么，我都无法使用图标而不是标准功能区，中间有小预览。
目前..以下代码将显示标准功能区，其中包含favicon图像的微小预览，但不会显示整个图标：
<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"/>
我也尝试过这个代码，当我将书签添加到主屏幕时，它只生成标准功能区图标。甚至不像上面的小预览：
<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"/>
注意：我也试过1）将图标文件放在根目录中。 2）将文件名命名为apple-touch-icon-precomposed.ico。 3）图标为57x57且低于40 kb。
我知道有一些方法可以实现这一目标，因为我测试了几个网站，如AOL和eBay，并且都保存到我的主屏幕，其中包含一个看似app的正常大小的图标。
如果有人遇到同样的问题并找到了有效的解决方案，请告诉我。我很难过！
答案 0 :(得分：0)
整个问题是因为该网站在设计和开发过程中为了测试目的而密码保护.htaccess。我所要做的就是移动包含密码保护目录之外的所有图标的文件夹！
以下代码是我使用的，现在正在使用：
<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" />