Apple 触摸图标未显示在主屏幕上答案

【问题标题】：Apple touch icon isn't showing up on the home screenApple 触摸图标未显示在主屏幕上
【发布时间】：2011-12-14 16:25:12
【问题描述】：

我正在使用以下代码来获取移动设备的触摸图标 - 它基于 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) 的主屏幕上。我尝试将他们的代码、文件夹结构和图标复制到我自己的站点中，但这没有用。

有什么想法吗？

【问题讨论】：

如果您已经将html5boilerplate/mobile 代码和图像复制为测试用例并且它有效，那么您为什么还没有通过逐行和逐图像替换它来缩小范围-图片？看起来很简单。
对不起，我可能不太清楚。我已经浏览到手机上的样板站点，并成功地将他们的图标添加到我的主屏幕上。我尝试将他们的代码、文件夹结构和图标复制到我自己的站点中，但它不起作用。 - 我将编辑我的问题以明确这一点。
我没有密码保护，它们在根文件夹中，但它们仍然没有显示在主屏幕图标中
查看这个答案：stackoverflow.com/questions/33777966/…

标签： html iphone ios5 apple-touch-icon

【解决方案1】：

在外部图像托管上放置一个图标并将 url 添加为“href”的值对我来说很有魅力。

【讨论】：

或者使用完整路径而不是相对路径对我有用

【解决方案2】：

直到我在我的 iPhone 上的 Settings->Safari 下，然后“清除历史记录和网站数据”，然后尝试将其添加到我的主页，我才能让它工作。

【讨论】：

所以这并没有解决问题，但它确实关闭了我所有打开的标签，所以请注意！

【解决方案3】：

我遇到了同样的问题，问题的根源是我的网站有一个带密码保护的 htaccess 文件，所以 webclip 图标不起作用，要解决这个问题，你仍然需要密码保护添加此代码：

SetEnvIf Request_URI "(/apple-touch-icon\.png)$" allow
Order allow,deny
Allow from env=allow
Satisfy any

这样您无需任何密码即可完全访问http://www.example.com/apple-touch-icon.png。

如果您仍然遇到问题，这里有一个完整的 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

这应该可以解决问题。

干杯！！

【讨论】：

【解决方案4】：

当我的图标在我的 ui/img 文件夹中时，我遇到了同样的问题，即使我的网站没有密码保护。将它们移动到我的根文件夹（并清除缓存）后，它开始工作。

【讨论】：

【解决方案5】：

在 Apple Safari Web Content Guide 中，他们建议将图标放在“根文件夹”中。

为整个网站（网站上的每个页面）指定一个图标，在名为的根文档文件夹中放置一个 PNG 格式的图标文件 apple-touch-icon.png 或 apple-touch-icon-precomposed.png。

我试过了，直到我最终将图标移动到“img”文件夹并在那里链接到它们，它才会起作用。

但是，我怀疑 html5boilerplate 图标有效而您的图标无效的原因是因为您使用的是虚拟目录，例如：

http://localhost/myvirtualdirectory/apple-touch-icon.png

虽然 iOS 的默认行为是查看根域，即使您在虚拟目录之外进行托管：

http://localhost/apple-touch-icon.png

希望其他人可以验证这一点。

【讨论】：

不，在这种情况下，我没有使用 localhost；我已将该站点发布到可公开访问的测试服务器，因此我可以在无法访问我的本地主机的移动设备上测试该站点。根据我之前的回复（和 Ccx 的回复），将包含图标的文件夹设为 public 可以解决问题。

【解决方案6】：

我遇到了同样的问题。解决办法是去掉网站上的密码保护。

【讨论】：

值得注意的是，您不需要删除整个站点的密码保护（或一般的身份验证，即 Windows Auth）。使子目录匿名，如“图像”目录，就足够了。将您的图标放在那里，然后使用 link 元素指向它们。
我也有这个问题。只是将其移至未受保护的站点的一部分。感谢您的提示！
很高兴知道我遇到了同样的问题。
有人能详细说明一下吗？密码保护是指通过.htaccess 吗？我遇到了这个问题，但我的网站没有密码保护？
我们的测试环境在反向代理之后。读完这篇文章后，我建立了一个临时的公共站点（没有反向代理身份验证），我的图标在那个环境中工作。 :) 谢谢！

【解决方案7】：

我将相同的页面和图标放在另外两个站点上，它运行良好，所以我想这可能是因为我正在使用的原始两个测试服务器受密码保护 - 尽管显然我已经输入了浏览凭据该页面，因此不完全确定为什么会出现问题。然而，结果似乎表明情况确实如此。

【讨论】：