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

Question

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

例如,当我清除我的Safari缓存和历史记录,打开Safari,并开始键入"arstechnica"时,我得到了这个:

当我输入"americanexpress"时,同样的想法:

和"cnn":

但是,当我尝试其他网站,例如"wellsfargo"时,我会获得占位符(这也是我的网站发生的事情):

我apple-touch-icon.png不在根文件夹中,所以我移动了它,但似乎没有任何区别.(我favicon.ico已经在根文件夹中了.)

在调查其中一些网站时,它似乎不是正在使用favicon.ico的apple-touch-icon.png文件或文件.arstechnica有一个apple-touch-icon.png文件(通过cdn重定向),但它与用于建议站点的图像不同.它确实有一个favicon.ico看似匹配的东西,但是americanexpress favicon.ico也与推荐的网站图标不匹配.检查每个HTML文件的link标签也会产生不确定的结果.

有谁知道什么图像文件用于建议的网站图标以及我如何让它出现在我的网站上？

Answer 1

我想你必须把一个名为 - > home_badge_64.png的文件放在网站的根文件夹中.

这将在你的头标记中:

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

作为一个真实的例子我现在正努力工作 - > http://www.sisltd.ca/home_badge_64.png