Optimiser son favicon pour iOs Windows 8 et compagnie
Apprenez dans cet article à évaluer la pertinence de son favicon puis à l’optimiser pour l’ensemble des devices utilisés par les internautes.
Avec la multiplication des différents terminaux de connexion Internet il est primordial d’adapter avec les techniques du responsives design l’apparence de votre site Internet. Dans cette démarche les intégrateurs (dont moi) oublient souvent d’adapter également le favicon.
Pour rappel le favicon est l’image utilisée par les navigateurs lorsqu’un utilisateur place votre site en favoris ou dans l’onglet (lorsque le site est affiché). Il y a quelques années une seule image été nécessaire (toute petite d’ailleurs) mais aujourd’hui vous devez en prévoir une multitude. Que ce soit sur iOs (iphone ou tablette), sous Android ou encore sous Windows8 l’utilisateur doit pouvoir bénéficier des favicons adaptées à son terminal.
L’expérience utilisateur n’en sera que meilleur. Voyez ci-dessous différentes version du favion de wks pour différents terminaux.
Pour optimiser le favicon j’ai trouvé un outil formidable, que je tiens à vous faire découvrir. Real Favicon Generator vous permet : de diagnostiquer l’utilisateur du favicon sur votre site. Puis de créer un pack complet d’icones à partir de deux images que vous aurez préalablement créé sous Photoshop.
Si vous souhaitez optimiser votre favicon suivez ces étapes.
ETAPE 1 Diagnostiquer votre favicon
Connectez vous au site Real Favicon Generator puis entrez l’url de votre site dans le formulaire Check your favicon. En appuyant sur le bouton le site scan votre site et vous donne un tas de conseil permettant de faire le point sur ce qui est possible d’améliorer.
ETAPE 2 Créer son favicon sous Photoshop
Il est temps maintenant de créer votre favicon. Ouvrez Photoshop puis créez un nouveau document de 310px de coté. Je ne vais pas expliqué comment réalisé votre favicon car vous serez sans doute mieux placé que moi pour connaitre vos besoins. Cependant je ne peut que vous conseiller de rester simple. N’oubliez pas que votre icône sera utilisée également en très petite taille, elle doit donc être toujours visible en grande et en petite taille !
Voici l’image que j’ai créé pour wks.
Vous devez ensuite créer une seconde image. Cette image doit être au format 1024 px de coté. Elle servira pour les devices Apple. Utilisez simplement la même image que la première mais en créant des bords arrondis. Vous devrez également enregistrez en .png en gardant la transparence (autour des coins arrondies).
Et enfin il faut une troisième image cette fois pour windows8 avec aucun fond. Enregistrez également cette image en png transparent.
Une fois ces images terminées vous devez retourner sur le site Real Favicon Generator puis appuyez sur le bouton Select your favicon picture. Vous devez sélectionnez votre première image créée (celle de 310px de coté).
Ensuite le site vous informe que pour un effet optimal vous devriez uploader aussi une image spécifique pour iOs et et Windows 8. Appuyez sur les boutons Pick picture et sélectionnez les images correspondante.
ETAPE 3 Installer les nouveaux favicons
Le site génère automatiquement les images (dans toutes les tailles nécessaires) et les imports nécessaires. Commencez donc par télécharger l’archive puis dé zippé les fichiers sur votre ordinateur.
Ensuite avec votre client FTP envoyé tous les fichiers sur la racine de votre site internet.
Ensuite vous devez copier / coller tous les imports (link et meta) dans la partie head de votre site internet. Uploader le fichier via FTP.
Et voila c’est terminé les nouveaux favicons sont maintenant installés !
ETAPE 4 Vérifier que tout fonctionne
Maintenant que vos nouvelles icones sont installées sur votre site Internet vous devez bien sur les tester. Pour cela vous pouvez bien sur utiliser à nouveau le formulaire de test présent sur Real Favicon Generator. Vous pourrez notamment visualiser comment vos icones seront insérées sur les différents terminaux.
Une autre solution est bien sur d’essayer directement sur les terminaux.
Par exemple si vous avez un iPhone, allez dans votre navigateur puis appuyez sur le bouton ajouter à la page d’accueil. Normalement l’icône spéciale iOs est automatiquement détectée et installée.
Voilà, j’espère que vous aurez apprécié cette astuce.
