webサイトやwebサービスでタブとかに表示される favicon 。favicon もダークモード対応ができるらしいのでやってみたのメモ
favicon を SVG にする
昔から .ico
みたいなファイル作ってたけど、最近では SVG もサポートされているらしい。SVG は内部にスタイルシートを持てるのでダークモード用のメディアクエリを埋め込んでしまえばダークモード対応された favicon になるみたい。簡単だ…
HTML の <head>
内の favicon の指定を SVG にする
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
type="image/svg+xml"
で指定する
SVG 内にダークモード対応の CSS を追加する
ダークモード用のスタイルは prefers-color-scheme: dark
というメディアクエリ内に記述すれば OK
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <style> .bg { fill: white; } .icon { fill: #323333; } @media (prefers-color-scheme: dark) { .bg { fill: #323333; } .icon { fill: white; } } </style> <path class="bg" d="M15 16H1C0.45 16 0 … 15 16Z" fill="white"/> <path class="icon" d="M5.92 11.67L5 … 65L6.92 7.09Z" fill="323333"/> </svg>
これで Chrome でタブを開いた状態で dark mode / light mode を切り替えると favicon の色が切り替わるようになりました!
₍ ᐢ. ̫ .ᐢ ₎ やったね!!
Safari で favicon が表示されない問題
2022年9月時点で Safari は SVG favicon がサポートされてないらしい… なんでや….
cf. SVG favicons | Can I use... Support tables for HTML5, CSS3, etc
png の favicon を併記したら Safari でも favicon が表示された
<head> <link rel="icon" type="image/png" href="/favicon.png"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> </head>
どうやら対応してない <link>
は無視してくれるっぽい
Safari では favicon.png
が表示され、Chrome では favicon.svg
が表示された
⚠ SVG を後にしないと Chrome でも png のアイコンが表示されるので注意
⚠ .ico
な favicon を併記すると SVG の favicon が効かなくなる
.ico
なファイルで favicon を指定していると SVG が表示されなくなった
<head> <link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> </head>
どちらの指定を先にしても Chrome で favicon.svg
が無視され favicon.ico
が表示されるようになってしまいました…
追記: favicon.ico
に sizes="any"
を付ければ SVG が優先されるようになる
SVGよりもICOファイルが優先されるChromeのバグに対応するには、.icoファイルのにsizes="any"を記述します。
cf. 2023年版、HTMLによるファビコン設定方法、さまざまなブラウザやデバイスに対応させる最小限のセットは6種類のファイルが必要 | コリス
次のように書き換えれば OK!
<head> - <link rel="icon" href="/favicon.ico"> + <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> </head>
終えてみて
Chrome でダークモード対応した favicon を作るのは思った以上に簡単だった
Safari 対応が結構罠。Safari SVG favicons 対応してほしい…
モバイルでブックマークした際の apple-touch-icon
, manifest.json
に関しては今回スコープ外として省略しているので、モバイルブラウザでまだ罠がありそうな気もします…
おわり
[参考]