Icône Apple Touch pour les sites Web
Jusqu'à présent, j'ai inclus la ligne pour L'icône Apple Touch dans ma tête comme ceci:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Cependant, dans le Q&A "Quelles sont les bonnes dimensions en pixels pour un apple-touch-icon?" il est indiqué dans la réponse acceptée que trois images sont maintenant nécessaires selon les directives D'Apple.
alors comment pourrait-on les insérer dans la tête l'article du code?
8 réponses
voilà, j'espère que ça va aider.
si vous voulez Apple pour faire le peu esthétique pour vous (ajouter le brillant), puis vous mettre dans ces à la <head> étiquettes:
<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, alors vous feriez ceci:
<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" />
si vous en incluez plus d'un, l'appareil iOS cherchera la bonne taille et utilisera cette image automatiquement. Comme vous pouvez le voir à partir des noms des images dans l'exemple, l'iPad avec affichage rétine a besoin d'une icône qui est 144x144px, l'iPhone 4/4S/5 a besoin d'une icône qui est 114x114px, l'iPad d'origine (et iPad 2, comme la résolution de l'écran n'est pas différente) a besoin d'une icône qui est 72x72px, et l'iPhone d'origine n'a pas besoin d'une spécification de taille, mais pour votre référence, il est 57x57px.
Apple specs spécifier de nouvelles tailles pour iOS7:
- 60x60
- 76x76
- 120x120
- 152x152
- 180x180
de plus, les icônes précomposées sont dépréciées.
en conséquence, à prise en charge mais nouveaux appareils (iOS7) et plus anciens (iOS6 et prior), le code générique est:
<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 cherche URL comme /apple-touch-icon-76x76.png , si elle ne trouve pas de choses intéressantes dans le code HTML (un peu comme ce QU'IE fait avec /favicon.ico ). Il est donc important de conserver les noms des fichiers au-dessus. Il est également important pour considérer que Android / Chrome utilise également ces photos .
vous pourriez vouloir 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.
puisque quelques-unes de ces réponses sont déjà périmées, je recommande d'utiliser http://realfavicongenerator.net / pour générer toutes les images et le markup - je donne quelques euros chaque fois que je l'utilise dans l'espoir qu'il leur permet de se tenir à jour quant à ce qui est actuellement valable sur iOS, Android & Windows, donc je ne dois pas.
spécifier une icône de page Web pour le Clip
vous pouvez vouloir que les utilisateurs soient en mesure d'ajouter votre application web ou le 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 pour représenter votre application web ou page web sur iOS.
pour spécifier une icône pour l'ensemble du site (chaque page sur le site), placez un fichier d'icône en PNG format dans le dossier du document racine appelé apple-touch-icon.png
pour spécifier une icône pour une page Web unique ou remplacer l'icône du site par une icône propre à la page Web, ajouter un élément de lien à la page Web, comme dans:
<link rel="apple-touch-icon" href="/custom_icon.png">
dans l'exemple ci-dessus, remplacer custom_icon.png avec votre nom de fichier icon. Pour spécifier plusieurs icônes pour différentes résolutions d'appareils-par exemple, prendre en charge les appareils iPhone et iPad-ajouter un attribut tailles à chaque élément de liaison 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 qui est la taille la plus appropriée pour l'appareil est utilisé. Si aucun attribut de taille n'est défini, la taille de l'élément est par défaut de 60 x 60. S'il n'y a pas d'icône correspondant à la taille recommandée pour l'appareil, la plus petite icône supérieure à la taille recommandée est utilisée. Si 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 de lien, le le répertoire racine du site web est recherché pour les icônes avec l'icône apple-touch... préfixe. Par exemple, si la taille appropriée des icônes pour le périphérique est 60 x 60, le système recherche des noms de fichiers dans l'ordre suivant:
apple-touch-icon-76x76.png
apple-touch-icon.png
voir icônes et tailles D'Image pour la métrique des icônes des pages web.
Note : Safari sur iOS 7 n'ajoute pas d'effets aux icônes. Les versions plus anciennes de Safari n'ajouteront pas d'effets pour les fichiers icônes nommés avec -précomposé.png suffixe. Voir les premières étapes: identifier votre application dans iTunes Connect pour plus de détails.
Source: icône de la touche Apple specs
à partir de 2018, Apple Developers Website recommande ce qui suit 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 voulez que. L'image de démarrage est ce qui apparaîtra pendant le lancement de l'application.
Je n'ai jamais lu de spécifications apple, je dois l'admettre, mais selon les logs sur mon site, ces images sont nécessaires en root:
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 mon pull-request à https://github.com/h5bp/mobile-boilerplate (avec les icônes 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">
vous pouvez utiliser omg-img pour générer toutes les tailles et couleurs pour populaire icônes. Par exemple:
<link rel="apple-touch-icon" sizes="152x152"
href="https://img.icons8.com/color/152x152/anonymous-mask.png">
cette balise renvoie l'image suivante pour les périphériques iOS:
