Vos favicons pour tous les formats d’affichage de vos sites

Aujourd’hui, nous allons parler d’un sujet hautement stratégique : l’affichage de vos favicons ! 😀

Pour mémoire, un favicon, c’est la petite image qui accompagne l’URL de votre site/blog dans l’onglet du navigateur et qui, au-delà d’apporter une petite touche finale à votre design, facilite l’identification de votre site parmi une interminable liste de favoris.

J’avais écrit un article à ce sujet il y a fort longtemps, mais, vu la multiplicité de supports qui existe aujourd’hui, je vous annonce une mauvaise nouvelle : votre favicon « d’antan » n’a certainement plus aussi fière allure sur les smartphones et autres tablettes en vogue… 🙁

Qu’à cela ne tienne : une solution existe pour vous créer en deux clics et demi une panoplie de favicons adaptés pour tous les supports.

Le site qui opère ce miracle s’appelle Real Favicon Generator. Sur la page d’accueil et à droite de l’écran, on vous montre comment votre favicon « à l’ancienne » s’affiche très probablement sur tous les supports actuels, et comment il va pouvoir s’afficher une fois que vous lui aurez fait subir un petit traitement.

Pour en avoir le cœur net, on vous propose en bas de la page de tester votre favicon, il suffit d’inscrire l’URL de votre site et de cliquer sur « Check favicon ». Normalement, ça doit être plutôt moche. 😉

Mais profitez-en pour regarder les résultats de ce test en descendant tout en bas de la page : on vous indique tout ce qu’il manque pour que votre favicon apparaisse correctement sur tous les supports. En soi, c’est assez décourageant, de quoi y passer un week-end entier. 🙁

Donc, maintenant, comme vous avez certainement autre chose à faire et que vous êtes décidés à changer d’ère : vous allez laisser l’application travailler pour vous fournir un favicon digne des supports mobiles les plus prisés.

Pour cela, vous allez aussi changer de format d’image (de taille plutôt) : dans l’absolu, et pour un résultat optimal, il vous faut une image d’au minimum 70 px x 70 px ou, encore mieux, de 260 px x 260 px. Pour le format (l’extension), le mieux, c’est encore du .png, cela vous permettra de choisir un fond de couleur par la suite.

Si vous voulez, avant de vous lancer, vous pouvez cliquer sur le bouton vert « Demo with this picture » pour tester l’application. Mais tant qu’à faire, autant y aller sans crainte, vous ne risquez rien.

Allons-y. Cliquez sur le bouton bleu « Select your favicon picture » et sélectionnez votre image sur votre disque dur.

Vous serez alors dirigés vers une page avec deux écrans particuliers qui vont vous permettre d’ajuster certains paramètres. Si votre image est d’une taille inférieure à 260 px x 260 px, une petite boîte de dialogue s’ouvrira pour vous dire que le résultat risque de ne pas être au top, mais que bon, ça ira quand même.

Passons aux petits réglages : 1. pour iOS et Android, on vous montre comment s’affiche votre favicon au centre, avec un fond transparent, et on vous donne l’option d’ajouter un fond (dont vous pouvez modifier la couleur), d’ajouter des marges pour centrer l’image, ou de charger une image qui fera office de fond ; 2. pour Windows 8, on vous donne la possibilité de changer la couleur de fond, de saturer votre image pour en faire une icône blanche, et de charger une image spécifique pour le fond.

Une fois que vous êtes satisfait de vos réglages, cliquez sur le bouton bleu tout en bas : « Generate your Favicons and HTML code ». En moins de temps qu’il en faut pour le dire, on vous présentera plusieurs éléments : 1. le dossier contenant toutes les images de favicon dans toutes les tailles et formats nécessaires, que vous allez télécharger en cliquant sur le lien « Favicon package » ; 2. un bloc de lignes de code que vous allez soigneusement recopier sur un bloc notes.

Quoi faire ensuite ? C’est simple.

1. Vous allez décompresser le dossier « favicons » que vous avez téléchargé et vous allez uploader tout ce qu’il contient à la racine de votre site (là où se trouve probablement déjà le fichier favicon.ico).

2. Vous allez aussi recopier le bloc de lignes de code tout entier dans la section « head » du code source de toutes les pages de votre site.

Voilà, c’est tout, votre favicon va maintenant faire le beau sur toutes les machines à la mode et s’afficher comme une vraie « appli » sur les smartphones les plus branchés ! Cool, non ? 🙂

P.-S. Pour les blogs WP, je n’ai pas encore testé, mais j’imagine qu’en insérant les lignes de code dans le fichier header.php, en toute logique, ça devrait marcher. En gros, au lieu de n’avoir qu’une seule ligne de code pour afficher le favicon, on en a maintenant plusieurs, pour toutes les tailles d’affichage requises.

***