Html Apple 触摸图标未显示在主屏幕上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7885393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apple touch icon isn't showing up on the home screen
提问by gpr
I'm using the following code to get touch icons for mobile devices - it's based on the html5boilerplate/mobile example:
我正在使用以下代码来获取移动设备的触摸图标 - 它基于 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">
But for some reason, the iPhone is still giving me problems for the home screen icon. All I get is that annoying screenshot icon.
但出于某种原因，iPhone 仍然给我的主屏幕图标带来了问题。我得到的只是那个烦人的屏幕截图图标。
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.
我使用 html5boilerplate/mobile 作为测试用例 - 我能够浏览到他们的网站并将图标添加到我的 iPhone (4S iOS5) 的主屏幕上。我试过将他们的代码、文件夹结构和图标复制到我自己的站点中，但这不起作用。
Any ideas?
有任何想法吗？
采纳答案by gpr
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.
我在另外两个站点上放置了相同的页面和图标，并且运行良好，所以我想这可能是因为我正在使用的原始两个测试服务器受密码保护 - 尽管显然我输入了凭据来浏览页面，所以不完全确定为什么会出现问题。然而，结果似乎表明情况确实如此。
回答by Ccx
I had the same problem. The solution is to remove the password protection on the website.
我有同样的问题。解决方案是取消网站上的密码保护。
回答by Chad Pavliska
In the Apple Safari Web Content Guidethey suggest putting the icons in the "root document folder".
在 Apple Safari Web 内容指南中，他们建议将图标放在“根文档文件夹”中。
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png.
要为整个网站（网站上的每个页面）指定一个图标，请将一个 PNG 格式的图标文件放在名为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png 的根文档文件夹中。
I tried this and it wouldn't work until I finally moved the icons to an 'img' folder and linked to them there.
我试过了，直到我最终将图标移动到“img”文件夹并在那里链接到它们为止，它才起作用。
However, I suspect the reason the html5boilerplate icon worked and yours didn't was because you are using a virtual directory such as:
但是，我怀疑 html5boilerplate 图标有效而您的无效的原因是因为您使用的是虚拟目录，例如：
http://localhost/myvirtualdirectory/apple-touch-icon.png
while the default behavior of iOS is to look at the root domain even when you are hosting out of the virtual directory:
虽然 iOS 的默认行为是查看根域，即使您在虚拟目录之外托管：
http://localhost/apple-touch-icon.png
Hopefully others could verify this.
希望其他人可以验证这一点。
回答by innovaciones
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:
我遇到了同样的问题，问题的根源是我的网站有一个带有密码保护的 htaccess 文件，所以 webclip 图标不起作用，要解决这个问题并且仍然有密码保护，您需要添加此代码：
SetEnvIf Request_URI "(/apple-touch-icon\.png)$" allow
Order allow,deny
Allow from env=allow
Satisfy any
That way you have full access to http://www.example.com/apple-touch-icon.pngwithout needing any password.
这样您就可以完全访问http://www.example.com/apple-touch-icon.png而无需任何密码。
If you are still having problems here is an example with the full htaccess file:
如果您仍然遇到问题，这里有一个完整的 htaccess 文件示例：
AuthUserFile /home/mysite/.htpasswds/.htpasswd
AuthType Basic
AuthName "Password Protected"
Require valid-user
SetEnvIf Request_URI "(/apple-touch-icon\.png)$" allow
Order allow,deny
Allow from env=allow
Satisfy any
That should fix the problem.
那应该可以解决问题。
Cheers!!
干杯！！
回答by Artem Mishukov
Placing an icon on the external image hosting and adding url as value of "href" worked for me as charm.
在外部图像托管上放置一个图标并添加 url 作为“href”的值对我来说很有魅力。
回答by patad
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.
当我的图标在我的 ui/img 文件夹中时，我遇到了同样的问题，即使我的网站没有密码保护。将它们移动到我的根文件夹（并清除缓存）后，它开始工作。
回答by jrel
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.
直到我在设置-> Safari 下打开我的 iPhone，然后“清除历史记录和网站数据”，然后尝试将它添加到我的主页，我才能让它工作。
