favicon（「favorite icon」の略）は、ブラウザのタブにページタイトルと並んで表示される小さなアイコンです。これはウェブサイトの最も認識しやすい要素の一つですが、多くの開発者に見過ごされがちです。
ファビコンはどこに表示されますか？
ファビコンは、あなたが思っている以上に多くの場所に表示されます。
- ブラウザのタブ — 最も一般的な場所です。開いている各タブにサイトのファビコンが表示されます。
- ブックマークバー — ユーザーがあなたのサイトをブックマークした際、ファビコンは後でサイトを見つけるのに役立ちます。
- Google検索結果 — 2019年以降、Googleはモバイル検索結果のURLの横にファビコンを表示しており、現在ではデスクトップでも表示されています。
- 履歴 — ブラウザの履歴では、視覚的に素早く識別するためにファビコンが使用されます。
- PWAホーム画面 — あなたのサイトがProgressive Web Appとしてインストールされている場合、ファビコンがアプリのアイコンになります。
ファビコンが重要な理由
1. ブランド認知度
適切にデザインされたファビコンは、あなたのブランドを強化します。Googleの「G」、Twitterの鳥、YouTubeの再生ボタンが、16×16ピクセルというサイズでもいかに瞬時に認識できるか考えてみてください。
2. ユーザーエクスペリエンス
ユーザーが20以上のタブを開いているとき、ファビコンはサイトを区別する唯一の方法です。ファビコンがないと、あなたのタブは一般的な空白のアイコンになり、閉じやすく、忘れられやすくなります。
3. SEOへの影響
Googleは検索結果にファビコンを表示します。ファビコンがなかったり、品質が低かったりすると、あなたのリスティングがプロフェッショナルに見えず、クリック率（CTR）が低下する可能性があります。ファビコンを持つウェブサイトは、CTRが最大20%向上する可能性があるという研究結果もあります。
4. 信頼性と信用
プロフェッショナルなファビコンは、誰かが細部にまで気を配っていることを示します。これは小さなことですが、品質全体の認識に貢献します。
ファビコンのファイル形式
| 形式 | 最適な用途 | ブラウザサポート |
|---|---|---|
| .ico | レガシーサポート、複数サイズを格納可能 | すべてのブラウザ |
| .png | モダンブラウザ、鮮明なレンダリング | すべてのモダンブラウザ |
| .svg | スケーラブル、ダークモード対応 | Chrome、Firefox、Edge（Safariは非対応） |
| .gif | アニメーションファビコン（稀） | 限定的 |
一般的なファビコンのサイズ
- 16×16 — ブラウザタブ（クラシックサイズ）
- 32×32 — ブラウザタブ（高DPI / Retina）
- 180×180 — Apple Touch Icon（iOSホーム画面）
- 192×192 — Android Chrome
- 512×512 — PWAスプラッシュスクリーン
始め方
既存のウェブサイトからファビコンを取得する最も手っ取り早い方法は、専用ツールを使うことです。Mzu favicondlでは、任意のドメインを入力するだけで、そのファビコンを複数のサイズで即座にダウンロードできます。サインアップは不要です。
ファビコンをゼロから作成する必要がある場合は、ツールセクションにある画像からファビコンへの変換ツールを使用して、単一の画像から必要なすべてのサイズを生成できます。
最低限のファビコン設定
最低限、これらの2行をHTMLの<head>に追加してください。
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">これで99%のユースケースをカバーできます。より包括的な設定については、弊社の詳細なHTMLガイドをご覧ください。