ファビコン（favicon）とは？基本から設定方法まで完全ガイド

ファビコン（favicon）とは

ファビコン（favicon）は「favorite icon」の略で、Webサイトを象徴する小さなアイコンのことです。ブラウザのタブ、ブックマーク、履歴など、さまざまな場所に表示されます。

1999年にInternet Explorer 5で初めて導入され、現在ではすべてのモダンブラウザでサポートされています。

ファビコンが表示される場所

ファビコンは以下の場所に表示されます：

• ブラウザタブ — ページタイトルの横に16x16pxで表示
• ブックマークバー — ブックマーク一覧でサイトを識別
• ブラウザ履歴 — 訪問履歴でサイト名と一緒に表示
• 検索結果 — Google検索結果のサイト名横に表示
• タスクバー/Dock — PWAとしてインストールした場合
• スマホホーム画面 — ショートカットアイコンとして

なぜファビコンが重要なのか

1. ブランド認知

ファビコンはサイトの「顔」です。多くのタブが開いている中で、ユーザーがあなたのサイトを瞬時に見つけられるようになります。

2. プロフェッショナルな印象

ファビコンが設定されていないサイトは、未完成な印象を与えます。たった1つのアイコンで、サイト全体の印象が変わります。

3. SEOへの間接的効果

Google検索結果にもファビコンが表示されるため、クリック率（CTR）に影響する可能性があります。

推奨サイズ一覧

ファビコンの設定方法

最もシンプルな方法は、favicon.icoファイルをサイトのルートディレクトリに配置することです：

<link rel="icon" href="/favicon.ico" type="image/x-icon">

複数サイズに対応する場合は、PNG形式も併用します：

<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">

ICO形式とPNG形式の違い

ICO形式は複数のサイズを1つのファイルにまとめられる形式です。IE11以前のブラウザとの互換性があります。

PNG形式はモダンブラウザで広くサポートされ、ファイルサイズが小さいのが特徴です。

現在のベストプラクティスは、ICOとPNGの両方を用意することです。当サイトの変換ツールや一括生成ツールを使えば、簡単に両方を作成できます。

まとめ

ファビコンはWebサイトの基本要素です。まだ設定していない方は、ぜひ当サイトのツールを使って作成してみてください。