L'icône tactile Apple n'apparaît pas sur l'écran d'accueil
J'utilise le code suivant pour obtenir des icônes tactiles pour les appareils mobiles. Il est basé sur l'exemple 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">
Mais pour une raison quelconque, l'iPhone me pose toujours des problèmes pour l'icône de l'écran d'accueil. Tout ce que je reçois est cette icône de capture d'écran ennuyeuse.
J'ai inclus les autres méta-balises ici au cas où elles permettraient de comprendre pourquoi cela ne fonctionne pas. J'ai essayé de réorganiser les tags.
Quelqu'un peut-il penser à quelque chose qui pourrait empêcher les icônes d'être utilisées?
J'ai utilisé html5boilerplate/mobile comme test - je peux naviguer sur leur site et ajouter l'icône à l'écran d'accueil de mon iPhone (4S iOS5). J'ai essayé de copier leur code, leur structure de dossiers et leurs icônes sur mon propre site, mais cela n'a pas fonctionné.
Des idées?
J'ai mis la même page et la même icône sur deux autres sites et cela a parfaitement fonctionné. Je pense donc que c'est peut-être parce que les deux serveurs de test d'origine sur lesquels je travaillais étaient protégés par mot de passe. donc pas tout à fait sûr pourquoi ce serait un problème. Cependant, les résultats semblent suggérer que c'était le cas.
J'ai eu le même problème. La solution consiste à supprimer la protection par mot de passe sur le site Web.
Dans le Guide du contenu Web Apple Safari , ils suggèrent de placer les icônes dans le "dossier de document racine".
Pour spécifier une icône pour l’ensemble du site Web (chaque page du site Web), Placez un fichier d'icône au format PNG dans le dossier du document racine appelé Apple-touch-icon.png ou Apple-touch-icon-precomposed.png.
J'ai essayé cela et cela ne marchait pas tant que je n'avais pas déplacé les icônes dans un dossier 'img' et que je les avais liés.
Cependant, je suppose que la raison pour laquelle l'icône html5boilerplate a fonctionné et que le vôtre ne fonctionne pas, c'est parce que vous utilisez un répertoire virtuel tel que:
http://localhost/myvirtualdirectory/Apple-touch-icon.png
le comportement par défaut d’IOS consiste à examiner le domaine racine même lorsque vous hébergez en dehors du répertoire virtuel:
http://localhost/Apple-touch-icon.png
J'espère que d'autres pourraient le vérifier.
J'ai eu le même problème, et la source du problème est que j'avais un fichier htaccess avec une protection par mot de passe pour mon site, donc l'icône de clip Web ne fonctionnera pas, pour résoudre ce problème et toujours protégé par mot de passe :
SetEnvIf Request_URI "(/Apple-touch-icon\.png)$" allow
Order allow,deny
Allow from env=allow
Satisfy any
De cette façon, vous avez un accès complet à http://www.example.com/Apple-touch-icon.png sans avoir besoin de mot de passe.
Si vous rencontrez toujours des problèmes, voici un exemple avec le fichier htaccess complet:
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
Cela devrait résoudre le problème.
À votre santé!!
J'ai eu le même problème lorsque mes icônes étaient dans mon dossier ui/img, même si mon site n'était pas protégé par un mot de passe. Après les avoir déplacés vers mon dossier racine (et effacer le cache), cela a commencé à fonctionner.