Create favicons

create-favicons.md

Create favicons

Following https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

Create svg

Open your SVG file in a text editor. Find a with a dark or missing fill. Add a CSS media query that will trigger on theme changes and change fill to the colors you want:

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <style>
    @media (prefers-color-scheme: dark) {
    .a { fill: #f0f0f0 }
    }
  </style>
  <path fill="#0f0f0f" d="…" />
  <path class="a" fill="#0f0f0f" d="…" />
 </svg>

Create the rest of the icons

inkscape ./icon.svg --export-width=32 --export-filename="./tmp.png"
convert ./tmp.png ./favicon.ico
rm ./tmp.png
convert ./icon-32.png ./icon-16.png ./favicon.ico
inkscape --export-type="png" --export-width=512 --export-filename="./icon-512.png" ./icon.svg
inkscape --export-type="png" --export-width=192 --export-filename="./icon-192.png" ./icon.svg
npx svgo --multipass icon.svg
convert icon-512.png -resize 140x140 -background none -gravity center -extent 180x180 apple-touch-icon.png
touch manifest.webmanifest
cat <<EOL > manifest.webmanifest
{
  "name": "My website",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}
EOL

Link them to your html

<title>My website</title>
<link rel="manifest" href="/manifest.webmanifest">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">