Question

我正在使用以下代码获取移动设备的触摸图标 - 它基于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）。我已经尝试将他们的代码，文件夹结构和图标复制到我自己的网站中，但这不起作用。

有什么想法吗？

Answer 1

我遇到了同样的问题。解决方案是删除网站上的密码保护。

Answer 2

我在其他两个网站上放置了相同的页面和图标，它运行得很好，所以我想也许可能是因为我正在处理的原始两个测试服务器都受密码保护 - 尽管很明显我输入了要浏览的凭据页面，所以不完全确定为什么这将是一个问题。但是，结果似乎表明情况就是这样。

Answer 3

在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

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

Answer 4

我遇到了同样的问题，问题的根源是我的网站有一个带密码保护的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

这应该解决问题。

干杯!!

Answer 5

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

Answer 6

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

Answer 7

在我使用“设置” - >“社交网络”下的iPhone，然后“清除历史记录和网站数据”之前，我无法使用此工作。然后尝试将其添加到我的主页。

Apple触控图标未显示在主屏幕上

7 个答案: