faviconの設定のお話

faviconとは、アドレスバーやタブ、PWAでインストールしたときのアイコンなどに使われるシンボルマーク。
(本ページを開いているタブを見ると設定されていることがうかがえる)

現在までに様々なデバイスなどでWebページは見られます。
私が設定したときに躓いた点について記載しようと思います。

さまざまなデバイス、設定に考慮する必要がある

主に使われている端末として、PC端末とスマートフォン端末(Android/iOS)が主にあります。
上記の端末に対応をする場合、それぞれに対応する設定をWebページに適用します。
例えば下記のコードを記載すればブラウザのタブ、ブックマーク等で確認することができます。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
      <link rel="icon" sizes="16x16" href="/favicon.ico" />
...

Android/iOS端末に対応するためには、以下のコードを追加します。

HTML

<!-- ios -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Android -->
<link rel="manifest" href="/manifest.json" />

待ってください、なんでAndroidはJsonファイルなんですかと対応するものによって書くコードや対応しているファイルも異なってきます。

	使われる場所	拡張子	サイズ
favicon	ブラウザのタブ、ブックマーク等	icon, svg	16×16 32×32 48×48
apple-touch-icon	iPhoneのホーム画面、 Safariのお気に入り画面等	png	180×180
manifest.json	Androidのホーム画面等	png	192×192 512×512

一覧で見るとさらにバラバラなことが見えてきました。
拡張子はもちろんのことサイズもバラバラですAndroidとiosは拡張子こそ同じですがサイズが全く異なります。
各それぞれの端末の設定に注意して設定していく必要があります。
私は、この設定の複雑さに少し手こずりました。
(ブラウザの開発者モードでは設定できているのに、pixel6では設定が適用されていない箇所があったりなど・・・)