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

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 使用完整的 url。

Answer 1

经过几天的反复试验，我似乎找到了解决办法。

在撰写本文时，本地信任自签名证书似乎不起作用。鉴于 Apple 更新了 requirements for trusted certificates，看起来他们正在认真加强各方面的安全性。

所以你可以试试：

1. 首先，请确保您拥有有效的图标。您可以使用realfavicongenerator.net 将单个图像渲染为多个格式正确且大小正确的图像，以帮助确保 Safari 等浏览器实际使用它们。

2. 您需要有效/公开信任的 SSL 证书。在我将 apple-touch-icon.png 放入我的谷歌驱动器并链接到图标后，我得出了这个结论。它起作用了！...但是...不是最好的解决方案... 我已经尝试了所有方法来制作自签名 SSL 证书。但事实是，浏览器依靠经过验证的证书颁发机构 (CA) 来确定证书的真实性。所以很可能，最简单的事情就是获得一个受信任的证书。幸运的是，有像 Certbot 或 CloudFlare 这样的免费选项来完成这项工作。

查看 DigitalOcean 的 this Ubuntu guide，了解如何使用 HTTPS 并使用 Certbot 为其生成 SSL 证书。

Answer 2

这仅适用于具有有效且受信任的安全证书的 HTTP 或 HTTPS 站点。

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

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

Answer 3

尝试使用相对 URL：

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

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