favicon

<link rel="icon" href="favicon.ico" type="image/ico" />
<link rel="icon" href="favicon.svg" type="image/svg+xml" />

<!--
Classic
-->
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
<link rel="shortcut icon" href="/icons/favicon.ico" />

<!-- iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
<link rel="icon" href="favicon.ico" type="image/ico" />
<link rel="icon" href="favicon.svg" type="image/svg+xml" />

<!--
Android Chrome 192x192 PNG
https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/icons/site.webmanifest" />

<!--
Edge & IE 12
-->
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-config" content="/icons/browserconfig.xml" />

#convert favicon.svg -resize 64 favicon.png
convert favicon.svg -define icon:auto-resize=64,48,32,16 favicon.ico

brew install librsvg
rsvg-convert -h 128 -w 128 --keep-aspect-ratio --background-color=none favicon.svg > favicon.png
cp favicon.png in.png
convert in.png -gravity center -background transparent -extent 128x128 favicon.png
oxipng -o max -i 0 --strip safe *.png

<svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      fill: green;
    }
    @media (prefers-color-scheme: dark) {
      rect {
        fill: red;
      }
    }
  </style>
  <rect width="50" height="50" rx="5" />
</svg>

<head>
  <link rel="icon" href="a.png" id="light-scheme-icon" />
  <link rel="icon" href="b.png" id="dark-scheme-icon" />
</head>
<script>
  matcher = window.matchMedia('(prefers-color-scheme: dark)');
  matcher.addListener(onUpdate);
  onUpdate();

  lightSchemeIcon = document.querySelector('link#light-scheme-icon');
  darkSchemeIcon = document.querySelector('link#dark-scheme-icon');

  function onUpdate() {
    if (matcher.matches) {
      lightSchemeIcon.remove();
      document.head.append(darkSchemeIcon);
    } else {
      document.head.append(lightSchemeIcon);
      darkSchemeIcon.remove();
    }
  }
</script>

https://www.google.com/s2/favicons?domain=wener.me&sz=256
https://icons.duckduckgo.com/ip3/wener.me.ico
https://icon.horse/icon/wener.me
https://favicongrabber.com/api/grab/wener.me