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

Я использую следующий код для получения сенсорных значков для мобильных устройств - он основан на примере 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). Я пробовал скопировать их код, структуру папок и значки на свой сайт, но это не сработало.

Любые идеи?


iphone html apple-touch-icon ios5
person gpr    schedule 25.10.2011    source источник
comment
Если вы уже продублировали html5boilerplate/mobile код и изображения в качестве тестового примера, и он работает, то почему вы еще не сузили его, заменив построчно и изображение за изображением? Кажется достаточно прямолинейным.   -  person Sparky    schedule 25.10.2011
comment
Извините, может я не понял. Я зашел на шаблонный сайт на своем телефоне и успешно добавил их значок на свой домашний экран. Я пробовал скопировать их код, структуру папок и значки на свой сайт, но это не сработало. - Я отредактирую свой вопрос, чтобы прояснить это.   -  person gpr    schedule 25.10.2011
comment
У меня нет защиты паролем, и они находятся в корневой папке, но они все еще не отображаются для значка на главном экране   -  person Jason G    schedule 04.03.2015
comment
Отметьте этот ответ: stackoverflow.com/questions/33777966/   -  person Mario Nezmah    schedule 23.03.2021

Ответы (7)


arrow_upward
76
arrow_downward

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

person Ccx    schedule 31.12.2011
comment
Стоит отметить, что вам не нужно снимать защиту паролем (или аутентификацию в целом, например, Windows Auth) для всего сайта. Достаточно сделать подкаталог анонимным, например каталог изображений. Поместите туда свои значки, а затем используйте элемент link, чтобы указать на них. - person CBono; 19.04.2012
comment
У меня тоже была эта пробема. Просто переместил его в незащищенную часть сайта. Спасибо за совет! - person grey; 04.06.2012
comment
Приятно знать, поскольку я столкнулся с той же проблемой. - person hcker2000; 30.08.2012
comment
Может кто-нибудь уточнить это, пожалуйста? Под защитой паролем вы подразумеваете через .htaccess? У меня проблема, но мой сайт не защищен паролем? - person loxyboi; 12.09.2013
comment
Наши тестовые среды находятся за обратным прокси. Прочитав это, я создал временный общедоступный сайт (без авторизации через обратный прокси), и мои значки работали в этой среде. :) Спасибо! - person KFox112; 10.07.2017

arrow_upward
14
arrow_downward

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

person gpr    schedule 26.10.2011

arrow_upward
7
arrow_downward

У меня была такая же проблема, и источником проблемы было то, что у меня был файл 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

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

Ваше здоровье!!

person innovaciones    schedule 31.08.2014

arrow_upward
6
arrow_downward

В руководстве по веб-контенту 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

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

person Chad Pavliska    schedule 08.07.2012
comment
Нет, в этом случае я не использовал localhost; Я опубликовал сайт на общедоступном тестовом сервере, чтобы я мог протестировать сайт на мобильных устройствах, которые не смогут получить доступ к моему локальному хосту. В соответствии с моим предыдущим ответом (и Ccx), создание общедоступной папки, содержащей значки, устранило проблему. - person gpr; 14.07.2012

arrow_upward
1
arrow_downward

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

person patad    schedule 07.03.2014

arrow_upward
1
arrow_downward

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

person Artem Mishukov    schedule 05.06.2019
comment
Или использование полного пути вместо относительного пути сработало для меня - person kevnk; 02.04.2021

arrow_upward
-1
arrow_downward

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

person jrel    schedule 31.01.2016
comment
Так что это не устранило проблему, но закрыло все мои открытые вкладки, так что ВНИМАНИЕ! - person Gujamin; 08.02.2018