Apple 触摸图标未显示在主屏幕上
我使用以下代码来获取移动设备的触摸图标 - 它基于 html5boilerplate/mobile 示例：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/touch/h/apple-touch-icon.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="/img/touch/l/apple-touch-icon.png">
<!-- For nokia devices: -->
<link rel="shortcut icon" href="/img/touch/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
但由于某种原因，iPhone 仍然给我带来主屏幕图标问题。我得到的只是那个烦人的屏幕截图图标。
我在这里包含了其他元标记，以防它们阐明它不起作用的原因。我尝试过重新排序标签。
谁能想到任何可能阻止图标被使用的方法吗？
我使用 html5boilerplate/mobile 作为测试用例 - 我能够浏览到他们的网站并将图标添加到我的 iPhone (4S iOS5) 上的主屏幕。我尝试将他们的代码、文件夹结构和图标复制到我自己的网站中，但这不起作用。
有什么想法吗？
I'm using the following code to get touch icons for mobile devices - it's based on the html5boilerplate/mobile example:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/touch/h/apple-touch-icon.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="/img/touch/l/apple-touch-icon.png">
<!-- For nokia devices: -->
<link rel="shortcut icon" href="/img/touch/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
But for some reason, the iPhone is still giving me problems for the home screen icon. All I get is that annoying screenshot icon.
I've included the other meta tags here in case they shed some light on why it isn't working. I've tried reordering the tags.
Can anyone think of anything that might stop the icons being used?
I've used html5boilerplate/mobile as a test case - I'm able to browse to their site and add the icon to the home screen on my iPhone (4S iOS5). I've tried copying their code, folder structure, and icons into my own site, but this didn't work.
Any ideas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
我也有同样的问题。解决方案是取消网站上的密码保护。
I had the same problem. The solution is to remove the password protection on the website.
我在另外两个网站上放置了相同的页面和图标，并且它工作得很好，所以我想这可能是因为我正在使用的原始两个测试服务器受到密码保护 - 尽管显然我已经输入了浏览页面的凭据，所以不完全确定为什么这会成为一个问题。然而，结果似乎表明情况确实如此。
I put the same page and icon on two other sites and it worked perfectly, so I think maybe it might be because the original two test servers I was working on were password protected - although obviously I'd entered the credentials to browse the page, so not entirely sure why that would be a problem. However, the results appear to suggest this was the case.
我遇到了同样的问题，问题的根源是我的网站有一个带有密码保护的 htaccess 文件，因此 webclip 图标将不起作用，要解决此问题并且仍然具有密码保护，您需要添加此代码：
这样您就可以完全访问 http://www.example.com/apple-touch-icon.png< /a> 无需任何密码。
如果您仍然遇到问题，这里有一个包含完整 htaccess 文件的示例：
这应该可以解决问题。
干杯！！
I had the very same problem, and the source of the problem is that I had an htaccess file with password protection for my site, so the webclip icon will not work, to solve this problem and still have password protection you need to add this code:
That way you have full access to http://www.example.com/apple-touch-icon.png without needing any password.
If you are still having problems here is an example with the full htaccess file:
That should fix the problem.
Cheers!!
在 Apple Safari Web 内容指南 他们建议将图标放在“根文档文件夹”中。
我尝试了这个，但直到我最终将图标移动到“img”文件夹并链接到那里时它才起作用。
但是，我怀疑 html5boilerplate 图标起作用而你的图标不起作用的原因是因为你正在使用虚拟目录，例如：
而 iOS 的默认行为是查看根域，即使你在虚拟目录之外托管：
希望其他人能够验证这一点。
In the Apple Safari Web Content Guide they suggest putting the icons in the "root document folder".
I tried this and it wouldn't work until I finally moved the icons to an 'img' folder and linked to them there.
However, I suspect the reason the html5boilerplate icon worked and yours didn't was because you are using a virtual directory such as:
while the default behavior of iOS is to look at the root domain even when you are hosting out of the virtual directory:
Hopefully others could verify this.
当我的图标位于 ui/img 文件夹中时，即使我的网站没有密码保护，我也遇到了同样的问题。将它们移动到我的根文件夹（并清除缓存）后，它开始工作。
I had the same problem when my icons were in my ui/img folder, even though my site wasn't password protected. After moving them to my root folder (and clearing the cache) it started working.
在外部图像托管上放置一个图标并添加 url 作为“href”的值对我来说很有魅力。
Placing an icon on the external image hosting and adding url as value of "href" worked for me as charm.
直到我在 iPhone 上进入“设置”->“Safari”，然后选择“清除历史记录和网站数据”，然后尝试将其添加到我的主页时，我才能使其正常工作。
I couldn't get this to work until I went on my iPhone under Settings->Safari and then 'Clear History and Website Data' and then try and add it to my homepage.