Faviconほどめんどいものはない

別にジェネレーターで作ればすぐ作れるんだけど、ジェネレートされたアイコンの中でどれが要なのか不要なのかが時代で変わるから、めんどいなって思ってる。

いつものアレで生成

いつものアレ(=Favicon Generator for perfect icons)を使って生成する。

Favicon Generator for perfect icons on all browsers https://realfavicongenerator.net/

いつもありがとう、君とありえーる。

ダークモード対応もせにゃ・・と思ったらFavicon Generator for perfect iconsページにこんなののリンクができてた。 SVG Favicon Generator with dark mode support https://realfavicongenerator.net/svg-favicon/

早速使ってみたけど、ぶっ壊れたSVGができた

• svgをsvgでくるんでいる
• styleが外側のsvgについているから効かない
• styleで指定できるのがfilterで色反転、くらい（俺はfillを白くするだけでいいんだぜ・・・）

というわけで使えなかった。中の人、ツールのブラッシュアップ頑張ってね・・・！

ダークモード対応するものの

こういうmediaで出し分けするやつ。

https://www.30secondsofcode.org/css/s/responsive-favicon-dark-mode/

ユーザー環境のモード変更時、即時では変更されない。 ChatGTP氏に聞いたらfaviconの描画はonload時に調整されるだけらしい。

Favicon内のcssのdark/light modeについてブラウザタブでの切り替えタイミングは、ロード時だけですか

通常、Favicon内のCSSはロード時にのみ適用されます。ブラウザタブのダークモードやライトモードの切り替えには、ページ全体のCSSが再適用されることがありますが、Favicon内のCSSはそのタイミングで再適用されることはありません。

Faviconはブラウザタブに表示される小さなアイコンであり、通常はページのロード時に一度だけ読み込まれます。そのため、Favicon内のスタイルはロード時にブラウザに適用され、その後変更されることはありません。

したがって、ブラウザのダークモードやライトモードの切り替えは、Faviconには影響を与えません。ダークモードやライトモードに対応したFaviconを使用したい場合は、ページ全体のCSSにそのロジックを組み込む必要があります。

そのあとcss variableで即時変更出来るか試したけどなんかならなかった。JS使うほどじゃないのでまぁいいかとSVGインラインに戻す。

また時間できたら調べよ