34

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

有任何想法吗？

4

7 回答 7

77

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

于 2011-12-31T19:07:30.130 回答
14

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

于 2011-10-26T04:31:16.357 回答
7

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

那应该可以解决问题。

干杯！！

于 2014-08-31T00:41:44.810 回答
6

在 Apple Safari Web 内容指南中，他们建议将图标放在“根文档文件夹”中。

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

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

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

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

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

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

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

于 2012-07-08T16:31:04.983 回答
1

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

于 2014-03-07T10:01:14.677 回答
1

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

于 2019-06-05T09:21:37.340 回答
-1

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

于 2016-01-31T22:06:07.710 回答