確実に表示されるファビコンは、特別なタグひとつで実現するものではありません。アクセス可能な少数のファイルとhead内のリンクを組み合わせます。古い形式をむやみに増やさず、最新のタブ、旧式クライアント、モバイルのショートカットに対応する手順です。
ファイルを用意する
小さくても判別できる正方形のシンボルから始めます。favicon.ico、favicon.svg、apple-touch-icon.png、site.webmanifestと、マニフェストが参照するPNGを、ドメインのルートで配信する公開フォルダーに配置してください。
/favicon.svgのようなパスはドメインのルートから始まります。ページからの相対パスになるfavicon.svgとは異なり、/productsや/blog/articleでも正しい場所を参照します。
headに要素を追加する
まずSVGをrel iconとtype image/svg+xmlで指定し、次にICOをrel iconとsizes anyで指定します。iOS用にrel apple-touch-icon、Webアプリのインストール用にrel manifestを追加してください。
typeは実際に配信する形式と一致させます。PNGを.icoに改名しても使えません。内容とヘッダーがICO形式である必要があります。
| 用途 | 関係 | ファイル |
|---|---|---|
| 最新ブラウザ | icon | /favicon.svg |
| 互換性 | icon | /favicon.ico |
| iOSホーム画面 | apple-touch-icon | /apple-touch-icon.png |
| Webアプリ | manifest | /site.webmanifest |
パスを壊さずにデプロイする
デプロイ後は全ファイルのURLを直接開きます。成功ステータスと画像またはマニフェストが返ることを確認してください。成功に見せかけたステータスでログイン画面や404のHTMLを返していてはいけません。
サブディレクトリで公開する場合は、パスや公開ベースを調整します。開発者ツールで最終ページを調べ、別ホストへのリダイレクトなしで想定URLが要求されることを確認します。
結果を確認する
キャッシュを無効にして再読み込みし、生成されたDOMのlink要素を確認します。タブ、ブックマーク、必要に応じて実機のホーム画面への追加も試してください。
検索結果のファビコンは、検索エンジンの規則やクロールの予定にも左右されます。ブラウザで表示できても、検索結果がすぐに更新されるとは限りません。
一次資料
よくある質問
ファビコンの要素はbodyに置きますか？
いいえ。アイコンやマニフェストを示すlink要素は、文書のheadに置きます。
ルートのfavicon.icoだけで十分ですか？
代替として有用ですが、Apple Touchアイコンやインストール用マニフェストアイコンは定義できません。それぞれの用途に合う形式を指定してください。
/で始まるパスを使う理由は？
ドメインのルートから参照するため、深い階層のページでも、そのページのフォルダー内にファイルを探してしまうことを防げます。