かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

favicon をダークモード対応したい

HTML Design Tips Safari

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 がサポートされてないらしい… なんでや….
SVG favicons - Can I use
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 に関しては今回スコープ外として省略しているので、モバイルブラウザでまだ罠がありそうな気もします…

おわり

[参考]

ICONISM 世界のアイコン・ピクトグラムのデザイン

ICONISM 世界のアイコン・ピクトグラムのデザイン

  • パイインターナショナル
Amazon

わかりやすく情報を伝えるための図とデザイン

わかりやすく情報を伝えるための図とデザイン

  • パイインターナショナル
Amazon