Notre site n'a pas de favicon… Ce n'est pas un grave problème, mais ça m'enquiquine
En théorie, en ajouter une n'est pas particulièrement difficile, juste un peu fastidieux, sauf que :
- Les tâches inutilement fastidieuses m'horripilent
- J'ai une difficulté supplémentaire, lié à la gestion des images par Git
Gérer les images et le versioning
Git n'est pas du tout fait pour gérer le versioning des images : les images versionnées ont tendance à faire "gonfler" le poids du dossier caché où git enregistre les modifications, au point où cela peut rendre difficile de mettre à jour son repository ou de le télécharger sur une nouvelle machine.
Information
Git et le versioning des médias
je n'entrerai pas dans les détails mais en gros Git ne sait lire que le "texte" et ne sait pas quoi identifier les modifications dans les fichiers "non texte" (comme les images, les vidéos, etc.).
À cause de cette "incapacité" à comprendre les fichiers médias, Git va avoir tendance à "enregistrer" l'intégralité du fichier à chaque itération sur le fichier.
J'ai donc suivi la recommandation habituelle et j'ai ignoré mon dossier img dans Git… sauf que du coup impossible de garder un dossier d'image synchronisé entre Myriam et moi !
Comme je n'ai pas envie d'avoir à transférer manuellement les images que nous utilisons entre nos ordinateurs à coup de clefs USB (On est plus en 2007) ou de travailler "à l'aveugle" en local en croisant les doigts pour que ça marche en production, il faut que je trouve une solution…
J'y avais un peu réfléchi en début de projet et je pense pouvoir m'en sortir grâce à ce qu'on appelle des liens symboliques(S'ouvre dans un nouvelle fenêtre) ou symlink. Cette sorte de super raccourci devrait me permettre de créer un dossier partagé avec Myriam[1] et de retrouver les fichiers ainsi partagés dans l'arborescence de mon projet, à disposition d'Eleventy
La manipulation est assez simple. Il me suffit juste de récupérer le chemin du dossier d'image partagé et celui de la racine du projet. Ensuite j'ai simplement à saisir la commande suivante dans le terminal :
ln -s "<chemin du dossier partagé>" "<chemin du projet>/_src/img/"Avertissement
Limitations de cette approche
Il y a quand même quelques limitations à cette approche :
- Une étape de plus dans l'initialisation du projet (que j'ai heureusement documenté)
- Dépendance à une arborescence tierce. Si je déplace ou renomme le dossier partagé, le lien sera cassé (je ne sais pas quel impact cela pourrait avoir sur le projet)
- La plupart des services de synchronisation ne conservent pas les fichiers en local et se contente d'en conserver une "image", ne re-téléchargeant le fichier que lorsqu'on tente d'y accéder… depuis l'explorateur de fichier !
💡 Pour palier au problème de synchronisation, j'ai choisi un service qui propose une option forçant un dossier et son contenu à toujours rester présent sur la machine locale[2]
Je peux maintenant ajouter mes favicon sur ma machine, tout en m'assurant que Myriam les retrouvera sur la sienne (une fois qu'elle aura fait la même manipulation). Et ce qui vaut pour les favicon vaut aussi pour d'autres sortes d'images…
Astuce
Presque prêt pour des images responsives
Il ne me manque plus que deux mécanismes à intégrer afin de pouvoir ajouter des images en toute sérénité dans mes articles :
- une brique technique redimensionnant automatiquement mes images à différentes tailles
- un plugin markdown, une balise Liquid ou un transformer Eleventy permettant d'ajouter automatiquement le code nécessaire pour servir différentes images en fonction de la résolution de l'écran.
Ce sera un sujet pour un autre jour…
Générer les différents formats de favicon
Pour ma première implémentation, je me suis renseigné et j'ai généré toutes les tailles et formats d'images jugés nécessaire pour une favicon sauf… le format .ico
Car oui, contre toute attente, en 2026, la plupart des logiciels de créations, même ceux d'Adobe, ne savent pas simplement exporter un fichier à ce format ancestral…
Je m'en suis sorti grâce au service Real Favicon Generator(Opens in a new window) mais avoir à passer mon favicon à travers une moulinette à chaque itération puis récupérer les fichiers qui m’intéressent n'est pas vraiment une façon de travailler qui me convient.
Je vais donc regarder du côté de la communauté Eleventy, et là j'apprends :
- Qu'aujourd'hui on a besoin de moitié moins de formats différents[3] (mais toujours le .ico, malheureusement)
- Que des plugins prenant en charge génération et l'insertion des différents formats existaient pour Eleventy
💡 Ces plugins se basent sur la bibliothèque favicons(Opens in a new window)
J'opte pour le plus récent (2022) de ces plugins : eleventy-plugin-gen-favicons(Opens in a new window)
Avertissement
Mettre le fichier favicon.ico à la racine
En me renseignant j'ai appris que certains systèmes, comme les agrégateurs de flux RSS[4], vont directement chercher le fichier favicon.ico à la racine du site, sans consulter le HTML des pages à la recherche d'un autre emplacement. Il est donc important que je fasse en sorte de placer ce fichier là à la racine.
L'avantage de cette approche, c'est que je n'ai plus à générer et déposer (dans le dossier image partagées) toutes les déclinaisons de ma favicon : Je peux simplement récupérer la version SVG et laisser le plugin générer les déclinaisons nécessaires. Et comme il s'agit d'un SVG, je peux me permettre de le versionner sans risque donc plus d'obligation de le déposer dans le dossier partagé. (Bon, ça rend mon bricolage précédent un peu inutile… pour l'instant)
L’inconvénient (mineur), c'est que, avec ce script, pour avoir le format .ico à la racine, je suis obligé de placer tous les autres déclinaisons à la racine aussi. Ce n'est pas un grave problème, mais je n'aime pas trop avoir des fichiers qui "traînent" à la racine. J'aime avoir mes dossiers bien rangés 🤓
Un autre point que je n'aime pas trop, c'est que je ne peux pas ajuster les noms des favicons (je préférerais que tous les fichiers aient pour préfixe "favicon" afin qu'ils restent bien "rangés" ensemble à la racine…) mais bon… ce n'est pas dramatique non plus.
Le service utilisé importe peu, que ce soit OneDrive, Dropbox, iCloud ou autre, l'important est qu'il permette d'avoir un dossier et son contenu présents physiquement dans le système de fichier de nos machines locales et de les maintenir synchronisés automatiquement. ↩︎
C'est une fonctionnalité assez courante aujourd'hui ↩︎
Grâce à l'abandon ou l'évolution des navigateurs qui exigeaient ces formats. ↩︎
Je n'ai pas encore intégré de flux RSS mais il parait que c'est finalement encore assez utilisés, donc peut-être finirais-je par l'implémenter (et dans ce cas-là autant s'y préparer) ↩︎