为什么这个苹果触摸图标不起作用？

Question

我的网站中有以下代码：

<link rel="apple-touch-icon" href="http://website.com/images/apple-touch-icon.png" />

当我在 Firefox 中查看源代码并单击 href 属性时，图标会显示（因此它不是 404 错误）。

当代码添加到页面时，例如 http://website.com/mobile/index.php 或者 http://website.com/mobile/page.php 并且该页面被添加到 iPhone 主屏幕上，图标工作正常，但是当页面 url 类似于 http://website.com/page 或者 http://website.com/index 图标不显示。

Safari 选项中提供的“网站调试控制台”中没有出现错误，并且我已尝试清除缓存和 cookie。

我也使用标签 <base href="http://website.com/mobile/" /> 网站，该网站同时显示在 http://website.com/mobile/index.php 和 http://website.com/index. 。但我不知道这会如何影响它，因为 apple-touch-icon 使用完整的网址。

Answer 1

尝试使用相对 URL：

<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />

它应该转到您的基本目录并在其中找到图标 /images.

Answer 2

这仅适用于具有以下属性的 HTTP 或 HTTPS 站点： 有效且可信的安全证书.

如果存在证书错误，iOS 将不会加载图像。暂时信任 Safari 中页面的证书将不会信任主屏幕快捷方式的证书。如果您使用自签名证书，则必须将不受信任的根证书添加为操作系统级别的受信任证书。

1. 在 iOS 设备上，导航到包含 .crt 文件链接的页面
2. 点击链接
3. 通过所有确认屏幕批准/安装