Icône Apple Touch pour les sites web

Question

Jusqu'à présent, j'ai inclus la ligne de l'icône Apple Touch dans ma tête comme ceci :

<link rel="apple-touch-icon" href="http://stackoverflow.com/apple-touch-icon.png">

Cependant, en les questions-réponses "Quelles sont les dimensions correctes des pixels pour une icône apple-touch ?" il est indiqué dans la réponse acceptée que trois images sont maintenant nécessaires selon les directives d'Apple.

Alors comment faire pour les insérer dans la section head du code ?

Answer 1

De ma demande d'extraction à 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">

Answer 2

Je n'ai jamais lu les spécifications d'Apple, je dois l'admettre, mais selon les journaux de mon site, ces images sont requises dans 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

Answer 3

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 appareils iOS :