Nouvelle icône Touch pour GuiM.fr compatible iPad et iPhone 4 Retina Display (et comment faire pour créer votre propre icône)

icone-touch-springboard-guim.PNG

Pour ajouter l’icône de GuiM.fr sur le springboard de votre iPhone ou de votre iPad, affichez la page du blog dans Safari mobile sur votre périphérique, puis appuyez sur  » +  » dans la barre en bas de l’écran. Choisissez « Ajouter à l’écran d’accueil ».

Vous avez sans doute remarqué, si vous êtes un heureux possesseur de l’un des appareils sus-mentionnés, que les icônes des raccourcis web de certains sites que vous avez ajouté à votre springboard s’affichent aliasés sur l’iPad ou sur votre tout neuf iphone 4 Retina Display.

Si vous aussi vous souhaitez que l’icône de votre site/blog s’affiche correctement, notamment iPad et Retina Display, la procédure est simple. Il vous faut juste la même icône qu’auparavant, mais plus grande 😉

Il vous suffit donc de créer un fichier image de votre icône au format PNG, de 129×129 pixels, et d’une résolution de 132 dpi. Nommez ce fichier apple-touch-icon.png et placez-le à la racine de votre site web ou de votre blog (en remplacement de l’ancien, si vous en aviez déjà un).

Notez qu’il est également possible d’indiquer par le nom du fichier que l’on ne veut pas du petit reflet sur l’icône, nommez alors le fichier apple-touch-icon-precomposed.png.

Si vous n’avez pas accès à la racine de votre serveur, sachez que vous pouvez tout à fait héberger l’icône où bon vous semble. Et même lui choisir un autre nom de fichier. Dans ce cas, insérez dans le code source de votre blog/site, entre les balises <HEAD> et </HEAD> la ligne de code suivante (en ayant soin de remplacer http://www.adresse-du-blog/repertoire/nom-de-votre-icone.png par l’adresse et le nom exact de votre fichier icône :

<link rel= »apple-touch-icon » href= »http://www.adresse-du-blog/repertoire/nom-de-votre-icone.png » />