2021年版Faviconの指定方法まとめ

WebサイトのFavicon（ファビコン）指定のベストプラクティスは移り変わりがはやい印象がありますね。制作しているWebサイトの要件によって何をどこまでやるかは変えるとよいと思いますが、2021年8月時点でたいていのWebサイトで通用しそうな個人的ベストを書いてみたいと思います。

結論としてはこのようになりました。

<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />

以下なぜこうなったのかを記します。

apple-touch-icon

<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" />

apple-touch-iconはiOSでホーム画面に追加した時のアイコンです。

いろんなサイズをつくる余裕があればつくっても良いですが、ホーム画面に追加するケースはそこまで多くないと思いますので、一番大きいサイズの 60x60 pt (180x180 px @3x) のサイズだけつくるということにしています。

apple-touch-icon-precomposedはiOS7より古いバージョンのiOS用Safariが勝手に光沢表現などをつけて表示してしまう対策の指定になります。ただ、この指定はiOS7以降のみをサポート対象とするWebサイトには不要でしょう。

icon

<link rel="icon" type="image/png" href="favicon.png" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />

こちらがいわゆるFaviconです。ファイルタイプはPNGとSVGを用意します。SVGのFaviconは2021年8月時点でSafariが対応していません。ですがベクターデータのほうが綺麗でしょうし、ダークモード対応も可能なので今後はSVGを使っていくと良いだろうと思います。フォールバックとしてPNGを用意します。

SVG Favicon：ダークモード対応

<style></style> を加えて prefers-color-scheme でfillやstrokeなどを変えると実現できます。

<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
  <style>
    path {
      fill: #000;
    }
    @media (prefers-color-scheme: dark) {
      path {
        fill: #fff;
      }
    }
  </style>
  <path d="..."/>
</svg>

prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN

PNG Favicon：サイズはGoogle検索を考慮する

検索結果に表示されるファビコンを定義する | 検索セントラル | Google Developers

こちらのガイドラインによると

ファビコンのサイズが 48 ピクセルの倍数になっていること（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。SVG ファイルの場合は、サイズに関して特別な指定はありません。

とのことなので、PNGのアイコンをよく192x192 pxのサイズで作っています。apple-touch-icon が180pxなので、そのくらいのサイズはほしいという単純な理由からです。

書く順番に気をつける

これはけっこう見落としがちかもしれません。MDNをみるとこのように書いてあります：

複数の <link rel="icon"> がある場合、ブラウザーは media, type, sizes 属性を使用して最も適切なアイコンを選択します。もし複数のアイコンが同等に適切であれば、最後の一つが使用されます。最も適切なアイコンが後で不適切と分かった場合、例えば未対応の形式を使用していた場合などは、ブラウザーは次に適切なものを探し、以下同様にします。

リンク種別 - HTML: HyperText Markup Language | MDN

できればPNGよりもSVGを使ってほしいという気持ちを込め、一番下にSVGを書くようにしています。