Webサイトにfaviconを追加する方法（ステップバイステップ）
空白のタブからピクセル単位で美しいブランディングまで、4ステップで完了します。あらゆるHTMLサイト、CMS、フレームワークで使えます。
まず必要なもの
16x16のfavicon1つだけでは、もはや不十分です。最近のブラウザ、iOS、Android、Windowsは、それぞれ異なるサイズと形式を要求します。タグを追加する前に、まずアイコン一式がそろっているか確認しましょう。
最低限そろえるべきセット
| ファイル | サイズ | 必要とする場面 |
|---|---|---|
| favicon.ico | マルチ解像度 | デフォルトで /favicon.ico を要求するブラウザやクローラー |
| favicon-16x16.png | 16x16 | ブラウザのタブとアドレスバー |
| favicon-32x32.png | 32x32 | Retinaのタブ、ブックマーク、デスクトップのショートカット |
| apple-touch-icon.png | 180x180 | iOSのホーム画面 |
| マニフェストのアイコン | 192x192 | Androidのホーム画面。web manifestから参照されます |
これらのサイズが実際にどう見えるか
4つのステップ
- 1
faviconのファイルを生成する
ジェネレーターに、すべてのサイズ、.icoスプライト、チューニング済みのmanifest.jsonを一度に生成させましょう。ロゴ、スクリーンショット、絵文字でさえも放り込めば、フルキットをダウンロードできます。アイコン作成が初めてですか？まずはfaviconの作り方から始めましょう。
- 2
ファイルをサイトのルートに追加する
ダウンロードしたファイルを、ドメインのルートを配信するディレクトリにコピーします。静的サイトならルートフォルダ、多くのフレームワークではpublic/ディレクトリです。目標は、https://yoursite.com/favicon.ico が直接解決されることです。
- 3
<head>にlinkタグを追加する
各アイコンを、ドキュメントの<head>内の<link>タグ（icon、apple-touch-icon、manifest）で参照します。これをすべてのページで行う必要があり、通常は共有のテンプレートやレイアウトで対応します。
- 4
動作を確認する
デプロイしたら、ハードリフレッシュしてタブを確認します。もっとも確実な確認方法は、すべてのタグが解決されることを検証し、不足しているプラットフォームのアイコンを指摘してくれる自動スキャンです。
linkタグ
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">これらを各ページの<head>要素の中に貼り付けます。manifestのlinkが、インストールの案内やホーム画面のアイコンを可能にします。manifest.jsonとは何かも参照してください。
プラットフォーム別のショートカット
フレームワークやCMSを使っていますか？いくつかは独自の作法でheadタグを自動的に処理してくれます。プラットフォームガイドではNext.js、React、WordPress、Shopifyを扱っています。
よくある間違い
| 間違い | 解決策 |
|---|---|
| ブラウザのキャッシュ | 古いfaviconが残り続けます。ハードリフレッシュするか、linkのhrefに ?v=2 を付け足しましょう。 |
| パスの誤り | 先頭のスラッシュが重要です。/favicon.ico はルートから配信され、現在のフォルダからではありません。 |
| apple-touch-iconの欠落 | これがないと、iOSのホーム画面はぼやけたスクリーンショットにフォールバックします。 |
よくある質問
faviconのファイルはどこに置けばよいですか？
favicon.ico とその他のアイコンファイルを、サイトのルートディレクトリ（多くのフレームワークではpublic/フォルダ）に置き、ドメインのルートから配信されるようにします。例：https://example.com/favicon.ico。
今でもfavicon.icoファイルは必要ですか？
はい。ブラウザやクローラーは今でもデフォルトで /favicon.ico を要求します。そのため、最新のPNGやSVGアイコンと並べてマルチ解像度の.icoを用意しておくと、もっとも幅広い互換性が得られます。
追加したのにfaviconが表示されないのはなぜですか？
ブラウザはfaviconを積極的にキャッシュします。ハードリフレッシュし、linkに ?v=2 のようなバージョンのクエリ文字列を付け足し、ファイルパスが正しいことを確認してください。あらゆる原因については、faviconのトラブルシューティングガイドを参照してください。