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インラインに戻す。

また時間できたら調べよ

[2024.10.28追記=====]

SVG Favicon Generator with dark mode support https://realfavicongenerator.net/svg-favicon/

これ、無くなってるみたいで、ドメインルートにリダイレクトされたw

かわりに標準機能側でsvgもアセットとして吐き出されるようになったみたい。

ただし、生成されたSVGの中身を見るとちょっと注意が必要そうで、中はパス情報じゃなくてBase64エンコードされたjpgが読み込まれているようで・・・オオィッってつっこみそうになった。

わざわざSVG化・・・してくれたんやな・・・乙です。

利用する側の注意点としてはちょっととはいえ、ファイルサイズが普通にjpg読むよりアップするのと、コードがちゃんと読み込めるURIになっているかのチェックを事前にしたほうが安心なので、確認必要かも・・・という感じかと。

（私はsvgファビコンに強いこだわりはないので今回は使わないと思う）

以上、追記でした〜。

[2024.10.28追記ここまで]

[2024.11.14追記=====]

中はパス情報じゃなくてBase64エンコードされたjpg

わたしが難色を示していたSVGファビコンのコレですが、割と世間的には受け入れられているよう？で・・・
とりあえず今度使ってみようと思う。 [2024.11.14追記ここまで]