ファビコンチェック
小さな1枚の画像が、タブ、ブックマーク、スマホのホーム画面、検索結果でサイトの顔になります。そしてそれぞれが別のファイルを求めます。このチェックは公開されているすべてのアイコンをダウンロードし、サイズを測ります。
1つのロゴ、4種類のリクエスト
「ファビコン」という言葉は1999年にさかのぼります。Internet Explorer 5が「お気に入り」メニューを飾るためにfavicon.icoというファイルを探し始めたのが始まりです。この16ピクセルの四角は今もリクエストされていますが、今では仲間が増えました。どのファイルが取得されるかは、訪問者の使っている端末で決まります：
| 表示される場所 | 使われるファイル | サイズ |
|---|---|---|
| ブラウザのタブ、ブックマーク、履歴 | favicon.ico、またはrel="icon"で宣言したPNGかSVG | 16〜48 px、またはベクター |
| iPhoneとiPadのホーム画面 | rel="apple-touch-icon" | 180 × 180 px |
| Androidのホーム画面、インストールしたウェブアプリ | ウェブマニフェストに記載したアイコン | 192 pxと512 px |
| スマホでのGoogle検索結果 | rel="icon"のファイル | 48 pxの倍数、またはベクター |
適切なファイルがないと、どのシステムももっと見劣りするものに切り替えます。タブには白紙のページの記号、iOSではページの小さなスクリーンショット、Androidではグレーの円に文字1つ、Googleでは地球のアイコンになります。
ダウンロードして測定するもの
入力されたページのHTMLを読み、relがicon、apple-touch-icon、mask-iconのすべての<link>を集めます。さらにmanifestのリンクと、そのファイルに記載されたアイコンも集めます。そのうえで、ブラウザが指定がなくても試す2つのアドレス、/favicon.icoと/apple-touch-icon.pngを加えます。
取得するファイルは最大16個です。宣言されたsizes属性をそのまま信じることはしません。ICOファイルは開いて中に詰め込まれたサイズを一覧にし、SVGはviewBoxを読み、PNGやJPEGはピクセル単位で測ります。Appleのアイコンは、四隅を調べて透過しているかを確認します。HTMLのエラーページだったファイルはそのように報告します。/favicon.icoではこの思わぬ事態がよくあります。
チェックリストの読み方
- 従来のファビコン
- ICOファイル、または16、32、48 pxのPNGがあれば合格です。そうしたものがまったくなければ不合格です。アイコンがSVGだけの場合は警告になります。フィードリーダー、古いブラウザ、多くのツールは
/favicon.icoしかリクエストしないからです。 - SVGアイコン
- 任意です。ベクターファイルはどのサイズでもくっきり表示され、ダークモードで色を変えることもできます。
- Appleのアイコン
- なければ不合格です。警告になるのは、180 pxより小さい場合、背景が透過している場合（iOSは黒で塗ります）、デフォルトのアドレスにファイルがあるのにページにタグがない場合です。
- マニフェスト
- ページからリンクされていなければ警告です。リンク先が読み込めないか、正しいJSONでなければ不合格です。中身については、192 pxのアイコンがなければ不合格、512 pxのアイコンがなければ警告、「maskable」アイコンがなければ注記です。
- テーマカラー
- 任意です。
<meta name="theme-color">はAndroidでブラウザのバーに色を付けます。 - Googleが受け付けるサイズ
- 正方形のアイコンのどれかが48 pxの倍数（48、96、144、192）であるか、SVGでなければ警告です。
不合格が1つでもあれば判定は「不完全」、警告が1つでもあれば「あと少し」です。一覧の上のモックアップは、公開されているファイルから各システムが選ぶアイコンを示しています。
1枚の絵から完全なセットを作る
ロゴの正方形版から始め、16ピクセルでも見分けがつくまで単純化します。次のファイルを書き出します：
favicon.ico：中に16、32、48 pxの画像を入れ、サイトのルートに置きます。icon.svg：ロゴがベクターで存在する場合。apple-touch-icon.png：180 × 180、不透明な単色の背景で、余白は約20 px。角はiOSが自動で丸めます。icon-192.pngとicon-512.png：マニフェスト用。icon-maskable-512.png：ロゴを正方形の中央80%に収めます。Androidは画像を円形に切り抜くことがあるからです。
次に、それらを宣言します：
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">結果には、このブロックと、サイト名を入れた対応するsite.webmanifestが含まれます。
このチェックでわかるのは、ファイルが存在し、正しい寸法であることです。絵が16 pxで読み取れるか、暗いタブバーでよく見えるかまではわかりません。モックアップを見てから、実際のスマホでも確かめてください。
よくある質問
ファビコンのサイズはどれにすべきですか？
複数必要です。16、32、48 pxを含むfavicon.ico、Apple端末用の180 pxのPNG、ウェブマニフェストに192 pxと512 pxのPNGを用意してください。現在のブラウザなら、SVGアイコン1つでタブのあらゆるサイズに対応できます。
Googleでファビコンの代わりに地球のアイコンが表示されるのはなぜですか？
Googleが必要とするのは、48 pxの倍数の正方形アイコンかSVGで、トップページでrel="icon"で宣言され、Googlebotが取得できる（robots.txtでブロックされていない）ものです。修正後、新しいアイコンはトップページが再びクロールされた時点で表示されます。数日から数週間かかることがあります。
favicon.icoファイルは今でも必要ですか？
はい。ブラウザはPNGやSVGを受け付けますが、ほかの多くのプログラムは/favicon.icoを直接リクエストします。フィードリーダー、リンクプレビューのサービス、一部のパスワードマネージャー、古いブラウザなどです。ファイルがないと、サーバーにはそのたびに404が記録されます。
iPhoneでアイコンの背景が黒くなるのはなぜですか？
apple-touch-iconに透過部分があり、iOSは透過部分を黒で塗りつぶすからです。PNGはブランドカラーの不透明な背景で書き出してください。
ファビコンを変えたのに、古いものが表示されるのはなぜですか？
ブラウザはファビコンを、ほかのどのファイルよりも長くキャッシュに残します。アイコンのアドレスを直接開いて再読み込みするか、href="/favicon.ico?v=2"のようにリンクにバージョンを付けてください。検索エンジンは独自のスケジュールで更新します。
maskableアイコンとは何ですか？
余白を多めに取って描いたアイコンです。Androidがロゴを切らずに、円、角丸の正方形などの形に切り抜けるようにします。マニフェストで"purpose": "maskable"と宣言します。これがないと、Androidは通常のアイコンを縮小して白い円の上に置きます。