Article du 03/04/2026 : favicon.

2026-04-03 14:51:29 +02:00
parent 2d2da86f6a
commit bc150a7a44
3 changed files with 150 additions and 0 deletions
@@ -0,0 +1,5 @@
+---
+title: 3 Avril 2026
+linkTitle: "03"
+---
+
@@ -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.
+
+<!--more-->
+
+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
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32" width="32" height="32"
+>
+  <!-- Background -->
+  <rect width="32" height="32" rx="2" ry="2" fill="#1d2021"/>
+
+  <!-- Prompt -->
+  <text
+    x="1" y="8"
+    font-family="IosevkaTermSS04 Nerd Font Mono" font-size="8"
+    fill="#d79921"
+  >
+    $
+  </text>
+  <text
+    x="9" y="8"
+    font-family="IosevkaTermSS04 Nerd Font Mono" font-size="8"
+    fill="#b8bb26"
+  >
+    whoami
+  </text>
+
+  <!-- Command result -->
+  <text
+    x="1" y="17"
+    font-family="IosevkaTermSS04 Nerd Font Mono" font-size="8"
+    fill="#fabd2f"
+  >
+    alexis
+  </text>
+
+  <!-- New prompt, with cursor -->
+  <text
+    x="1" y="26"
+    font-family="IosevkaTermSS04 Nerd Font Mono" font-size="8"
+    fill="#d79921"
+  >
+    $
+  </text>
+  <text
+    x="9" y="26"
+    font-family="IosevkaTermSS04 Nerd Font Mono" font-size="8"
+    fill="#ebdbb2"
+  >
+    &#9608;
+  </text>
+</svg>
+```
+
+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" }}
+    <link rel="apple-touch-icon"
+      sizes="{{ .Width }}x{{ .Height }}" href="{{ .RelPermalink }}">
+  {{ end }}
+
+  {{ $res := . }}
+  {{ range (slice "256" "128" "96" "64" "48" "32" "16") }}
+    {{ with $res.Resize (print . "x") }}
+      <link rel="icon" type="image/png"
+        sizes="{{ .Width }}x{{ .Height }}" href="{{ .RelPermalink }}">
+    {{ 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 !
+
+<!-- vim: set tw=80 ts=2 sw=2 sts=2 spelllang=fr: -->
@@ -0,0 +1,8 @@
+---
+title: "Avril 2026"
+linkTitle: "04"
+---
+
+Cette page liste les articles d'Avril 2026. Du plus récent au plus ancien.
+
+<!-- vim: set tw=80 ts=4 sw=4 sts=4 spelllang=fr :-->