如何在IOS Safari的推荐网站列表中显示图标

Question

我试图找出如何让我的网站图标显示在iOS Safari推荐网站部分而不是默认的灰色Safari图标/占位符。其他网站都可以做到这一点，但我无法弄清楚如何做到这一点。我认为它与favicon.ico或apple-touch-icon.png文件相关，但我无法确定正在使用的内容或如何使其适用于我的网站。

例如，当我清除Safari缓存和历史记录时，打开Safari，然后开始输入＆＃34; arstechnica＆＃34;，我明白了：

当我输入＆＃34; americanexpress＆＃34;：

时，同样的想法

＆＃34; cnn＆＃34;：

但是，当我尝试其他网站时，例如＆＃34; wellsfargo＆＃34;，我会获得占位符（这也是我的网站正在发生的事情）：

我的apple-touch-icon.png不在根文件夹中，所以我移动了它，但这似乎没有任何区别。 （我的favicon.ico已经在根文件夹中。）

在调查其中一些网站后，它似乎不是favicon.ico或apple-touch-icon.png文件的使用方式。 arstechnica有一个apple-touch-icon.png文件（通过cdn重定向），但它与用于建议网站的图像不同。它确实有一个看似匹配的favicon.ico，但americanexpress favicon.ico也与“建议的网站”图标不匹配。检查link标签的每个HTML文件也会产生不确定的结果。

有人知道建议网站图标使用的图像文件以及如何让它显示在我的网站上吗？

Answer 1

我认为你必须放一个名为 - ＆gt;的文件。 home_badge_64.png位于网站的根文件夹中。

这将在你的头标记中出现：

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

作为一个现实生活中的例子，我现在正努力开始工作 - ＆gt; http://www.sisltd.ca/home_badge_64.png

Answer 2

该图标似乎取自OpenGraph og:image元标记。我只是把它放在我的网站上，更改该标签的值改变了建议的网站项目中显示的图标。

<meta property="og:image" content="link_to_your_icon.ext" />

我也拥有所有其他OpenGraph标签，所以我没有测试单独的metatag是否有效，或者你是否需要所有其他标签。