Подтвердить что ты не робот

Как получить значок, отображаемый в IOS Safari Рекомендуемый список сайтов

Я пытаюсь выяснить, как получить значок своего сайта, чтобы он отображался в разделе "Сайты Safari для iOS", а не значке/заполнителе серых сафари по умолчанию. Другие сайты могут это сделать, но я не могу понять, как это сделать. Я предположил, что это связано с файлом favicon.ico или apple-touch-icon.png, но я не смог пригвоздить то, что используется, или как заставить его работать на моем сайте.

Например, когда я очищаю кеш и историю Safari, открываю Safari и начинаю вводить "arstechnica", я получаю следующее:

arstechnica screengrab

Такая же идея, когда я печатаю "americanexpress":

american express screen grab

И "cnn":

cnn screen grab

Но когда я пытаюсь использовать другие сайты, такие как "wellsfargo", я получаю placeholder (что и происходит для моего сайта):

wells fargo screen grab

Мой 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 также приводило к неубедительным результатам.

Кто-нибудь знает, какой файл изображения используется для значка "Рекомендуемые сайты" и как я могу его отобразить для моего веб-сайта?

4b9b3361

Ответ 1

Я думаю, что вы должны поместить файл с именем → home_badge_64.png в корневую папку веб-сайта.

Это пойдет в вашем заголовке:

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

Как настоящий пример жизни, я пытаюсь работать прямо сейчас → http://www.sisltd.ca/home_badge_64.png

Ответ 2

Кажется, что иконка взята из метатега OpenGraph og:image. Я просто разместил его на своем веб-сайте, и изменение значения этого тега изменило значок, показанный в предлагаемом элементе сайта.

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

У меня были и другие теги OpenGraph, поэтому я не тестировал, работает ли этот метатаг, или вам нужны все остальные.