En tant de créateur de site web vous pouvez vouloir personnaliser cette icône pour qu’elle corresponde plus à l’image de votre site.

Pour la personnaliser il vous suffit de créer une icône png de 57x57 px, de l’appeler “apple-touch-icon.png” et de l’installer dans le dossier racine de votre site web. Safari ira automatiquement la chercher, vous n’avez pas besoin de faire un appel particulier dans l’entête "head" de votre site.

Spécifications :

Pour les sites sous SPIP :
Installez le fichier png dans le dossier squelettes et mettez un appel entre les balises head ou dans le fichier inc-head :

Pour ajouter une icône "Webclip" particulière pour une page (ou une rubrique) spécifique de votre site :
Si vous voulez, dans un site sur les animaux, que la rubrique "Girafe" possède une icone "webclip" illustrant une girafe (par ex), il vous faut ajouter une balise "link" dans l’entête "head" de la page concerné :

<link rel="apple-touch-icon" href="incone_perso.png"/>

Graphisme :

Niveau graphisme, c’est à vous de voir, pensez là comme une "super" favicon.

Ne vous fatiguez pas à créer le reflet "glossy" et les coins arrondis, le firmware de l’iPhone s’en chargera pour vous.

On peut, si on veut, mais je ne vois pas l’intérêt, utiliser une icône plus grande, le firmware de la "bête" la redimentionnera à 57x57 px, à l’image de l’icône d’Apple qui mesure 129x129 px : http://apple.com/apple-touch-icon.png.

Exemples

Ci dessous, en exemple, mon “apple-touch-icon.png” :

L’apple-touch-icon du site d’Apple :