Dans cette vidéo, on parle d'icônes de favoris (favicons). Je vous explique pourquoi elles sont utilisées et comment les ajouter facilement à vos pages Web.

Regarder la vidéo sur YouTube

Si vous ne pouvez pas regarder la vidéo, un compte rendu est proposé plus bas.

Résumé de la vidéo

Dans une vidéo précédente, j'ai parlé de la structure des pages HTML et on a notamment vu qu'il était possible de rajouter des en-têtes pour apporter des informations supplémentaires aux pages. On peut, par exemple, ajouter des icônes de favoris qu'on appelle en anglais favicon.

Favicon.ico

Historiquement, cette icône de favoris était affichée, comme le nom l'indique, lorsque l'utilisateur mettait la page dans ses favoris.

Pour rajouter cette icône, on devait simplement ajouter une icône nommée favicon.ico à la racine de son site pour permettre au navigateur de la trouver.

Encore aujourd'hui, les navigateurs essayent de récupérer cette icône de favoris, même si aucun en-tête n'est ajoutée à la page.

Pour vous le prouver, on peut créer la page Web suivante :

<html>
  <head></head>
  <body></body>
</html>

On peut ensuite charger cette page dans le navigateur, en utilisant un serveur Web comme http-server, et inspecter les requêtes envoyées dans les outils de développement.

On remarque que deux requêtes sont effectuées : une première pour récupérer le contenu de la page HTML et une seconde pour récupérer l'icône de favoris /favicon.ico.

Cela veut dire que vous pourriez très bien ne rien faire, c'est-à-dire ne pas ajouter d'en-têtes spécifiques à vos pages, et simplement ajouter votre image de favoris favicon.ico à la racine de votre site pour qu'une icône s'affiche sur votre page.

Au passage, l'extension .ico du fichier de l'icône est simplement un conteneur d'images. Votre logo peut donc être converti facilement dans ce format en utilisant un logiciel de retouche d'images comme GIMP ou un convertisseur en ligne.

Favicons 2.0

Aujourd'hui, les icônes de favoris ne sont plus réservées aux favoris et sont utilisées à plein d'endroits différents :

  • dans l'onglet du navigateur, à côté du titre de la page, lorsque l'utilisateur visite votre page ;
  • dans les résultats de recherche, à côté de l'adresse de la page ;
  • dans les systèmes d'exploitation, si l'utilisateur ajoute un raccourci vers votre site ;

Dans chacun de ces cas, des images différentes peuvent être demandées.

Bien sûr, on n'est pas obligés de proposer des icônes pour tous les scénarios et pour tous les appareils, mais si on souhaite le faire, on devrait étudier les exigences de tous les fabricants et y répondre.

Beaucoup de fabricants et d'éditeurs souhaitent notamment avoir un formalisme et un format d'image spécifique, car il n'y a pas un foncitonnement universel comme peut l'être favicon.ico. Il peut donc être très vite compliqué de s'en sortir parmi les dizaines d'icônes à créer.

Pour créer facilement toutes ces icônes, on peut utiliser gratuitement certains sites spécialisés, car s'il peut être intéressant d'étudier en détail certains aspects du Web, il est probablement pas nécessaire de passer des heures à étudier des icônes de favoris.

Créer facilement toutes les icônes de favoris

J'utilise personnellement le site qui s'appelle RealFaviconGenerator.net.

Le site a l'avantage d'être gratuit et très facile à utiliser. Il permet de personnaliser entièrement les icônes pour répondre à tous les cas et proposer une expérience correcte à tous les utilisateurs, qu'ils soient sur iOS, Android, Windows ou MacOS.

Tester les favicons de son site

Une fois les icônes de favoris installées sur vos pages Web, vous pouvez tester votre site en utilisant un outil en ligne, comme celui que propose ce même site : Tester les icônes de son site.

Pour aller plus loin

Si vous souhaitez comprendre pourquoi telle ou telle icône est utilisée, vous pouvez lire les spécifications des éditeurs ou lire le très bon compte rendu du site RealFaviconGenerator.net présent dans leur FAQ.