ファビコンはWebサイトで最も小さなファイルの一つですが、最も目立つ要素の一つです。ブラウザのタブ・ブックマーク・ホーム画面ショートカット・検索結果に常に表示され、ユーザーが複数のタブを開いているときに自分のサイトを瞬時に識別してもらえるかどうかを左右します。本記事では、ファビコンに必要なファイル・正しいHTMLの書き方・iOS/Android/PWA対応まで、実装に必要なすべてを完全解説します。

ファビコンとは？

ファビコン（favicon）とは、ブラウザのタブ・アドレスバー・ブックマーク・ブラウザ履歴などに表示される小さなアイコンのことです。名前は"favorite icon"の略で、1999年にInternet Explorer 5が初めて導入した機能に由来します。

現代のWebではファビコンが表示される場所は大幅に増えています。

  • ブラウザタブ：複数タブを開いているときにサイトを識別する最も重要な場所
  • iOS「ホーム画面に追加」：Safariでウェブクリップとして保存するときのアイコン
  • Androidショートカット：Chrome経由でホーム画面に追加されるアイコン
  • Windowsタスクバー固定：ブラウザのピン留めサイトに表示されるアイコン
  • Googleモバイル検索結果：サイト名の左横に表示される小アイコン

これだけ多くの場所に表示されるため、モダンなサイトには複数のサイズとフォーマットが必要です。16×16のfavicon.ico一枚だけでは不十分で、プラットフォームごとに最適化されたファイルを用意することがベストプラクティスです。

必要なファビコンサイズ一覧

ファビコンに必要なファイルはプラットフォームによって異なります。以下の表を参考に、対応範囲に合わせて必要なファイルを用意してください。

サイズファイル名用途
16×16favicon-16x16.pngブラウザタブ（標準）
32×32favicon-32x32.pngブラウザタブ（HiDPI / Retina）
48×48favicon-48x48.pngWindowsサイトショートカット
180×180apple-touch-icon.pngiOS「ホーム画面に追加」
192×192icon-192.pngAndroid Chromeショートカット
512×512icon-512.pngAndroid PWAスプラッシュ画面
任意favicon.icoレガシーブラウザ（IE・旧Edge）
任意icon.svgモダンブラウザ（Chrome 80+・Firefox 84+）

現実的に必要な最小セット

すべてのサイズを一から用意するのは大変に感じるかもしれませんが、現実的には以下の4ファイルで主要環境の大半をカバーできます。

  • favicon.ico：レガシーブラウザ向け。HTMLなしでもブラウザが自動取得するため必須
  • favicon-32x32.png：モダンブラウザのタブ表示用
  • apple-touch-icon.png（180×180）：iOS Safari「ホーム画面に追加」用
  • icon-192.png：Android Chromeショートカット用

SVGファビコンについて

モダンブラウザのみを対象にするのであれば、SVGファビコンがベストの選択肢です。完全にスケーラブルで任意の解像度に対応し、CSSメディアクエリを使ったダークモード対応も可能です。ただしIEや古いEdgeはSVGファビコンに対応していないため、必ずfavicon.icoをフォールバックとして用意してください。

必要なHTMLコード

ファビコンはHTMLの<head>内に<link>タグで指定します。以下に推奨設定を示します。

モダンな推奨設定

<!-- 標準ファビコン -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- iOS Safari — ホーム画面に追加 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android / PWA -->
<link rel="manifest" href="/site.webmanifest">

ブラウザは上から順に対応するタイプを探し、最初に見つかったものを使います。type属性を正しく指定することで、ブラウザが適切なファイルを選択できるようになります。

site.webmanifest（Android・PWA用）

Androidショートカットやプログレッシブウェブアプリ（PWA）に対応するには、site.webmanifestファイルが必要です。ドメインルートに以下の内容で配置してください。

{
  "name": "My Site",
  "short_name": "MySite",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

SVGファビコン（モダンブラウザ向け）

SVGファビコンを使う場合は以下のように指定し、古いブラウザ向けにfavicon.icoをフォールバックとして設定します。

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- 古いブラウザ向けフォールバック -->
<link rel="icon" href="/favicon.ico" sizes="any">

SVGファビコンではCSSの@media (prefers-color-scheme: dark)を使ってダークモードに対応できます。詳細はデザインのベストプラクティスセクションで解説します。

ファイルの配置場所

  • ドメインルートに配置推奨：/favicon.ico、/apple-touch-icon.pngはルートに置くのがベスト
  • ブラウザの自動探索：ブラウザは/favicon.icoをHTMLの指定なしでも自動的に取得しに行く
  • サブフォルダも可：/icons/などのサブフォルダに置く場合はHTMLのhrefパスを正確に合わせる

プラットフォーム別の注意点

iOS Safari

iOSでの「ホーム画面に追加」は、標準の<link rel="icon">タグでは機能しません。必ずrel="apple-touch-icon"を使用します。

  • linkタグが必須：rel="apple-touch-icon"を使う。標準のrel="icon"はiOSに無視される
  • 自動探索：linkタグを省略した場合、Safariはルートの/apple-touch-icon.pngを自動で探す
  • 推奨サイズは180×180px：角丸の処理はiOSが自動で行うため、画像側で角丸にする必要はない
  • 透明背景は避ける：透明部分はSafariが黒で塗りつぶすため、apple-touch-iconには必ず背景色を設定した画像を用意する

Android Chrome

AndroidのChromeはfaviconの取得にsite.webmanifestを参照します。

  • マニフェストからアイコンを読み込む：site.webmanifestのicons配列に192×192と512×512を指定する
  • 用途別サイズ：ホーム画面アイコンに192×192、スプラッシュ画面に512×512が使われる
  • マスカブルアイコン："purpose": "maskable"を指定すると、Androidが円・スクエア・スクワークルなど任意の形状でアイコンをクロップできる。セーフゾーンは画像中央80%の領域

Google検索（モバイル）

Googleはモバイル検索結果のサイト名横にファビコンを表示します。表示されるには以下の要件を満たす必要があります。

  • Googleのクローラーがアクセスできること（robots.txtでブロックしない）
  • 正方形で48px以上のサイズであること
  • ドメインルート（またはそのサブドメイン）に配置されていること

Googleは自身のクローラーがアイコンを取得・処理するため、HTMLで正しく指定していれば通常は自動的に反映されます。

ファビコンデザインのベストプラクティス

シンプルに保つ

16×16pxのファビコンはわずか256ピクセルしかありません。複雑なロゴや細かいテキストはこのサイズでは判読不可能になります。

  • 文字1文字：ブランド名の頭文字だけを使うアプローチが非常に効果的
  • シンプルなシェイプ：円・四角・三角など単純な形は小さくても認識しやすい
  • ロゴマーク：フルロゴタイプ（文字を含むロゴ）ではなく、シンボルマーク部分だけを使う
  • 実寸テストを忘れずに：デザイン確定前に必ず16×16の実寸でブラウザタブに表示して確認する

元画像の要件

ファビコン生成ツールで各サイズを生成するには、品質の高い元画像が必要です。

  • 512×512px以上の正方形PNGから作業を始めることを強く推奨
  • 透明背景付きPNG：非矩形の形状（ロゴマークなど）の場合は透明背景のPNGを使う
  • 細い線は避ける：1〜2pxの細い線は小サイズに縮小すると消えてしまう
  • 高コントラスト：タブの白背景・色付き背景の両方で視認できるよう、コントラスト比を高く保つ

ダークモード対応SVGファビコン

SVGファビコンはCSSのメディアクエリを埋め込めるため、ライトモード・ダークモードで異なる配色を適用できます。

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- ダークモード対応のfavicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #6366f1; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #a5b4fc; }
    }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

このアプローチにより、ダークモードのブラウザタブでも視認性の高いファビコンを実現できます。ライトモードでは濃い紫、ダークモードでは明るい薄紫に切り替わる例です。

フレームワーク・CMSでの設定方法

Next.js（App Router）

Next.js App Routerでは、特定のファイル名でapp/ディレクトリに配置するだけでファビコンが自動検出されます。

app/
  favicon.ico          ← 自動検出・HTMLタグ不要
  apple-icon.png       ← apple-touch-iconとして自動検出
  icon.png             ← ファビコンとして使用

Metadata APIを使って明示的に指定する方法もあります。

// app/layout.tsx
export const metadata = {
  icons: {
    icon: '/favicon.ico',
    apple: '/apple-touch-icon.png',
  },
};

Next.js（Pages Router）

Pages Routerではpages/_document.tsxの<Head>コンポーネント内に直接記述します。

// pages/_document.tsx
import Head from 'next/head';

<Head>
  <link rel="icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
</Head>

Astro・Hugo・静的サイト

Astroではpublic/フォルダ、Hugoではstatic/フォルダにファビコンファイルを配置します。ビルド時にそのままルートにコピーされます。HTMLは各フレームワークのベースレイアウトテンプレート（Astroならsrc/layouts/BaseLayout.astroのような共通ファイル）の<head>ブロックに追加します。Viteベースのプロジェクトも同様にpublic/フォルダを使います。

WordPress

WordPressには管理画面からファビコンを設定する機能が標準搭載されています。外観 → カスタマイズ → サイト基本情報 → サイトアイコンから512×512px以上の画像をアップロードするだけで、WordPressが16px・32px・180pxなど必要な全サイズを自動で生成・適用します。手動でHTMLを編集する必要はありません。

よくある質問（FAQ）

2024年でもfavicon.icoは必要ですか？
はい、必要です。ブラウザは/favicon.icoをHTMLの指定なしに自動的に取得しに行くため、ファイルが存在しないと全ページの読み込み時に404エラーが発生しサーバーログにノイズが溜まります。favicon.icoは30秒で追加でき、用意しておくことのデメリットはほぼありません。
ファビコンを変更したのに反映されません
ブラウザはファビコンを強くキャッシュするため、変更してもすぐに反映されないことがよくあります。Ctrl+Shift+R（MacはCmd+Shift+R）でハードリフレッシュするか、ブラウザのキャッシュをクリアしてください。それでも解決しない場合はlinkタグにバージョンクエリを追加してキャッシュを強制的に無効化できます：href="/favicon.png?v=2"
ファビコンはSEOに影響しますか？
ファビコンは直接のランキング要因ではありませんが、Googleはモバイル検索結果のサイト名横にファビコンを表示します。ファビコンが設定されていないとデフォルトのグレーアイコンが表示され、ブランド認知度やクリック率（CTR）に悪影響を与える可能性があります。
ファビコンは透明背景にすべきですか？
ブラウザタブでは透明背景でも問題ありません。ただしiOSの「ホーム画面に追加」（apple-touch-icon）では透明背景を避けてください。Safariが透明部分を黒で塗りつぶすため、意図しない見た目になります。apple-touch-iconには必ず背景色を設定した不透明な画像を使ってください。
マスカブルアイコンとは何ですか？
Androidがアイコンを円・スクエア・スクワークル（角丸四角）など任意の形状でクロップできるようにする仕様です。セーフゾーンは画像中央80%の領域で、重要なデザイン要素はその範囲内に収める必要があります。maskable.appでアイコンのセーフゾーン確認ができます。
Chromeでは表示されるのにFirefox/Safariで表示されません
よくある原因は3つです。①サーバーのMIMEタイプ設定ミス：.icoファイルにはimage/x-icon、.pngにはimage/pngを返すようサーバーを設定する。②HTMLのlinkタグにrel="icon"がない：属性が正しく記述されているか確認。③ブラウザキャッシュ：ハードリフレッシュ（Ctrl/Cmd+Shift+R）で解決することが多い。
アニメーションGIFのファビコンは使えますか？
技術的にはFirefoxがアニメーションGIFファビコンに対応しています。ただしChromeはアニメーションを再生しません。実用上は気が散るとして避けられており、プロダクション環境ではほぼ使われていません。ユーザー体験とブランド一貫性の観点からも、静止画のファビコンを推奨します。
全サイズのファビコンを一括生成するには？
当サイトのファビコンジェネレーターを使えば、512×512px以上の画像を1枚アップロードするだけで16px〜512pxの全サイズを一括ダウンロードできます。site.webmanifestも自動生成されるのでそのまま使えます。アカウント不要、すべてブラウザ上で処理されます。

まとめ

  • ファビコンはブラウザタブ・iOS/Androidホーム画面・Google検索など多くの場所に表示される重要なUI要素
  • 最小限必要なセットはfavicon.ico・32×32 PNG・apple-touch-icon（180×180）・icon-192.pngの4ファイル
  • iOSにはrel="apple-touch-icon"が必須で、透明背景は避けてSafariの黒塗り問題を回避する
  • AndroidとPWAにはsite.webmanifestで192×192と512×512のアイコンを指定する
  • SVGファビコンはスケーラブルでダークモード対応も可能 — モダンブラウザ対象ならベストの選択肢
  • favicon.icoはレガシーブラウザ向けだけでなく、ブラウザの自動探索による404エラー防止のためにも必ず用意する

ファビコンの設定は一度正しく構築してしまえばメンテナンスがほぼ不要な部分です。下のツールを使って今すぐ全サイズのファビコンを揃えましょう。