138 lines
3.3 KiB
Markdown
138 lines
3.3 KiB
Markdown
---
|
||
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"
|
||
>
|
||
█
|
||
</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: -->
|