favicon（ファビコン）てなに？

みんなだいすき、ブラウザのタブの妖精、この小さいアイコンたちです。

サイトに設定されているファビコンをチェックするには Chrome だと Favicon Detector 拡張を使うと便利。ぜひインストールしていろんなサイトを見てみてくださいね！

こちらは Spotify のファビコンを Favicon Detector 拡張でチェックした例です。

ところでファビコン、こんなにいる？

つらつらと…長い…全部いるのこれ？

<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" sizes="512x512" href="/icon-512x512.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png">
<link rel="icon" type="image/png" sizes="24x24" href="/icon-24x24.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png">
他にも色々…

こんなにたくさんいりません

一般的なウェブサイトでは、SVGでファビコンを作れば補助のアイコンを含めて3つで済みます。

あらゆるブラウザ向けにSVGを 1点
必要ならiOSのホーム画面用にPNGを1点（余白とか調整した画像・192x192px）
SVGが使えない環境（Safari等）のために .ico を1点。（32x32px）

head内に記述

<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- 192x192px -->
<!-- favicon.ico をルートディレクトリにそっと置く。しかしheadには書かない。 -->

意外と重要なのは、
.ico は head には書かない。トップディレクトリにファイルを置くだけ。
ということでしょうか。書いちゃうと他のアイコンを全て上書きしてしまうので注意です（Chromeのバグ？）。置いておくことでSafariなどSVG非対応ブラウザでフォールバックとして機能します。
SVGファビコン対応ブラウザ: https://caniuse.com/link-icon-svg

Android の Chrome に対してはSVGでカバーしましょう（ズボラ🫶）。

Googleの検索結果に表示されるファビコンには、この場合svgが採用されます。（svgじゃない場合は48pxの倍数のアイコンが必要です。apple-touch-icon.png を 192px にすることでクリアできます。）

ダークモードにも対応しよう。

ダークモード良いですよね！
ダークモード対応のファビコンを設定していると、こんな感じでスムーズに切り替わってくれます。

ダークモードに対応していないと…

意図せず見えづらい事になっているかもしれません（個人の感想です）。
こちらは数分でババっと検索したサイトさん達。

SVGファビコンをダークモードに対応する方法1: CSSで対応する

SVG内にCSSを書くことでダークモードに対応できます。
パスにclass等をつけることで、部分的に色を変えることも可能です。
ダークモードに対応したCSSを書くには以下のメディアクエリを使います。
@media (prefers-color-scheme: dark) {}

SVGをイラレやFigma等のグラフィックソフト等で書き出したあと、テキストエディタで開き、
<svg… の下に <style> でダークモード用のCSSを書きます。こんな感じ！

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <style>
    path {
      fill: #212121; <!-- ライトモードの色 -->
    }
    @media (prefers-color-scheme: dark) {
      path {
        fill: white; <!-- ダークモードの色 -->
        opacity: 0.5; <!-- 他にも色々かける -->
      }
    }
  </style>
  <path d="M24,13.2V10.8H20.191a10.6,10.6,0,0,0-.2....

これでダークモード対応できます！楽ちん〜

SVGファビコンをダークモードに対応する方法2: jsで対応する

詳しく無いので割愛しますが、こんな感じのコードでダークモードの判定ができます。
CSSなりアイコン画像ファイルを出し分けてください。

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
 // この辺にDOMODMする
}

追記

こんなズボラもアリ。ダークモード対応不要なら48pxのPNG1つ。

全部同じデザインでいける前提の超ズボラ案はこちら。
Safari も Google検索結果も大丈夫。ホームスクリーンではちょっとボケますが、通常のサイトでホームスクリーンに追加する人はあんまりいないので、通信量を考えるとこれもアリ。
…え？フォールバックのICOはどうした…？今時PNGが読めないブラウザってありますか？と思うとこれで十分かもしれません。

<link rel="icon" href="/icon.png"> <!-- 48x48px -->

ホーム画面での見栄えを重視するなら48の倍数で apple-touch-iconの180pxより大きいサイズにすれば安心。sizesを明示しないことでブラウザがよしなに計らってくれます。

<link rel="icon" href="/icon.png"> <!-- 192x192px -->

FAQ

webmanifest.jsonは要らないの？

PWAじゃない限り不要です。ただし、Android Chromeでこだわりのホームアイコンを設定する場合、あったほうが楽です。

safari-pinned-tab.svgは要らないの？

Mac OS X El CapitanのSafariまでしか対応していないので不要です。

終わりに

この投稿は2022年時点に下書きを作り、プレビュー画面をLTにそのまま使って満足して放置していましたが（オイ）、改めて内容を確認して公開したものです。書くにあたりたくさんの記事を参考にしたんですが、ソースを紛失してしまいました。ごめんなさい…🙇‍♀️

再公開にあたり、この投稿よりもめっちゃ詳しく参考になる記事を見つけたので掲載しておきます。SVG使わないよ！という場合にもぜひ参考にしてください。

Definitive edition of “How to Favicon in 2021”

Masa Kudamatsuさんによる記事。ファビコン博士になれるくらい詳しく書いてあります。英語。

2023年版、HTMLによるファビコン設定方法、さまざまなブラウザやデバイスに対応させる最小限のセットは6種類のファイルが必要

コリスさんの翻訳記事です。日本語。

prefers-color-scheme: 昔馴染みのダークモード

ダークモードxファビコンについてだけでなく、ダークモード全般についてすごく丁寧にわかりやすく書いてあります。jsでSVGを設定する方法もこちらを。日本語。
https://web.dev/prefers-color-scheme/

Favicon Generator for perfect icons on all browsers

ブックマーク必須。
使ってよし、読んでよしのスーパー便利でタメになるファビコンジェネレーターです。英語。
https://realfavicongenerator.net/

Discussion