suivez-moi sur :

Philippe da Cruz : graphique and web designer
Philippe da Cruz

Blog

4

Icône raccourci pour site web

Icônes sur un écran

Mettez dans n’importe quel appareil portable votre propre icône raccourcie pour faciliter l’accès à votre site web.

Lorsqu’un internaute ajoute à l’écran d’accueil de son iphone, ipad ou Androïd votre page web, vous pouvez remarquer qu’une icône semblable à l’icône d’une application apparaît. Cette icône est par défaut une copie écran de la page sur laquelle l’internaute était en train de naviguer.
Evidemment, vous pouvez créer le design de cette icône si vous souhaitez lui donner un look d’application plus professionnelle.
Tout d’abord, téléchargez ce modèle PSD puis ouvrez-le avec Photoshop.
Puis, ajoutez dans le modèle téléchargé votre logo ou une image et enregistrez le fichier trois fois au format PNG suivant : 57X57, 72X72 et 114X114 sous :
 
apple-touch-icon-57×57-precomposed.png
apple-touch-icon-72×72-precomposed.png
apple-touch-icon-114×114-precomposed.png
 
Reprenez votre icône finale au format PSD et sauvegardez une nouvelle fois le fichier au format 57X57 mais cette fois, nommez-le apple-touch-icon-57×57.png

J’avoue que l’effet brillant n’est vraiment pas beau. Si vous ne voulez pas le garder, masquer ou jeter le calque avec l’effet. Nous verrons plus bas comment l’enlever car malheureusement, Apple le rajoute par défaut et cela même si l’effet n’est pas sur l’icône PNG finale.

Vous avez donc quatre fichiers PNG dont deux au format 57X57.
Envoyez-les à la racine de votre site avec Filezilla ou Dreamweaver.

Ajouter entre les balises <head> et </head> de votre fichier HTML ou PHP les lignes suivantes :

<link rel="apple-touch-icon-precomposed" size="114x114" href="http://votresite.com/apple-touch-icon-114x114-precomposed.png"/>
<link rel="apple-touch-icon-precomposed" size="72x72" href="http://votresite.com/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="http://votresite.com/apple-touch-icon-57x57-precomposed.png"/>
<link rel="apple-touch-icon" href="http://votresite.com/apple-touch-icon.png"/>

Bien sûr, n’oubliez pas de modifier le chemin d’accès et le nom de votre fichier .png pour y mettre l’URL de votre icône si nécessaire.

Il ne vous reste plus qu’à mettre votre fichier index.html ou header.php en ligne et le tour est joué !

Vous vous demandez sûrement pourquoi j’ai utilisé le mot “precomposed” sur trois des fichiers PNG ?
Comme je vous le disais plus haut, et même si vous ne l’avez pas mis sur votre icône originale, l’effet brillant est automatiquement ajouté lorsque l’icône s’installe sur votre appareil. “precomposed” sert donc à annuler cette action et à garder l’icône tel que vous l’aviez réalisé.

Normalement, ce que vous venez d’achever devrait marcher sur la plupart des portables et tablettes. Je vous conseille d’essayer sur vos appareils et ceux de vos amis.
Maintenant, si votre site est aussi “responsive”, vous aurez transformé votre site en quasi-application. N’est-ce pas génial ?!

Posté dans HTML, Photoshop | 4 commentaires

Vos commentaires

BC
a dit le
vendredi 15 juin 2012 à 19:50 :


Superbe billet ! Merci.


    admin
    a dit le
    vendredi 15 juin 2012 à 22:41 :


    Merci à vous aussi BC et j’espère que cet article vous a été utile.


King Riebe
a dit le
lundi 6 août 2012 à 00:37 :


Hello! I know this is somewhat off topic but I was wondering if you knew where I could locate a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having difficulty finding one? Thanks a lot!


a dit le
mardi 21 août 2012 à 16:48 :


Thank you ! I was just preparing to do some research about this. I got a grab a book from my area library but I think I learned more from this post. I am very glad to see such wonderful information being shared freely out there.


Laisser un commentaire

*

*


+ deux = 11