---
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: -->