Я пытаюсь выяснить, как получить значок своего сайта, чтобы он отображался в разделе "Сайты Safari для iOS", а не значке/заполнителе серых сафари по умолчанию. Другие сайты могут это сделать, но я не могу понять, как это сделать. Я предположил, что это связано с файлом favicon.ico или apple-touch-icon.png, но я не смог пригвоздить то, что используется, или как заставить его работать на моем сайте.
Например, когда я очищаю кеш и историю Safari, открываю Safari и начинаю вводить "arstechnica", я получаю следующее:
Такая же идея, когда я печатаю "americanexpress":
И "cnn":
Но когда я пытаюсь использовать другие сайты, такие как "wellsfargo", я получаю placeholder (что и происходит для моего сайта):
Мой 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 также приводило к неубедительным результатам.
Кто-нибудь знает, какой файл изображения используется для значка "Рекомендуемые сайты" и как я могу его отобразить для моего веб-сайта?
Я думаю, что вы должны поместить файл с именем → home_badge_64.png в корневую папку веб-сайта.
Это пойдет в вашем заголовке:
<link href="/home_badge_64.png" rel="apple-touch-icon" />
Как настоящий пример жизни, я пытаюсь работать прямо сейчас → http://www.sisltd.ca/home_badge_64.png
Кажется, что иконка взята из метатега OpenGraph og:image. Я просто разместил его на своем веб-сайте, и изменение значения этого тега изменило значок, показанный в предлагаемом элементе сайта.
<meta property="og:image" content="link_to_your_icon.ext" />
У меня были и другие теги OpenGraph, поэтому я не тестировал, работает ли этот метатаг, или вам нужны все остальные.