Notes

Icône WebClip pour iPhone/iPod Touch 1.1.3

Créer une "Apple Touch Icon" personnalisée

Tags : , , , , ,

La version 1.1.3 du firmware de l’iPhone apporte la possibilité à l’usager d’ajouter des raccourcis vers des site web sur le SpringBoard (le bureau). L’iPhone créé alors une icône en faisant un "screen shot" de la page courante.

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 [MàJ : ou plutôt 114x114px pour un affichage optimum sur le Retina Display, voir plus bas] , 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 :

[(#REM) Icone WebClip pour iPhone/iPod Touch ]
[<link rel="apple-touch-icon" href="(#CHEMIN{apple-touch-icon.png})"/>]

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 du site d’Apple qui mesure 129x129 px : http://apple.com/apple-touch-icon.png.

[MàJ : Ça y est le mystère est levé au sujet de l’intérêt d’avoir une icône en 129x129px avec l’arrivé sur le marché de l’iPhone 4 et de son Retina Display, le fameux écran possédant une résolution de 300dpi. Sur cette écran ultra précis, les icônes en 57x57px semblent pixélisées, l’effet n’est pas très class. Pour que la touch icon de votre site apparaisse bien sur ces écrans nouvelles générations, je recommande à tout le monde d’installer sur votre site un icône en 114x114px minimum. ]

Exemples

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

Mon apple-touch-icon.png

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

 Apple apple-touch-icon.png

Voir en ligne : iPhone Dev Center

P.-S.

Un peu d’inspiration : apple-touch-icon.com

© 2017 - Abel Poucet web design