[Tuto] Ajouter une icône iPhone à son site web

En effet, depuis l'avènement des smartphone en tout genre on ne peut plus vraiment, en tant que administrateur d'un site web, faire l'impasse sur les visiteurs qui les utilisent. Que ça soit pour IOS ou Android (ou n'importe quel autre OS portable d'ailleurs), si votre site internet est assez important sur la toile, vous ne pouvez plus passer outre cette part d'audience, que ça soit en proposant à vos utilisateurs une version mobile de votre site ou, au minimum, en l'allégeant un maximum (rien que pour vos utilisateurs provenant d'un ordinateur ça ne peut pas être un mal ).

Maintenant, pour votre public utilisant IOS pour naviguer sur votre site, il faut penser à ceux souhaitant l'ajouter à ses favoris ou, encore mieux, l'ajouter comme icône de raccourci parmi ses applications ou autres sites internet préférés. Or, de base, si vous proposez pas votre icône, Safari se contentera de bricoler une icône toute moche qui est en fait un screen de la page principale de votre site tout rétrécie qui ne présente franchement pas bien.
Comment améliorer ça ? Et bien c'est ce que je vais vous expliquer maintenant, vous allez voir que c'est plus que simple
Premièrement, vous devez avoir déjà créé votre icône au format 60x60 px (oui je sais que normalement on parle de 57x57 mais le format 60x60 n’entraîne aucuns bugs graphiques selon la version d'IOS alors que 57x57 est un peu plus susceptible de planter vraisemblablement). Notez également que, depuis que l'écran Retina des iPhone, Ipod Touch 4 ou iPad est apparu, vous pouvez également proposer votre icône au format 114x114 ce qui vous assurera une qualité d'image impeccable.
Personnellement, je préfère le 60x60 puisque sur mon iPod Touch 4 cela n'entraîne aucuns bug et cela me permet d'être sur que les utilisateurs d'anciennes versions d'IOS ne soient pas lésés par ce parti pris de favoriser ceux qui achètent les dernières versions des iTrucs
Une fois que vous avez créé votre icône donc (si vous cherchez comment faire je n'ai pas - encore – fait de tuto mais sur Google vous pouvez en trouver des très bons), hébergez-la comme n'importe quelle autre image sur votre site et conservez précieusement l'adresse de votre icône.

Maintenant, il ne vous reste plus qu'à copier-coller la ligne de code suivante et l'insérer à la racine même de votre site de manière à ce qu'elle soit présente sur toutes les pages ou sur un widget qui, lui aussi, sera présent sur chaque page.

Code:


<link rel="apple-touch-icon" href="adresse_de_l'image.png"/>


Remplacez donc simplement « adresse_de_l'image.png » par l'adresse que vous avez obtenu de otre hébergeur d'image donc, vous n'avez plus qu'à admirer le résultat
Très simple à faire n'est-ce pas ? Et ce n'est pas un luxe que de proposer une belle icône à vos utilisateurs, en fait, considérez cette icône comme une favicon (ce que j'ai fait en reprenant le logo pour l'icône ET le favicon du site) spéciale IOS, notez finalement que vous pouvez créer des icônes propre à chaque page en insérant le code, avec l'adresse qui convient, uniquement dans la page dont vous voulez changer l'icône et non pas à la racine de votre site.