C'est une information qui est passée un peu inaperçue qui a retenue mon attention en ce début d'année 2020 !
Google teste une nouvelle manière de présenter ses résultats de recherche (SERP) en y incluant une petite nouveauté pas tout à fait anodine : on voit apparaître en premier avant l'URL un petit « favicon » ! Ouah !
Quésako ? Oui, il faut être webmaster ou passionné pour connaître depuis très longtemps ce petit picto qui fait partie intégrante de la création d'un site internet : oui, une petite image... qui peut avoir un impact non négligeable pour favoriser l'attractivité de votre site !
Autant on passait vite dessus, voire on faisait l'impasse auparavant... autant désormais on ne peut plus l'ignorer...
La beauté se cache dans les détails !
Erwan Corre
Sommaire
- Un « Favicon », mais c'est quoi ?
- Analyse du « Favicon »
- Penser son « Favicon »
- Créer son « Favicon »
- Mettre en œuvre votre « Favicon »
- En complément...
- Des liens très utiles...
Un « Favicon », mais c'est quoi ?
Vous n'y faites peut-être pas attention et pourtant ils sont bien utiles ces « favicon ».
Et leur nom même nous permet de connaître leur origine et leur destination : c'est l’icône qui apparaît dans la barre de vos favoris (bookmarks) ! Si, vous en avez car qui n'a pas déjà enregistré un site bien apprécié pour y revenir dans son navigateur ? Et, une fois n'est pas coutume, c’est Microsoft qui a inventé ce petit truc finalement bien sympa et bien utile ! Ce navigateur Internet Explorer 5 a été le premier à l'époque à vérifier la présence d'une image délibérément nommée « favico.ico » à la racine des sites internet et de forcer son utilisation pour illustrer son enregistrement dans le menu des sites favoris. A noter que l'extension de ce type de fichier en « .ico » dénote un format propriétaire et donc limité dans son champ d'application. Depuis, cet usage - cette fonctionnalité qui n'est qu'une illustration graphique - s'est largement répandue, à tel point qu'elle est aujourd'hui devenue évidente et même anodine...
Voilà, c'est clair et il n'est pas besoin de s'étendre sur la question !
Exemple de favicons dans la barre des favoris de Chrome...
Ce qui est nouveau, pour Google et les personnes qui utilisent son moteur de recherche, c'est donc de faire apparaître ces « favicons » dans la liste qui s'affiche dans ses résultats de recherche ! Attention, ce n'est pas la révolution ni même une innovation ! Dès la fin 2019, cette nouvelle astuce de présentation a été lancée pour les utilisateurs de mobile... Pourtant, cette nouveauté n'a durée que quelques jours et ces n'apparaissent plus désormais... mais ils referont sûrement prochainement leur apparition !
Les résultats de recherche en test avec « favicons » de Google...
Ce qui est étonnant, c'est le temps de retard qu'à pris Google pour mettre en place cette astuce qui à coup sûr est une avancée importante pour répondre à son obsession majeure : « l'expérience utilisateur » ! Et cela est d'autant plus étonnant que Duck Duck Go (ici...) ou Qwant (et ici...) utilisent cette astuce depuis longtemps (NB : Bing et Yahoo! sont curieusement à la traîne aussi !)... même si bien sûr on ne s'en rend plus compte alors que cet indicateur visuel est véritablement efficient. A une condition : que ce « favicon » soit vraiment visible et pertinent !
Désormais, vous ne pouvez plus y échapper !
Les résultats de recherche avec « favicons » avec Qwant et Duck Duck Go...
vous pouvez l'inclure dans les résultats de recherche Google correspondant à votre site...
Sur le site d'aide officiel de Google
Analyse du « Favicon »...
Un « Favicon », finalement, ce n'est qu'une image... Comme toutes les autres images, mais qui a bien quelques contraintes pour son usage !
Extension du fichier
Fichier image au format « .ico »
NB : Il n'existe pas de type MIME officiel pour les fichiers « .ico » mais le type« image/x-icon » est très employé et conforme au standard de formation des types MIME.
Descriptif
ICO est un format spécial pour visualiser les pictos, les libellés, les icônes dans l’interface Windows. Il comprend « deux couches » d'images bit à bit. La première est un masque carré et la deuxième est une image simplifiée affichés sur la masque. Appliqué pour relier une image avec un des fichiers de l’interface. Les utilisateurs des dispositifs avec les interfaces de Microsoft ont accès à la rédaction des fichiers ICO pour la création des icônes spéciales. Il est possible de les convertir en fichiers avec les extensions populaires JEPG et PNG. Les fichiers sont sauvegardés sous ICO aux cours des travaux graphiques sous forme des pictos, des icônes et d’autres éléments graphiques similaires. Ils sont à utiliser comme des icônes ou des logos pour personnaliser le site.
Détails techniques
L’extension « .ico » est utilisée à partir des versions initiales de l’interface Windows, tout en augmentant progressivement la taille et le nombre maximal de nuances supportées. Par exemple, les versions « 7 et supérieures » sont capable de supporter les pictos de jusqu’à 256 х 256 points en 32 bits. Afin de garantir la compatibilité avec les anciennes versions de Windows il vaut mieux se servir d’icônes à 8 bits.
Les contraintes inhérentes au format « .ico »
Oui, on est ici, comme à l'origine, sur 3 contraintes bien définies :
- Son format (extension de fichier) : cette image doit être au format « .ico »... Même si ce n'est plus une obligation...
- Sa taille : cette image est toute petite, et même minuscule et elle doit s'inscrire dans un tout petit carré qui est la zone qui la contiendra...
- Sa visibilité : en conséquence, cette image doit être vraiment visible et identifiable immédiatement pour l'utilisateur...
Il y a bien longtemps... les premiers « favicons » visibles via Internet Explorer...
Mine de rien, c'est 3 contraintes sont de véritables défis !
Mais rassurez-vous, ces contraintes sont désormais moins contraignantes !
- Depuis plusieurs années, le format « .ico » n'est plus obligatoire ni requis et peut être substituer par d'autres format d'image plus commun à la condition de le faire via une déclaration « css », chose que vous maîtrisez désormais !
- Le format de base, c'est 16 x 16 pixels : eh oui ! C'est tout petit, et cela n'a pas changé depuis son origine, et c'est bien l'une des rares choses qui n'a pas changé depuis 25 ans ! Bon, évidemment, c'est un détail, mais qui a son importance et c'est pour ça que je vous en parle ! Heureusement, là aussi, on peut passer outre est poser une image de taille supérieure !
- Par contre, la visibilité finale demeure la même : pas d'astuce pour cela car c'est une contrainte du navigateur, et des moteurs de recherche qui vont utiliser ce « favicon » ! Là, pas de secret... Enfin, si, au moins quelques conseils pour vous aider !
Astuce !
Pour savoir si votre site comporte un « Favicon » ou une image spécifique, pour pouvez le visualiser directement via les outils de votre navigateur...
Pour Firefox, faites : « Outils », « Information sur la page », puis cliquez sur l'onglet « Médias »...
Penser son « Favicon »
Puisqu'un « Favicon » n'est finalement qu'une image, et plus précisément une icône ou un pictogramme, il va falloir penser « simple » ! Voire simplissime !
En gros, votre visuel qui vous identifie est finalement ici transformée en une toute petite image et elle doit être pensée et conçue pour être visible et reconnaissable immédiatement. Pas besoin de grand discours, là, levez votre regard et regardez votre « Barre des favoris » !
Exemple de favicons ans la barre des favoris de Firefox..
Bon, il y a bien un petit texte qui explicite les « favicon » visibles là, mais pour la plupart, les plus connus, pas besoin de se poser de questions : avec Twitter, Facebook, Linkedin, Google, Flickr... C'est évident ! Par contre, pour les autres sites, on voit bien qu'il fait un peu d'inventivité...
Keep cool : on reste dans le simple, voire le simplissime... L'idée finale étant de faire un pictogramme qui pourra se remarquer parmi les autres sans avoir à forcer les choses...
Un mauvais cas ici, c'est le premier de la ligne : il s'agit du site de l'APOD (Astronomy Picture of the Day - il est là : 
A contrario, le « G » multicolore de Google est très reconnaissable, mais surtout le « f » sur fond bleu de Facebook ou le « pioupiou » bleu clair de Twitter eux sont carrément « iconiques » (dans le sens publicitaire du terme) !
Alors, c'est à nous de jouer pour faire pareil...
Par exemple, dans mon cas, j'ai plusieurs contraintes pour moi-même et pour mes clients...
Simplicité typographique
Solution de simplicité, jouer sur la typo et la couleur...
Pour les sites de vente en ligne RapidoPub (BtoC) et RapidoPrinting (BtoB), on est embêté par le nom et le sujet, comme dans la plupart des cas d'ailleurs : difficile de représenter le nom de la marque en entier... Dans ce cas ici, je choisi de prendre le « R » du logo original (font Helvetica) et le colle sur un carré vert pour le premier et gris pour le second pour les distinguer : ces éléments sont issus de la charte graphique des marques et il n'est pas nécessaire d'aller chercher plus loin...
Pour Mademazi, Kennedy Photocopie, Photos de Brest... Je procède de la même manière, avec un fond carré ou rond et en me contentant de reprendre la première lettre du nom du site ou de la marque... Wikipedia par exemple ne procède pas autrement ! On peut même parler ici de « Flat design » (forme graphique épurée et utilisant une palette de couleurs restreinte) qui reste à la mode et devient même incontournable pour les même raisons que elles qui se justifient ici...
Pour Mademazi...
Pour le groupement Colourlink...
Pour Kennedy Photocopie...
Pour l'expo Photos de Brest...
Petite variante... On peut se permettre de mettre des initiales, soit 2 ou 3 lettres, mais guère plus ! Comme par exemple pour le site du cabinet de Gestalt-Thérapie de Luc Domergue ou de Madame Corre, on reprend les initiales... C'est une petite astuce toute simple mais qui affirme toutefois l'indentité visuelle de votre site internet !
Pour le praticien Luc domergue...
Pour un hommage à Madame Corre...
Pour l'entreprise Digitec...
Pour mon site personnel...
Et petite variante complémentaire... Le fond ou le lettrage peut-être constitué par un dégradé... Comme pour Digitec ou Janine Corre Voyante... Cette astuce graphique est à mon sens bienvenue pour donner un peu de relief à l'icône !
Simplicité schématique
Pour être plus pertinent visuellement, on peut prendre une image qui ne fait qu'évoquer le sujet du site ! C'est imparable, si on ne se trompe dans le pouvoir suggestif de l'image choisie... Cas tout simple, sur le site VivaMexico.info qui parle du Mexique dans sa globalité, l'idée de prendre le drapeau mexicain était une évidence ! Malgré son visuel central original complexe (l'aigle et le serpent) qui ne peut pas être restitué ici, on conserve les 3 couleurs de la bannière et cela suffit à rendre l'effet recherché ! Pour le site Photos de Bretagne, j'aurais pu faire de même mais ce drapeau breton est graphiquement trop complexe finalement pour être bien restitué à petite échelle... J'ai choisi un autre visuel tout aussi identifiable : un triskell ! Et encore, je n'en ai pris qu'une partie qui reste elle-même tout aussi identifiable... Hé hé !
Pour Dynadoc, un site qui traite de toutes les questions concernent le travail de rédaction et de diffusion de œuvres d'écriture : un picto qui rappelle un livre...
Découvrir le Mexique avec VivaMexico.info...
Pour la galerie Photos de Bretagne...
Pour le site de conseils Dynadoc...
Simplicité iconographique
Ici, les choses sont encore plus simples... Dans ces cas, l'identité visuelle de ces marques et personnes exite déjà : on se contente alors de reprendre l'élément emblématique du logo de ces marques pour n'en retenir que l'essentiel !
Des profils superposés pour Copyroom, des évocations de pages imprimées pour l'imprimeur Artek, un tache d'encre pour évoquer l'acte d'écriture libre pour La Source des Mots... Et, encore plus évident, pour le site de mon amie Valérie Macé d' Azuré Graphique, je reprends l'un des éléments de son identité visuelle : un beau papillon que l'on nomme l'azuré !
Nota bene :
Petite déception, ces apparaissaient auparavant directement dans le barre d'adresse mais ce n'est plus le cas depuis la généralisation de la mention de connexion HTTPS et en plus maintenant avec les pictos de protection (Firefox, Chrome)... Dommage...
Créer son « Favicon »
Eh oui, il va bien falloir créer votre propre « Favicon » pour personnaliser votre site... C'est le moment de parler création graphique et des outils disponibles pour le réaliser !
Bon, rassurez-vous, pas besoin d'être directeur artistique pour réaliser cet exploit : il faut faire simple !
Ici, le « favicon » du site de France-Info.fr...
 |
 |
 |
| 16 x 16 pixels... | 32 x 32 pixels... | 48 x 48 pixels... |
On remarquera que ce « favicon » est décliné en 3 tailles, ce qui est normal...
01 - Via votre logiciel de création et de traitement d'images
PHOTOSHOP
Étonnamment, il n'est pas possible d'enregistrer des images au format « .ico » avec Photoshop... Cependant, vous pouvez télécharger le plug-in spécifique gratuit « ICOFormat.plugin » pour pouvoir réaliser cette opération !
NB : à son origine, la taille initiale du « Favicon » était de 16x16 pixels mais elle a été régulièrement revu à la hausse allant désormais jusqu'à 256x256 pixels.
Le « favicon » de ce site (auparavant utilisé par défaut, ici en 32x32 pixels)...
GIMP
Gimp, le logiciel de traitement d'image Open-Source, propose lui nativement cette fonctionnalité d'export au format « .ico »... Cool !
C'est par ici :
- slions.net/threads/create-an-ico-file-using-gimp.3/
- www.inmotionhosting.com/support/edu/website-design/gimp-favicon/
02 - Via un service de création et de traitement d'images en ligne
CANVA
Sorti 2012, Canva s'est rapidement imposé comme la référence de création graphique ! Il propose des visuels en tant que modèles pour permettre aux utilisateurs de les personnaliser grâce à certains outils. Sa force : une large gamme de graphiques et visuels prêt à l'emploi. Seule contrainte : se créer un compte...
PICOZU
Sorti début 2013, Picozu est un site internet vous proposant un éditeur d'images totalement gratuit, et en ligne. Vous n'avez rien à télécharger et vous pouvez retoucher vos images comme si vous aviez entre les mains un logiciel professionnel !
03 - Via des services de conversion de format d'images en ligne
L'autre possibilité est de réaliser le conversion de votre fichier image via un service en ligne (connexion internet indispensable...)
Il existe plusieurs sites pour ce faire dont notamment convertio.co, onlineconvertfree.com ou https://image.online-convert.com/fr/convertir-en-ico
« Convertio » : Convertisseur de fichier en ligne...
Chargement du fichier...
Conversion du fichier...
Récupération du fichier...
Convertissez au format « .ico » en utilisant des sites gratuits tels que :
- www.favicongenerator.com
- www.htmlkit.com/services/favicon
- convertio.co
- onlineconvertfree.com
- image.online-convert.com/fr/convertir-en-ico
Ou en utilisant des outils très basique sur des sites gratuits tels que :
Nota bene : Je recommande ces solutions qui sont très pratiques, rapides et efficience car elles génère de véritable fichier « .ico » qui par nature « encapsule » plusieurs fichiers en 1 pour une inter-opérabilité maximale (par ex. : onlineconvertfree.com génère à la volée 9 images de tailles standardisée différentes 16x16, 32x32px...) ! Ce qui peut amener à un poids de fichier assez lourd mais votre navigateur n'utilisera que la versionadéquate... Pour vous en rendre compte, ouvrez par exemple ce fichier via Aperçu de Mac pour vous en rendre compte...)
04 - Et les alternatives...
Et pour les fainéants, il vous suffit d'en trouver un directement en ligne... en faisant une recherche simple dans votre moteur de recherche d'image préféré...« .ico »... et en prenant soin de prendre une image relativement anodine pour éviter un plagiat/piratage trop voyant ! Vous avez le choix ici par exemple...
Ou en vous servant d'un service de génération automatique assez bluffant comme Logaster.fr !
05 - Mon site recommandé !
Pour les vrais fainéants, il y a une solution - parmi d'autres - que je vous recommance « Iconifier » : iconifier.net
Là, à partir de votre image destinée à devenir votre « favicon.ico » et votres « icône Apple Touch », (cf. ci-dessous...), vous n'avez que 2 clicsà effectuer pour obtenir un résultat très satisfaisant !
Le résultats des icônes générées par « Iconifier »...
Comme vous pouvez le voir, la belle mécanique de ce convertisseur automatique vous proposera plusieurs versions de votre ciône dédié... Inutile de toutes les utiliser... Par contre, le petit fichier texte fourni dans le ZIP à télécharger contient les instructions et le code à utiliser sur votre site. Manque seulement la version à 192x192 pixels !
Note Bene : Vous ne devez télécharger que le fichier ZIP pour récupérer toutes les images...
Mettre en œuvre votre « Favicon »
Puisqu'il s'agit d'un élément faisant partie de votre site web, il faut bien le déclarer sur vos pages d'une manière ou d'une autre...
Un petit bout de code...
Pour cela, une petite ligne de code HTML est à insérer dans l'en-tête de votre page, parmi les balises <head>...
Auparavant, vous avez déjà créé pour fichier « favicon.ico » et vous l'avez placé sur votre serveur hébergeant votre site, de préférence à la racine de votre site (mais il peut être placé ailleurs en fonction de vos préférences...).
Comme on l'a dit, par défaut et par habitude depuis cette invention de Microsoft, la petite déclaration qui est en fait un lien pointant vers ce « favicon » :
<link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
Et cela suffit !
Et des possibilités avancées...
On peut dépasser cette manière de procéder traditionnelle en forçant le navigateur à employer une image alternative au format qui vous convient mieux... Là aussi, ce sera une déclaration à rajouter dans l'en-tête de votre page entre les balises <head>...</head>...
Par exemple, pour une version au format PNG :
<link rel="icon" type="image/png" href="/favicon.png">
Du coup, cette nouvelle manière de procéder nous permet de nous affranchir du format propriétaire « .ico » et de définir un format qui nous convient !
Oui, l'utilisation de l’entête "type" a permis d'étendre aux autres formats d'images tel que tout d'abord le GIF (lui aussi auparavant un format propriétaire... et rapidement déconseillé...) , puis le PNG (8 puis 24 bits qui s'est lui rapidement imposé dans les années 2000) ou le plus connu JPG (même s'il s'y prête moins du fait de la dégradation possible due à sa nature) et même aujourd’hui le format vectoriel SVG très tendance depuis quelques années pour sa souplesse d'utilisation et son meilleur rendu esthétique sur les écrans de haute résolution...
Le nouveau « favicon » de ce site désormais au format SVG
Plus grand, plus beau, plus net... Et pour seulement 2 ko !
Ce qui est donc déclaré ainsi via une image au format SVG :
<link type="image/svg+xml" href="/images/webmaster-bretagne-favicon.svg" rel="shortcut icon" />
Et les « favicons » animés ?
Oui, un « favicon » peut-être contruit via un Gif animé ! C'est un truc que l'on peut encore voir de nos jours et l'on sait le regain d'intérêt pour ce format d'images animées qui fit le bonheur des premières heures d'Internet... et aussi beaucoup de ravages ! Cette option du Gif animé est cependant à mettre en œuvre avec précaution (exemple à éviter : 
A créer via les outils dédiés comme Photoshop, Gimp ou autre, ou en ligne directement via Giphy.com voire à télécharger dans des bibliothèques existantes !
Le secret : ne pas faire tourner l'animation en boucle ininterrompue mais mettre un délai assez long avant de relancer l'animation...
Finalement, le « favicon » est comme l'émoji qui identifie votre site internet !
Erwan Corre
En complément...
« Icône Apple Touch »
Puisque vous avez désormais votre magnifique « favicon », vous pouvez aussi l'utiliser pour un autre but devenu très répandu : l'« Icône Apple Touch » !
Il s'agit donc d'une petite image similaire au Favicon et qui est utilisée pour l'icône d'une page Web sur l'iPhone, l'iPod Touch et l'iPad d'Apple... Lorsque quelqu'un met votre page Web en« favori » (ou « signet ») ou ajoute votre page Web à son écran d'accueil (cool !), c'est cette image est sera utilisée pour vous représenter, comme un « alias » ou « raccourci ». Bien évidemment, là aussi il s'agit d'un format propriétaire même s'il peut être reconnu par d'autres plateformes...
Attention : si ce fichier n'est pas trouvé par l'appareil Apple, c'est une capture d'écran de la page Web qui sera générée comme « icône Apple Touch » et qui reste donc assez aléatoire voire parfois qui se résume à un carré blanc...
Nota Bene :
- Lorsque ce fichier est utilisé, par défaut, le produit Apple lui donnera automatiquement des bords arrondis comme les pour les autres bouton des applications déjà installées.
- Du fait de ces coin arrondis des « icône Apple Touch », il est parfois préférable de ne pas inclure votre visuel dans un cercle au risque de constater un effet de contraste malheureux...
- Au fil du temps, la taille du fichier a elle aussi évoluée... Nous partions avec les premiers iPhone avec une résolution de 57x57 pixels, puis qui a progressée au fur et à mesure de l'amélioration de la qualité des écrans (résolution ou densité de pixels) puis à 114x114, 144x144... Aujourd'hui 180x180 pixels est la taille la plus répandue même si on peut monter à 192x192 pixels !
Exemple d'écran d'accueil d'un « iPhone » avec ses icônes d'accès
Dans cas, comme pour le « favicon », c'est à vous de créer cette icône avec un préférence pour un format de fichier PNG (24 bits). En ensuite, soit de la placer manuellement dans l'arborescence de votre site sur votre serveur web, soit dans le cas de CMS d'utiliser les fonctions native de l'interface d'administration pour l'installer...
Ce qui donne comme résultat dans votre code-source quelque chose comme ceci :
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />
<link rel="apple-touch-icon" sizes="192x192" href="/apple-touch-icon-192x192.png" />
Il vous faut un « favicon » pour votre site internet !
Erwan Corre
Des liens très utiles
Des conseils :
Sur le site d'aide officiel de Google : « Définir un favicon à afficher dans les résultats de recherche »
Sur le site de référence Webrankinfo : « Favicon dans les SERP Google »
Des conseils sur Codeur.com : « Favicon dans les SERP Google : Le guide pour optimiser vos pages »
Des utilitaires :
Convertisseur de format d'images : convertio.co / onlineconvertfree.com
Un générateur universel à la volée de « favicon » et d'« icône Apple Touch » : iconifier.net
Vérifier l'existence et l'apparence de votre « favicon » sur votre site : realfavicongenerator.net
Un service de génération automatique de logo et de « favicon » très bluffant : logaster.fr
erwan-corre.com
