favicon

建议一个大的 png + svg 即可
- png 推荐 128+
favicon.ico 是未压缩 bitmap - 比较大 - 建议做 16x16
参考
- real favicon generator
  - 生成工具
- Favicon Standard - 2021 - svg, ico, png and dimensions?
- wikipedia favicon
- favicon-cheat-sheet
- We analyzed 425k favicons HN

<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

dark

svg style 控制

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

js 控制

<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://catalin.red/svg-favicon-light-dark-theme/

favicon

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

https://favicongrabber.com/api/grab/wener.me
- https://github.com/antongunov/favicongrabber.com
pomdtr/fetch-favicon
BlackGlory/parse-favicon
- Parse HTML to get icon
mat/besticon

dark​

favicon​

dark

favicon