Icône Apple Touch pour sites Web
Jusqu'à présent, j'ai intégré la ligne de l'icône Apple Touch dans ma tête, comme ceci:
<link rel="Apple-touch-icon" href="/Apple-touch-icon.png">
Cependant, dans les questions-réponses "Quelles sont les dimensions de pixel correctes pour une icône Apple-touch-touch?" il est indiqué dans la réponse acceptée que trois images sont désormais nécessaires conformément aux directives d'Apple.
Alors, comment procéder pour les insérer dans la section head du code?
Voilà, espérons que cela aide.
Si vous voulez qu'Apple fasse le travail esthétique à votre place (ajoutez le brillant), insérez-les dans les balises <head>:
<link rel="Apple-touch-icon" href="Apple-touch-iphone.png" />
<link rel="Apple-touch-icon" sizes="72x72" href="Apple-touch-ipad.png" />
<link rel="Apple-touch-icon" sizes="114x114" href="Apple-touch-iphone4.png" />
<link rel="Apple-touch-icon" sizes="144x144" href="Apple-touch-ipad-retina.png" />
Si vous voulez précomposer l'image, de sorte que Apple l'affiche sans le brillant, procédez comme suit:
<link rel="Apple-touch-icon-precomposed" href="Apple-touch-iphone.png" />
<link rel="Apple-touch-icon-precomposed" sizes="72x72" href="Apple-touch-ipad.png" />
<link rel="Apple-touch-icon-precomposed" sizes="114x114" href="Apple-touch-iphone4.png" />
<link rel="Apple-touch-icon-precomposed" sizes="144x144" href="Apple-touch-ipad-retina.png" />
À condition d'en inclure plusieurs, le périphérique iOS recherchera la taille correcte et utilisera automatiquement cette image. Comme vous pouvez le voir d'après les noms des images dans l'exemple, l'iPad avec affichage Retina nécessite une icône représentant 144 x 144 pixels, l'iPhone 4/4S/5 nécessite une icône représentant 114 x 114 pixels, l'iPad d'origine (et l'iPad 2 la résolution de l'écran n'est pas différente) nécessite une icône de 72x72px, et l'iPhone d'origine n'a pas besoin d'indication de taille, mais pour votre référence, il est de 57x57px.
Specs Apple spécifiez de nouvelles tailles pour iOS7:
- 60x60
- 76x76
- 120x120
- 152x152
- 180x180
De plus, les icônes précomposées sont obsolètes.
En conséquence, pour prendre en charge uniquement les nouveaux périphériques (exécutant iOS7) et les anciens (iOS6 et versions antérieures), le code générique est le suivant:
<link rel="Apple-touch-icon" sizes="57x57" href="/Apple-touch-icon-57x57.png">
<link rel="Apple-touch-icon" sizes="114x114" href="/Apple-touch-icon-114x114.png">
<link rel="Apple-touch-icon" sizes="72x72" href="/Apple-touch-icon-72x72.png">
<link rel="Apple-touch-icon" sizes="144x144" href="/Apple-touch-icon-144x144.png">
<link rel="Apple-touch-icon" sizes="60x60" href="/Apple-touch-icon-60x60.png">
<link rel="Apple-touch-icon" sizes="120x120" href="/Apple-touch-icon-120x120.png">
<link rel="Apple-touch-icon" sizes="76x76" href="/Apple-touch-icon-76x76.png">
<link rel="Apple-touch-icon" sizes="152x152" href="/Apple-touch-icon-152x152.png">
<link rel="Apple-touch-icon" sizes="180x180" href="/Apple-touch-icon-180x180.png">
De plus, vous devez créer une image 180x180 nommée Apple-touch-icon.png .
Notez que iOS recherche l'URL comme /Apple-touch-icon-76x76.png, si elle ne trouve pas d'éléments intéressants dans le code HTML (un peu comme ce que IE fait avec /favicon.ico). Il est donc important de conserver les noms de fichiers où ils sont en haut. Il est également important de noter que Android/Chrome utilise également ces images .
Vous voudrez peut-être savoir que ce générateur de favicon peut créer toutes ces images à la fois. Divulgation complète: je suis l'auteur de ce site.
Certaines de ces réponses étant déjà obsolètes, je vous recommande d'utiliser http://realfavicongenerator.net/ pour générer toutes les images et les balises - je donne quelques euros à chaque fois que je l'utilise dans l'espoir que leur permet de se tenir au courant de ce qui est actuellement valable sur iOS, Android et Windows, afin que je n’aie pas à le faire.
Spécification d'une icône de page Web pour Web Clip
Vous souhaitez peut-être que les utilisateurs puissent ajouter votre application Web ou un lien de page Web à l'écran d'accueil. Ces liens, représentés par une icône, sont appelés Web Clips. Suivez ces étapes simples pour spécifier une icône représentant votre application Web ou votre page Web sur iOS.
Pour spécifier une icône pour l'ensemble du site Web (chaque page du site), placez un fichier d'icône au format PNG dans le dossier du document racine appelé Apple-touch-icon.png.
Pour spécifier une icône pour une seule page Web ou remplacer l'icône du site Web par une icône spécifique à une page Web, ajoutez un élément de lien à la page Web, comme dans:
<link rel="Apple-touch-icon" href="/custom_icon.png">
Dans l'exemple ci-dessus, remplacez custom_icon.png par votre nom de fichier d'icône . Pour spécifier plusieurs icônes pour différentes résolutions de périphérique (par exemple, prendre en charge les périphériques iPhone et iPad), ajoutez un attribut de taille à chaque élément de lien comme suit:
<link rel="Apple-touch-icon" href="touch-icon-iphone.png">
<link rel="Apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="Apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="Apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
L'icône dont la taille est la plus appropriée pour le périphérique est utilisée. Si aucun attribut size n’est défini, la taille par défaut de l’élément est 60 x 60 . Si aucune icône ne correspond à la taille recommandée pour le périphérique, la plus petite icône plus grande que la taille recommandée est utilisée. S'il n'y a pas d'icônes plus grandes que la taille recommandée, la plus grande icône est utilisée.
Si aucune icône n'est spécifiée à l'aide d'un élément link, le répertoire racine du site Web est recherché pour les icônes avec le préfixe Apple-touch-icon .... Par exemple, si la taille de l'icône appropriée pour le périphérique est 60 x 60, le système recherche les noms de fichiers dans l'ordre suivant:
Apple-touch-icon-76x76.png
Apple-touch-icon.png
Voir Taille des icônes et des images pour les statistiques des icônes de pages Web.
Remarque: Safari sur iOS 7 n’ajoute pas d’effets aux icônes. Les anciennes versions de Safari n’ajouteront pas d’effets aux fichiers d’icône nommés avec le suffixe -precomposed.png. Voir Premières étapes: Identification de votre application dans iTunes Connect pour plus de détails.
Depuis 2018, Site Web des développeurs Apple recommande les éléments suivants pour les appareils iOS:
<link rel="Apple-touch-icon" href="touch-icon-iphone.png">
<link rel="Apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="Apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="Apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<link rel="Apple-touch-startup-image" href="/launch.png">
<meta name="Apple-mobile-web-app-title" content="AppTitle">
Le titre de l'application remplacera le titre de votre site Web. Habituellement, vous voudriez que… ... L'image de démarrage apparaisse pendant le lancement de l'application.
Je n'ai jamais lu aucune spécification Apple, je dois l'avouer, mais selon les journaux de mon site, ces images sont nécessaires à la racine:
Apple-touch-icon-72x72.png
Apple-touch-icon-76x76.png
Apple-touch-icon-120x120.png
Apple-touch-icon-152x152.png
Apple-touch-icon-72x72-precomposed.png
Apple-touch-icon-76x76-precomposed.png
Apple-touch-icon-120x120-precomposed.png
Apple-touch-icon-152x152-precomposed.png
De ma demande de retrait à https://github.com/h5bp/mobile-boilerplate (avec les icônes de l'iPhone 6):
<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
<link rel="Apple-touch-icon-precomposed" sizes="180x180" href="img/touch/Apple-touch-icon-180x180-precomposed.png">
<!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
<link rel="Apple-touch-icon-precomposed" sizes="152x152" href="img/touch/Apple-touch-icon-152x152-precomposed.png">
<!-- iPad (with @2× display) iOS ≤ 6 -->
<link rel="Apple-touch-icon-precomposed" sizes="144x144" href="img/touch/Apple-touch-icon-144x144-precomposed.png">
<!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
<link rel="Apple-touch-icon-precomposed" sizes="120x120" href="img/touch/Apple-touch-icon-120x120-precomposed.png">
<!-- iPhone (with @2× display) iOS ≤ 6 -->
<link rel="Apple-touch-icon-precomposed" sizes="114x114" href="img/touch/Apple-touch-icon-114x114-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
<link rel="Apple-touch-icon-precomposed" sizes="76x76" href="img/touch/Apple-touch-icon-76x76-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
<link rel="Apple-touch-icon-precomposed" sizes="72x72" href="img/touch/Apple-touch-icon-72x72-precomposed.png">
<!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="Apple-touch-icon-precomposed" href="img/touch/Apple-touch-icon-57x57-precomposed.png">
<!-- Fallback for everything else -->
<link rel="shortcut icon" href="img/touch/Apple-touch-icon.png">
<!--
Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions).
If it’s not defined on that size it will take 128×128.
-->
<link rel="icon" sizes="192x192" href="img/touch/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/touch/Apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">
