alexis.lahouze.org/content/blog/2026/04/03/favicon.md

date, draft, author, title, linkTitle, tags

date	draft	author	title	linkTitle	tags
2026-04-03T13:34:39+02:00	false	Alexis Lahouze	Favicon	favicon	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
  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 :

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 :

{{ 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 !