Значок Apple Touch не отображается на главном экране

Question

Я использую следующий код для получения сенсорных иконок для мобильных устройств - он основан на примере html5boilerplate / mobile:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/touch/h/apple-touch-icon.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="/img/touch/l/apple-touch-icon.png">
<!-- For nokia devices: -->
<link rel="shortcut icon" href="/img/touch/apple-touch-icon.png">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Но по какой-то причине iPhone все еще доставляет мне проблемы с иконкой домашнего экрана. Все, что я получаю, это тот скучный значок скриншота.

Я включил здесь другие метатеги на случай, если они пролят свет на то, почему это не работает. Я пытался изменить порядок тегов.

Кто-нибудь может придумать что-нибудь, что может помешать использованию значков?

Я использовал html5boilerplate / mobile в качестве тестового примера - я могу перейти на их сайт и добавить значок на домашний экран на моем iPhone (4S iOS5). Я пытался скопировать их код, структуру папок и значки на свой сайт, но это не сработало.

Есть идеи?

Answer 1

У меня была такая же проблема. Решение - снять защиту паролем на сайте.

Answer 2

Я разместил одну и ту же страницу и значок на двух других сайтах, и они отлично работали, поэтому я думаю, что это может быть связано с тем, что исходные два тестовых сервера, на которых я работал, были защищены паролем - хотя, очевидно, я ввел учетные данные для просмотрастраницы, поэтому не совсем уверен, почему это будет проблемой.Тем не менее, результаты показывают, что это так.

Answer 3

У меня была та же проблема, и источник проблемы в том, что у меня был файл htaccess с защитой паролем для моего сайта, поэтому значок веб-клипа не будет работать, чтобы решить эту проблему и при этом иметь защиту паролем, вам нужнодобавьте этот код:

SetEnvIf Request_URI "(/apple-touch-icon\.png)$" allow
Order allow,deny
Allow from env=allow
Satisfy any

Таким образом, вы получите полный доступ к http://www.example.com/apple-touch-icon.png без необходимости ввода пароля.

Если у вас все еще есть проблемы, вот пример с полнымhtaccess файл:

AuthUserFile /home/mysite/.htpasswds/.htpasswd
AuthType Basic
AuthName "Password Protected"
Require valid-user
SetEnvIf Request_URI "(/apple-touch-icon\.png)$" allow
Order allow,deny
Allow from env=allow
Satisfy any

Это должно решить проблему.

Ура !!

Answer 4

В Apple Руководство по веб-контенту Safari они предлагают поместить значки в «корневую папку документов».

Чтобы указать значок для всего сайта (каждой страницы на сайте), Поместите файл значка в формате PNG в корневую папку документа с именем apple-touch-icon.png или apple-touch-icon-precomposed.png.

Я попробовал это, и это не сработало бы, пока я наконец не переместил значки в папку 'img' и не связал их там.

Однако я подозреваю, что значок html5boilerplate работал, а ваш - нет, потому что вы используете виртуальный каталог, такой как:

http://localhost/myvirtualdirectory/apple-touch-icon.png

в то время как поведение iOS по умолчанию заключается в просмотре корневого домена, даже если вы размещаете хостинг вне виртуального каталога:

http://localhost/apple-touch-icon.png

Надеюсь, другие смогут это проверить.

Answer 5

У меня была такая же проблема, когда мои иконки были в папке ui / img, хотя мой сайт не был защищен паролем.После перемещения их в мою корневую папку (и очистки кеша) он начал работать.

Answer 6

Размещение иконки на внешнем хостинге изображений и добавление URL в качестве значения «href» работало для меня как прелесть.

Answer 7

Я не смог заставить это работать, пока я не зашел на свой iPhone в «Настройки-> Safari», затем «Очистить историю и данные веб-сайта», а затем попытался добавить его на мою домашнюю страницу.