favicon.icoとは?
定番のウェブサイトアイコンを解説:概要、必要なサイズ、作成方法。
favicon.icoは、ブラウザがウェブサイトのルートディレクトリにリクエストする小さなアイコンファイルです。タブ、ブックマーク、アドレスバーに表示されます。
すぐに分かる回答
要点:
favicon.icoは複数サイズを含むICOファイルであり、 16×16, 32×32, と48×48のアイコンを含めるべきです。これによりすべてのブラウザ、タスクバー、デスクトップショートカットで正しく表示されます。
favicon.icoのサイズ
1つのfavicon.icoファイルには複数のサイズをまとめられます。必要なサイズは以下の通りです。
| サイズ | 用途 |
|---|---|
| 16×16 | ブラウザタブ |
| 32×32 | タスクバー |
| 48×48 | デスクトップショートカット |
favicon.ico vs PNG vs SVG
旧環境との互換性のためfavicon.icoを残しつつ、モダンブラウザ向けにPNGとSVGを追加しましょう。
| フォーマット | 最適な用途 |
|---|---|
| favicon.ico | 旧ブラウザとWindows;16×16、32×32、48×48を含む1つのファイル |
| PNG | タブやブックマーク用の鮮明なモダンアイコン |
| SVG | ダークモード対応のスケーラブルなベクターアイコン |
favicon.icoの追加方法
favicon.icoをウェブサイトのルートディレクトリに置き、HTMLに次のタグを追加します:
<link rel="icon" href="/favicon.ico" sizes="any">favicon.icoのよくあるミス
- ICOファイルに1つのサイズしか保存していない
- PNGファイルの名前をfavicon.icoに変えただけ
- favicon.icoをルートディレクトリに置き忘れている
- 低解像度や正方形でない画像をアップロードしている
よくある質問
favicon.icoの「ico」とは何の略ですか?
favicon.icoは定番の「お気に入りアイコン」ファイルです。ブラウザがサイトのルートディレクトリから読み込み、タブ・ブックマーク・アドレスバーに表示する小さなICO画像です。
favicon.icoにはどのサイズを含めるべきですか?
16×16、32×32、48×48のアイコンを含めるべきです。古いブラウザは16×16を使い、Windowsのタスクバーやショートカットは大きいサイズを使います。
2026年でもfavicon.icoは必要ですか?
はい。モダンブラウザはPNGやSVGを優先しますが、favicon.icoは特にWindowsや古いブラウザで最も互換性の高いフォールバックです。