favicon.icoとは？設定方法と必要なサイズまとめ

faviconの基本とICOフォーマットの仕組み、必要なサイズと用途、HTML・Next.jsでの設置方法、ブラウザごとの対応形式の違いをまとめます。

2026年3月21日

faviconフロントエンドWeb基礎

1. faviconとは

favicon（ファビコン）は、ブラウザのタブ・アドレスバー・ブックマーク・検索結果などに表示されるWebサイトを識別するための小さなアイコン画像です。名称は "favorites icon" の略で、Internet Explorerがブックマーク（お気に入り）機能に使ったことが起源です。

faviconはユーザーが複数のタブを開いているとき、目当てのタブを素早く見つけるための視覚的な手がかりになります。ブランドの認知度向上にも直結し、プロフェッショナルなWebサイトには欠かせない要素です。

faviconの生成にはFavicon Generator を使うと、 PNG・JPEG・SVG・WebP画像からブラウザ完結でfavicon.icoを即座に生成できます。

2. ICOフォーマットの仕組み

.ico ファイルはMicrosoftが定義したバイナリフォーマットで、複数サイズの画像データを1ファイルにまとめて格納できるのが特徴です。ブラウザや表示環境が最適なサイズを自動的に選択して表示します。

ICOファイルの構造は大きく3つのブロックで構成されます。

ICONDIRヘッダー（6バイト）: ファイルの種別（ICO = 1）と格納されている画像枚数を記録するヘッダーブロックです。
ICONDIRENTRY（1枚につき16バイト）: 各画像のサイズ・色数・データサイズ・ファイル内オフセットを記録するエントリーブロックです。幅・高さは1バイトで表現するため、256×256の場合は 0 を格納する仕様になっています。
画像データ（可変長）: PNGまたはBMP形式の実際の画像データが連続して格納されます。現代のICOファイルはPNGエンコードが主流で、透過情報の保持と高い圧縮率を両立できます。

このシンプルなバイナリ構造のため、サーバーサイドライブラリを使わずブラウザのArrayBuffer操作のみでICOファイルを自前構築することも可能です。

3. 必要なサイズと用途

faviconは表示される場所によって異なるサイズが参照されます。以下が主要なサイズと用途の一覧です。

16×16px: ブラウザタブの最小表示サイズです。タブが多く開かれているとき、このサイズで表示されます。最もよく参照されるサイズで、シンプルで識別しやすいデザインが求められます。
32×32px: ブラウザタブの標準サイズです。現代のデバイスでは多くの場合このサイズが使われます。 Windowsの "新しいタブ" ページや "タスクバーにピン留め" でも参照されます。
48×48px: Windowsのタスクバーやショートカットアイコンで使用されます。
64×64px: 高解像度ディスプレイ（Retina）での表示や、一部のOSのショートカット表示で参照されます。
128×128px: Chrome Web Storeのアイコン表示、macOSのDockプレビューなどで使用されます。
256×256px: 高解像度ディスプレイや大きなアイコン表示の環境で参照されます。 ICOフォーマットで格納できる最大サイズです。

最低限必要なのは 32×32px の1サイズです。多くのブラウザは他のサイズへの拡大・縮小を自動で行います。品質を重視する場合は16・32・48の3サイズをまとめて用意するのが一般的です。

4. HTMLでの設置方法

生成したfavicon.icoをWebサイトのルートディレクトリ（public/ または /）に配置し、 HTMLの <head> 内に以下のタグを追加します。

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

sizes="any": 複数サイズを含むICOファイルに付与する属性です。ブラウザが適切なサイズを自動選択します。
SVGファビコン: SVGはベクター形式のため、どのサイズでも鮮明に表示されます。ダークモード対応（prefers-color-scheme）も可能で、 ICOと並行して指定することを推奨します（ブラウザがサポートする場合SVGが優先されます）。
Apple Touch Icon: iOSのホーム画面に追加した際に表示される180×180pxのPNGです。rel="apple-touch-icon" で指定します。

5. Next.jsでの設置方法

Next.js App Routerでは、app/ ディレクトリ直下にファイルを置くか、metadata オブジェクトで設定する2つの方法があります。

ファイル配置による自動設定（推奨）:app/favicon.ico に配置するだけで、Next.jsが自動的に<link rel="icon"> タグを生成します。追加のコード変更は不要です。SVGの場合は app/icon.svg として配置します。
metadata オブジェクトによる設定:app/layout.tsx の export const metadata でicons フィールドを使って詳細に設定できます。

// app/layout.tsx
export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: 'any' },
      { url: '/icon.svg', type: 'image/svg+xml' },
    ],
    apple: '/apple-touch-icon.png',
  },
}

Pages Routerの場合:public/favicon.ico に配置し、pages/_app.tsx または pages/_document.tsx の<Head> 内に <link> タグを記述します。

Favicon Generator で生成したfavicon.icoを app/favicon.ico として配置するのが最もシンプルな手順です。

6. 対応形式とブラウザ差異

faviconとして指定できるファイル形式はブラウザによって異なります。以下は主要ブラウザの対応状況です。

ICO: 全ての主要ブラウザ（Chrome・Firefox・Safari・Edge）で対応しています。複数サイズを1ファイルにまとめられるため、後方互換性も含めて最も汎用的な形式です。
PNG: Chrome・Firefox・Safariで対応しています。サイズを sizes="32x32" のように明示する必要があります。 ICOよりも圧縮率が良く、単一サイズで運用する場合はPNGも選択肢になります。
SVG: Chrome・Firefox・Edgeで対応しています（Safari 未対応、2024年現在）。ベクター形式のためあらゆる解像度で鮮明に表示されます。prefers-color-scheme メディアクエリを使ったダークモード対応が可能です。 SafariへのフォールバックとしてICOまたはPNGと併用することを推奨します。
WebP・JPEG・GIF: 一部ブラウザが対応していますが、広く使われている形式ではありません。 GIFはアニメーションfaviconとして動作するブラウザもありますが、パフォーマンスや視覚的なうるさに配慮が必要です。

推奨構成: 互換性と品質を両立するには、favicon.ico（ICO）とicon.svg（SVG、ダークモード対応）の2ファイルを用意し、両方を <link> タグで指定するのがベストプラクティスです。 Safariを含む全ブラウザに対応しつつ、モダンブラウザではSVGの高品質表示が得られます。