real-favicon-generator

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 ?

42 commentaires

  1. Très bon article, et surtout, RealFaviconGenerator.com est un très bon service que j’utilise depuis un petit moment déjà. C’est à ma connaissance le service le plus « Complet » pour la génération de favicons, c’est-à-dire qu’il couvre tous les principaux cas de figures (iOS, iOS Retina, Android, Windows 8, …) tout en respectant les recommandations de chacunes de ces plateformes !

    Félicitations.

    1. Note: Merci à la modération de modifier « RealFaviconGenerator.com » dans mon message par « RealFaviconGenerator.net », vu qu’il n’y a — a priori — pas de bouton « Modifier le commentaire »; merci !

      1. TIens tiens, j’ai l’impression que nous nous sommes déjà croisés quelque part

        RealFaviconGenerator.com fonctionne également. Il n’est arrivé de prendre des noms de domaine en .net uniquement, et je l’ai regretté amèrement quelques mois plus tard en constatant que « l’autre » avait été réservé entre temps. Je n’ai pas refait l’erreur cette fois-ci.

    1. … et attention à la version d’iOS supportée. Partout sur le Net on trouve des références à « iOS » qui signifient en fait « iOS6 et inférieur ». La résolution des images a changé avec iOS7. Par exemple l’image pour iPad Retina est passée de 144×144 à 152×152.

  2. Testé et approuvé, je ne connaissais pas ce service et ça fait gagner un temps précieux (je me suis amusé à faire plusieurs déclinaisons de mes favicons avec Paint.net, mais pas autant que ça et surtout en beaucoup beaucoup plus de temps)

    1. Oui, c’est vraiment l’esprit. Il y a forcément de gros projets pour lesquels des graphistes vont travailler sur chaque déclinaison du favicon. Mais pour l’immense majorité des projets, je pense qu’une solution simple et rapide est la réponse adaptée.

  3. J’utilisais jusqu’à présent Img2Icns, une petite application qui fonctionne très bien mais je dois dire que là, après avoir testé (et approuvé) RealFaviconGenerator.net je suis bluffé. Très bon service et très bon article, une bonne astuce une fois de plus pour avoir un rendu très professionnel, c’est souvent ce qui manque quand on fait tout soi même…Merci donc.

    1. Merci ! J’utilisais un outil du même genre. Je connaissais l’icône pour IOS, mais le jour où j’ai voulu approfondir un peu, j’ai réalisé comme c’était compliqué. Vous connaissez la suite.

  4. Voilà une solution bien sympa. J’ignorais d’ailleurs à quel point c’était le bazar cette histoire de favicon. Seul vrai problème… retrouver les images qui ont servi à créer le favicon original. Et là, c’est hard.

  5. Merci pour l’article, j’avais testé rapidement mais ça m’avait semblé un peu complexe à mettre en oeuvre. Cet article m’y fera donc regarder à 2 fois !
    Je me demande quel est l’impact en termes de temps de chargement des pages ?

    1. Il existe des problèmes sous Firefox et Chrome. Cependant, cela ne devrait pas avoir d’impact concret, même en environnement mobile avec une faible bande passante. Voir http://realfavicongenerator.net/faq#troubleshootings .

      Dans tous les autres cas, c’est tout bon. On peut même supposer que cela est plus efficace dans certains cas, puisque les navigateurs n’ont pas à « tenter » des requêtes et récupérer des 404. Par exemple, quoi qu’on fasse, IE11 sur Windows 8.1 cherche un fichier browserconfig.xml à la racine du site. Autant le lui fournir. Dans un autre genre, Safari sous iOS cherche ses images par nom de fichier s’il ne trouve pas de déclaration dans le code HTML. Ce qui évite à nouveau quelques 404 superflus.

  6. Merci pour ces explications et pour le lien de RealFaviconGenerator, que je ne connaissais pas. Par contre, mon téléphone Android continue à choisir une image basse définition parmi les images Apple… Mais c’est mieux qu’avant. Merci!

  7. Je complète mon commentaire. L’image pixelisée est choisie par Firefox sous Android. Avec le navigateur par défaut (« Internet »), si l’on crée un raccourci sur l’écran d’accueil, l’image choisie est celle d’Apple aux coins arrondis et n’est pas pixelisée. Il est ensuite possible de choisir le navigateur en cliquant sur le raccourci.

  8. D’accord, je vais faire ça. Mon téléphone est un Android 4.1.2. Ce qu’il ce passe chez moi, c’est que Firefox met une image totalement carrée et en basse def, piochée parmi les images Apple (il y a un fond coloré), « Internet » une image plus haute def aux coins arrondis, mais légèrement floue, et Chrome une version parfaitement nette et non pixelisée, aux coins plus arrondis qu’avec « Internet ». Firefox est à jour, et à chaque fois la procédure est la même : « Ajouter à l’écran d’accueil » à partir des marques-pages du navigateur.

    1. Ok merci. L’avantage du test est qu’il révèle quelle image est utilisée exactement. Est-ce l’image iOS en 57×57 ? Une autre ? Etc. etc.

      De mon côté je vais essayer de mettre la main sur d’autres appareils Android.

    1. Bien reçu le résultat des tests. Merci ! J’intégrerai les résultats de tes tests sous peu dans http://realfavicongenerator.net/favicon_compatibility

      Tu notes que le résultat des tests est différent de ce que tu as observé auparavant. C’est étrange en effet. Cependant, cela s’observe de temps en temps. Certains navigateurs prennent tantôt une image, tantôt l’autre, sans raison apparente. Par exemple, on a vu un Safari sous iOS 5 qui prenait l’image 57×57 puis la 114×114, sans qu’on puiss expliquer pourquoi. Pas simple tout ça.

      Je n’ai jamais observé cette indécision sur Firefox jusqu’à présent. Il a peut-être été influencé par son cache. L’exemple par excellence est IE, qui a vraiment, vraiment du mal à recharger le favicon.ico en cas de mise à jour. Dans ce cas-ci, peut-être que Firefox a réagi différemment en présence d’un site qu’il connaissait déjà.

  9. Cela est bien possible, en effet. Je ferai un test avec un autre Firefox et un autre Android qui ne connaît pas mon site pour voir ce que cela donne. En tout cas, merci beaucoup pour cet article et pour ce générateur.

  10. Félicitations pour votre article et aussi pour le Favicon Generator. Il manquait un outil aussi simple et complet. Je l’ai déjà testé avec un de mes sites et je m’apprête à refaire les favicons de tous les autres (il faut trouver l’image originale, quand même !)

    Par contre, dommage que le Favicon Generator ne dispose pas d’une version en français. Ça couterait un petit effort, mais serait très sympa !

      1. Et j’oubliais de le dire… L’outil de vérification des favicons, avec toutes les explications nécessaires, est simplement magnifique !

        Quant au français, ce n’est pas grave. Vous avez le temps pour l’apprendre.

        Merci encore !

        1. Et il faut aussi soigner son anglais. Petite coquille dans la toute dernière phrase de l’outil de vérification : « Well done! This FAVION just looks perfect! »

          1. Arf ! J’ai un problème spécifiquement avec ce mot (véridique). Très pratique.

            C’est corrigé, et à deux endroits du site… je garderai le secret de la seconde occurence

            Merci de l’avoir signalé !

  11. Bonjour et merci pour cet article. La mise en œuvre ne m’a pas posé de problème et le résultat est conforme. L’outil de test a fourni un compte-rendu 100% OK, mais depuis, j’ai un problème avec les pages protégées par mot de passe. J’ai systématiquement : Service Temporarily Unavailable – The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later. (erreur 503).
    Si je supprime le mot de passe, la page s’affiche.
    J’utilise WordPress – V 3.7.1 – thème: Twenty-ten -
    Qu’en pensez-vous ?
    Daniel.

    Laisser un commentaire