特大のインパクトを持つ小さなアイコン
ファビコンとは、ブラウザのタブ、ブックマーク リスト、ブラウザの履歴、そして 2019 年以降は Google のモバイル検索結果に表示される小さなアイコンです。これらの小さな画像には、不釣り合いなブランドの重みがあります。調査によると、ユーザーは主にタブ テキストではなくファビコン認識を使用して、開いているタブを区別しています。ファビコンが見つからない、または一般的なファビコンがあると、開いている複数のタブの中からサイトを見つけるのが難しくなります。
ファビコンのサイズと形式
| 形式 | サイズ | 必須 |
|---|---|---|
| ICO | 16×16, 32×32 | 従来のブラウザタブのサポート |
| PNG | 192×192 | Android ホーム画面アイコン、PWA |
| PNG | 512×512 | PWA スプラッシュ スクリーン、高 DPI ディスプレイ |
| アップルタッチアイコン | 180×180 | iOS「ホーム画面に追加」 |
| SVG | スケーラブル | 最新のブラウザ – どのサイズでも完璧に鮮明 |
Google 検索の接続
2019 年以降、Google はモバイル検索結果の URL の横にウェブサイトのファビコンを表示します。ファビコンが見つからない場合は、一般的な地球アイコンが表示されます。ピクセル化されたファビコンや低品質のファビコンは、サイトのメンテナンスが不十分である可能性があることをユーザーに通知し、場合によっては Google にも品質の通知を送信します。ファビコンを鮮明で最新の状態に保つことは、小さいながらも SEO における重要な考慮事項です。
💡 プロのヒント:16×16 ピクセルで動作するようにファビコンを設計します。大規模なベクター デザインから始めて、単にスケールダウンするのではなく、小さなバージョンを具体的に最適化します。 256 ピクセルでは見栄えの良い詳細が、16 ピクセルでは濁った塊になることがよくあります。
Web サイトにファビコンを追加する方法
- まずファビコンを 512×512 PNG として作成します
- コンバーターを使用してICO（マルチサイズ：16、32、48）を生成します
- 場所
ファビコン.icoサイトのルート ディレクトリ内 - HTML に追加する
<頭>:<link rel="icon" href="/favicon.ico"> - Apple Touch アイコンを追加します。
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> - 192px および 512px アイコンを参照してください。
マニフェスト.jsonPWAサポート用
一部のサイトで壊れたファビコンが表示されるのはなぜですか?
最も一般的な原因は、HTML 内の不正なファイル パス、サーバーが favicon.ico に対して 404 を返す、またはクロスドメイン favicon リクエストをブロックする CORS 制限です。ほとんどのブラウザーはファビコンのリクエストを積極的にキャッシュします。ファビコンを変更した後はブラウザーのキャッシュをクリアします。