Ajouter une icone pour iPad / iphone à votre site

1 5018

Je sais pas vous mais quand je trouve un site sympa, je l’ajoute à l’écran d’accueil de mon iPad, et de mon iPhone. Le Bon Coin, les blogs de mes potes, mes propres blogs, j’aime bien classer par thématique les sites que je consulte le plus souvent. Mais quand je classe mes lectures favorites sur ma tablette, j’aimerai avoir un visuel du logo, une icône qui m’éviterai de devoir assigner des titres trop complexes à chaque site que j’ajoute.

Assigner une icone au raccourci de votre site

Imaginez que vos lecteurs démarrent leurs tablettes et trouvent plus rapidement vos sites grâce à des logos.

En temps normal, lorsque vous naviguez sur un site et souhaitez l’ajouter à votre écran d’accueil, voici ce qui apparait :

icone origine

Icone par défaut sur iPad

Nous allons voir comment votre produit Apple peut vous simplifier la tâche grâce à un petit bout de code que vous allez ajouter à votre site. Ce dernier vous permet de contrôler l’image de votre icône, afin de vous simplifier la navigation.

icone personnalisée

Icone personnalisée sur iPad

Idem pour iPhone vous aurez un beau logo bien lisible

icone personnalisée Apple

Visu iPhone


La première étape est d’aller choisir le logo ( 114×114 pour un format parfait ) et de l’uploader à la racine de votre site.

votreinstalldesite/icone-apple.png

Si vous êtes sous CMS, importez votre image et copiez l’url de cette dernière !

Ensuite voici le code que votre iBidules va interpréter :

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

Modifier l’url avec la votre et copiez le code complet pour l’insérer sur votre site (dans le fichier header.php par exemple dans la section <head>)

L’astuce rend beaucoup plus pratique la navigation depuis les tablettes et mobile Apple.

iCone de mon site disponible sur iPhone et iPad

Voici en image le rendu sur mes iBidules

icone ipad

Icône sur ma tablette iPad


icone sur iphone

Icône sur mon iPhone

Les effets arrondis se font automatiquement, pas besoin de travailler votre photo. Voilà maintenant faites le test en live si vous désirez ajouter Cree1site sur votre écran d’accueil et constatez comme c’est plus beau.

Cette astuce est disponible avec des options plus poussées sur le site officiel Apple.


Cet article vous a plu ? Partagez le…

Un commentaire

  1. C’est vraiment plus ergonomique et rien ne vaut que de l’ergonomie pour fidéliser le visiteur et lui rendre la navigation plus simple.

Réagis