Почему этот значок не работает?

У меня есть следующий код на моем сайте:

<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 использует полный URL-адрес.

Источник

3 ответа

Решение

Попробуйте использовать относительный URL:

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

Он должен перейти в вашу базовую директорию и найти значок в /images,

Источник

Это будет работать только с сайта HTTP или HTTPS с действительным и доверенным сертификатом безопасности.

В случае ошибки сертификата iOS не загрузит изображение. Временное доверие к сертификату в Safari для страницы не будет доверять сертификату для ярлыка домашнего экрана. Если вы используете самозаверяющий сертификат, вы должны добавить недоверенный корневой сертификат в качестве доверенного сертификата на уровне операционной системы.

  1. На устройстве iOS перейдите на страницу, на которой есть ссылка на файл.crt.
  2. Нажмите на ссылку
  3. Одобрить / установить через все экраны подтверждения
Источник

После нескольких дней проб и ошибок я, кажется, нашел решение.

На момент написания этой статьи локальное доверие к самозаверяющему сертификату просто не работает. Учитывая обновленные требования Apple к доверенным сертификатам , похоже, что они серьезно относятся к ужесточению безопасности на всех фронтах.

Итак, вот что вы можете попробовать:

  1. Для начала убедитесь, что у вас есть допустимые значки. Вы можете использовать realfavicongenerator.net для преобразования одного изображения в несколько изображений с правильным форматом и размером, чтобы убедиться, что такие браузеры, как Safari, действительно будут их использовать.

  2. Вам нужен действующий/общедоступный доверенный SSL-сертификат. Я пришел к такому выводу после того, как поместил файл apple-touch-icon.png на свой диск Google и связал его со значком. Это сработало!.. Но... не лучшее решение... Я перепробовал все, чтобы заставить работать самозаверяющий SSL-сертификат. Но дело в том, что браузеры полагаются на проверенные центры сертификации (ЦС) для определения подлинности сертификата. Так что, скорее всего, проще всего будет приобрести доверенный сертификат. К счастью, для этой работы есть бесплатные варианты, такие как Certbot или CloudFlare .

Взгляните на это руководство по Ubuntu от DigitalOcean о том, как защитить веб-сервер Apache с помощью HTTPS и использовать Certbot для создания для него SSL-сертификата.

Источник
Другие вопросы по тегам