Générer un favicon multi-plateforme pour WordPress

Le favicon est la fameuse icône qui s’affiche dans les onglets du navigateur, à côté du titre du site web. Chacun reconnait inconsciemment le favicon de ses sites préférés comme on reconnait les logos dans les publicités. Pourtant, le favicon est souvent négligé, comme ancré dans l’époque pré-mobile. Une démonstration?

Installons WordPress puis un favicon, tel que décrit dans le Codex WordPress. Côté design, c’est un sans faute. Le thème par défaut est responsive, comme il se doit de l’être à l’ère des smartphones et autres tablettes.

Page d'accueil du blog par défaut sur Windows et AndroidEt pour le favicon ? Sur PC, tout va bien, la petite icône apparait. En revanche, sur mobile, rien n’est prévu. D’ailleurs, à quoi ressemble le favicon sur mobile ?

Les nouvelles formes du favicon

Le favicon classique est connu et facile à obtenir. Il s’agit d’un fichier facivon.ico et son insertion dans un site est largement documenté, pour WordPress ou autre.

Favicon sur Windows/Chrome

Souvent, sur mobile, le favicon n’est pas affiché en cours de navigation, petit écran oblige. En revanche, il apparait en deux occasions : dans les favoris et sur l’écran d’accueil. Cette dernière option n’est pas connue de tous les utilisateurs mais très appréciée par certains. Il s’agit de transformer un favori en une icône disposée sur l’écran d’accueil, au même titre que les applications natives du téléphone. Cette fonctionnalité est très similaire sur iOS, Android et Windows 8.

Le favicon par défaut sur les plateformes mobiles

On pourrait se dire que le classique favicon.ico pourrait convenir mais ça n’est pas le cas. Avec des écrans de plus en plus denses – pensez retina, les nouvelles plateformes mobiles ne peuvent se contenter d’images de faible résolution comme c’était le cas aux débuts du favicon dans les années 2000.

Voyons donc ce que donne le favicon par défaut. Sur Android, l’icône des favoris n’est pas très jolie. Elle est pixelisée, surtout comparée à l’icône de Google.

Favoris sur Android/Chrome

Quant à l’icône de l’écran d’accueil, Chrome essaie de faire un montage pour sauver les apparences, mais elle a du mal à se fondre dans la masse des icônes pour applications natives, beaucoup plus travaillées.

Icône sur l'écran d'accueil sur Android/Chrome

Sur iOS, le résultat est un peu différent. Le système ne trouvant pas d’image satisfaisante, il utilise… une miniature de la page bookmarkée.

C’est tout le problème. Les plateformes mobiles sont dans toutes les têtes et nous leur consacrons beaucoup d’efforts. Mon blog s’affiche-t-il bien sur iPhone ? Le thème que j’ai choisi est-il adapté à IE11 sur Windows RTM ? Mais le favicon n’a pas les mêmes faveurs. C’est pourtant l’un des éléments que les visiteurs voient en premier et qui reste visible lorsque le site n’est plus affiché.

Un favicon pour toutes les plateformes

Que faut-il pour que le favicon fonctionne partout ? Pas moins d’une quinzaine d’images. Apple définit la touch icon qui existe dans plusieurs résolutions. Entre l’iPhone et l’iPad, les écrans Retina et non-Retina, et iOS7 et précédents, cela fait déjà huit images, rien que pour iOS. Android copie son voisin en piochant dans les icônes Apple à sa convenance. Et la liste continue : une image pour Windows 8, mais quatre de plus au passage à Windows 8.1 / IE 11. Et quelques autres exotismes, comme l’icône 96×96 pour Google TV (quoi, vos visiteurs n’utilisent pas tous Google TV ?).

Les prérequis ne s’arrênt pas à une liste d’images. Il faut également tenir compte du look and feel attendu sur chaque plateforme. Par exemple, les favicons utilisent souvent la transparence, qui passe bien dans les onglets des navigateurs. En revanche, iOS s’accomode mal de la transparence. Il ne s’agit pas d’une contrainte technique mais d’un soucis d’homogénéité : les icônes des applications natives sont opaques, celle de votre blog devrait l’être également pour ne pas dépayser vos visiteurs. Windows 8.1 et son interface Metro ont leur propres recommandations, comme des icônes blanches sur fond coloré.

Fabriquer un favicon demande donc pas mal d’attention. Souvent trop compte tenu de sa relative simplicité : dans bien des projets on se voit mal consacrer des heures à sa conception. Dans le cadre de ce tutoriel, nous allons donc utiliser un générateur de favicon qui prend en compte ces contraintes.

Génération du favicon

Place à l’action, créons le favicon et intégrons-le à un blog WordPress.

Étape n°1 – L’image de base

Munissez-vous d’une image qui servira de base à la création du favicon. Il s’agit d’une image carrée, en 260×260 ou plus, transparente ou pas. Sans doute le logo du blog ou de la société représentée. Si vous désirez juste suivre ce tutoriel sans pour autant avoir une image toute prête, vous pourrez vous passez d’image et vous servir d’une image de test. Poursuivez le tutoriel.

Étape n°2 – Création du favicon

Rendez-vous sur RealFaviconGenerator et cliquez sur Select your favicon picture – ou Demo with this picture si vous n’avez pas d’image.

Sélectionnez l’image sur votre PC et laissez le générateur préparer l’éditeur de favicon. La partie Favicon for iOS and Android présente un aperçu du favicon tel qu’il s’affichera sur l’écran d’accueil d’un utilisateur d’iPhone. Avec l’image de démo, le résultat n’est pas probant. L’image transparente dénote par rapport aux autres icônes iOS7.

Icône pour iOS et Android, avant modifications

En jouant avec les options, on ajoute un fond blanc, ainsi que des marges afin que l’image originale ne touche pas les bords de l’icône iOS. Selon l’image que vous utilisez, vous pourrez voir des options différentes et devrez faire vos propres essais pour obtenir un résultat satisfaisant.

Icône pour iOS et Android, après modifications

La partie Favicon for Windows 8 est l’équivalent pour Windows 8. Avec l’image de démo, le rendu initial est correct.

Icône pour Windows 8, avant modifications

Cependant, la couleur de fond n’est pas optimale et on lui a préféré Dark Blue dans cet exemple (il s’agit de l’une des couleurs définies par Microsoft), ainsi qu’une version saturée de l’image pour obtenir le look « icône blanche » de Windows 8.

Icône pour Windows 8, après modifications

Dans les options, on indique le chemin où seront placées les images.

Options par défaut

Si votre blog est hébergé à la racine de votre domaine ou en sous-domaine, laissez la sélection par défaut. En revanche, si votre blog est situé dans un sous-répertoire, sélectionnez l’option appropriée et indiquez le chemin qui convient. Demandez également la compression des images, ce qui fera économiser de la bande passante à vos visiteurs. Vos visiteurs nomades apprécieront.

Options spécifiques pour un blog donné

Validez en cliquant sur Generate your favicons and HTML code.

Étape n°3 – Installation du favicon

Téléchargez l’archive contenant vos images et décompressez-la sur votre poste. Si vous avez coché l’option de compression des images, vous obtenez deux sous-répertoires : /compressed et /uncompressed.

Placez tous les fichiers du répertoire compressed dans la racine de votre blog, là où se trouve notamment index.php, en procédant par copie de fichiers ou transfert FTP suivant le cas.

Dans les options d’administration de votre blog – par exemple http://monsite.fr/blog/wp-admin/, allez dans Apparence puis Éditeur, puis éditez l’En-tête (header.php). Copiez le code HTML de RealFaviconGenerator et collez-le dans la section <head> de header.php puis validez.

Insertion du code

Le favicon est prêt, en voici les résultats.
Nouveau favicon sur Android, iOS et Windows 8

Que vos visiteurs utilisent un PC, un iPhone, un Nexus 7 ou une Surface, ils bénéficieront de la meilleure expérience et seront plus enclins à bookmarker votre blog. Convaincus ?