From bc150a7a4462bec7ac8cca3aede7a3a146fd0af1 Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Fri, 3 Apr 2026 14:48:49 +0200 Subject: [PATCH] =?UTF-8?q?Article=20du=2003/04/2026=C2=A0:=20favicon.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/blog/2026/04/03/_index.md | 5 ++ content/blog/2026/04/03/favicon.md | 137 +++++++++++++++++++++++++++++ content/blog/2026/04/_index.md | 8 ++ 3 files changed, 150 insertions(+) create mode 100644 content/blog/2026/04/03/_index.md create mode 100644 content/blog/2026/04/03/favicon.md create mode 100644 content/blog/2026/04/_index.md diff --git a/content/blog/2026/04/03/_index.md b/content/blog/2026/04/03/_index.md new file mode 100644 index 0000000..b465a09 --- /dev/null +++ b/content/blog/2026/04/03/_index.md @@ -0,0 +1,5 @@ +--- +title: 3 Avril 2026 +linkTitle: "03" +--- + diff --git a/content/blog/2026/04/03/favicon.md b/content/blog/2026/04/03/favicon.md new file mode 100644 index 0000000..d86da9d --- /dev/null +++ b/content/blog/2026/04/03/favicon.md @@ -0,0 +1,137 @@ +--- +date: 2026-04-03T13:34:39+02:00 +draft: false +author: Alexis Lahouze +title: Favicon +linkTitle: favicon +tags: + - général + - favicon + - svg +--- + +Parce que je trouvais que ça faisait vide, mon onglet sans icône. + + + +Donc j'ai créé un favicon. + +## Réalisation + +J'ai commencé par un SVG. Pour tout vous dire, j'ai demandé à PicoClaw de m'en +générer une à partir de mon site et du style Gruvbox Dark Hard. + +Ça m'a permis d'avoir un premier jet, et une idée de base. + +J'ai repris ça à la main, pour avoir un SVG, simple, final : + +```svg + + + + + + + $ + + + whoami + + + + + alexis + + + + + $ + + + █ + + +``` + +L'idée, c'était de rester dans la sémantique du shell, et d'avoir mon prénom +retourné par la commande `whomai`. Et le curseur qui s'affiche juste après le +second prompt. + +## Conversion + +À partir de ce SVG, j'ai effectué une conversion en PNG, taille 256x256, avec la +commande `rsvg-convert` du paquet `librsvg2-bin` : + +```sh +rsvg-convert favicon.svg -w 256 -h 256 -o assets/favicon.png +``` + +J'ai choisi 256 parce que c'est la plus grande taille "standard". + +## Intégration avec Hugo + +Ensuite, pour intégrer tout ça dans Hugo, c'est assez simple. J'ai édité le +partial `head.html` pour rajouter les balises `link` : + +```go-html-template +{{ with resources.Get "favicon.png" }} + {{ with .Resize "180x" }} + + {{ end }} + + {{ $res := . }} + {{ range (slice "256" "128" "96" "64" "48" "32" "16") }} + {{ with $res.Resize (print . "x") }} + + {{ end }} + {{ end }} +{{ end }} +``` + +L'idée est simple. Je génère d'abord l'icone pour Apple, parce qu'ils ne sont +visiblement pas capables d'utiliser les standards. + +Ensuite, je génère plusieurs tailles, parce que pourquoi pas ? C'est facile à +gérer avec un `range` en template Hugo alors autant le faire, le navigateur se +gèrera. + +## Épilogue + +C'est assez simple à mettre en place. + +Peut-être que je modifierai l'icône, parce qu'elle n'est pas hyper lisible dans +l'onglet, mais bon, c'est déjà un début. + +Aussi, je n'ai pas scripté la génération des .png depuis le .svg, faudrait que +je le fasse, on verra au moment où je changerai le .svg, parce que ça implique +de rajouter le paquet `librsvg2-bin` dans la procédure de build, rien de bien +compliqué mais bon, faut faire. + +Aller, à très vite ! + + diff --git a/content/blog/2026/04/_index.md b/content/blog/2026/04/_index.md new file mode 100644 index 0000000..33591de --- /dev/null +++ b/content/blog/2026/04/_index.md @@ -0,0 +1,8 @@ +--- +title: "Avril 2026" +linkTitle: "04" +--- + +Cette page liste les articles d'Avril 2026. Du plus récent au plus ancien. + +