ファビコンのサイズは何px？必要な5種類とブラウザが実際に読むファイル

ファビコンのサイズ一覧を検索すると、16 から 512 まで十数種類の数字が並んだ表がたくさん見つかります。ただ、どのサイズを誰が使うのかまで書いてある表は多くありません。この記事では、HTML の仕様、Apple のドキュメント、Web App Manifest、Google 検索セントラル、WordPress のソースコードという一次情報と、ブラウザが実際にどのファイルを取りに来るかの実測から、本当に必要なサイズを絞り込みます。

実測は 2026-10-02 に、macOS 上の Chromium 152（デバイスピクセル比 2、つまり Retina 画面）で行いました。テスト用のページをページごとに別のポートで配信し、ページを開いたときにサーバーへ届いたリクエストをすべて記録しています。アイコンは ZeroTool のファビコンジェネレーターで作ったものです。

用途がはっきりしているのは 5 種類

サイズ	ファイル	使う場所	根拠
16×16・32×32（と 48×48）	`favicon.ico`、または `<link rel="icon">` の PNG	ブラウザのタブ、ブックマーク、履歴	HTML Standard の `rel=icon`
48×48 より大きいもの	トップページで指定したアイコン	Google 検索結果	Google 検索セントラル
180×180	`apple-touch-icon.png`	iPhone の「ホーム画面に追加」	Apple: Configuring Web Applications
192×192・512×512	マニフェストに書く PNG	Android やデスクトップ版 Chrome でのインストール	web.dev のインストール要件
可変	`type="image/svg+xml"` の SVG	SVG アイコンに対応したブラウザ	HTML Standard（`sizes="any"`）

一覧表によく出てくる 57、72、114、144 は昔の iOS 端末、150 や 310 は Windows のタイル向けで、上の一次情報が今求めているサイズではありません。Apple のドキュメントは iPad 用に 152×152 と 167×167 も挙げていますが、ちょうどのサイズがなければ「推奨サイズより大きいもののうち最小のもの」を使うと書いているので、180×180 が 1 つあれば iPad でも使われます。

Chromium が実際に取りに行ったファイル

ページの `<head>`	HTML の後に来たリクエスト
アイコンの指定なし	`/favicon.ico`
ジェネレーターの HTML（ICO、16・32・48 の PNG、apple-touch-icon、マニフェスト）	`/site.webmanifest`、`/favicon.ico`
16・32・48 の PNG の `link` だけ	`/favicon-32.png`
3 つの PNG の後に ICO の `link`	`/favicon.ico`
`sizes="32x32"` の ICO、SVG、apple-touch-icon の順	`/icon.svg`
32×32 の PNG の `link` だけ	`/favicon-32.png`

この結果から 4 つのことが分かります。

1 つ目に、/favicon.ico を自動で取りに行くのは、ページがアイコンを何も指定していないときだけです。HTML Standard も、アイコンの link がない場合にサイトのルートの /favicon.ico を取得してよい（may）と定めています。PNG を指定して ICO を指定しなかったページでは、/favicon.ico へのリクエストは一度も来ませんでした。

2 つ目に、ICO の link があると、書く順番に関係なく ICO が選ばれました。Retina 画面の 16pt のタブには 32px の画像が要りますが、ICO の中に入っているので足ります。このとき 16・32・48 の PNG は使われていません。

3 つ目に、SVG の link があると SVG だけが読まれました。

4 つ目に、デスクトップの Chromium は apple-touch-icon.png を取りに来ませんでしたが、マニフェストはページを開いた時点で取得しました。どのアイコンを使うかはブラウザ任せと HTML Standard に書かれているので、Firefox や Safari では違う結果になる可能性があります。この実測は Chromium だけのものです。

Google 検索に表示されるファビコンの条件

検索結果のサイト名の横に出るファビコンについて、Google は「検索結果に表示されるファビコンを定義する」で次の条件を挙げています。

正方形（縦横比 1:1）で、8×8 ピクセル以上。さまざまな場所できれいに見えるよう、48×48 ピクセルより大きいものを推奨しています。
対応形式は BMP、GIF、ICO、PNG、JPEG、PPM、TIFF です。SVG は含まれていないので、SVG を使う場合も ICO か PNG の link を残します。
ファビコンはホスト名ごとに 1 つです。example.jp と blog.example.jp は別々に設定できますが、example.jp/blog のようなサブディレクトリには設定できません。
Googlebot がトップページを、Googlebot-Image がアイコンのファイルをクロールできる必要があります。robots.txt でアイコンのパスを拒否すると表示されません。
アイコンの URL は頻繁に変えないこと。反映には数日から数週間かかることがあります。

Search Console にファビコン専用のレポートはありません。急ぐときは、URL 検査ツールでトップページのインデックス登録をリクエストします。

WordPress の「サイトアイコン」が出力しているもの

日本の個人サイトや企業サイトでは、WordPress の「サイトアイコン」（クラシックテーマならカスタマイザーの「サイト基本情報」）でファビコンを設定することが多いはずです。カスタマイザーの説明文にあるとおり、画像は正方形で 512×512 ピクセル以上が求められます。

WordPress のソースコードの wp_site_icon() を読むと、出力されるのは次の 4 つです。

<link rel="icon" sizes="32x32">（32×32）
<link rel="icon" sizes="192x192">（192×192）
<link rel="apple-touch-icon">（180×180）
<meta name="msapplication-TileImage">（270×270、Windows のタイル用）

ICO は出力されません。代わりに、サーバーに favicon.ico の実ファイルがない場合、WordPress 5.4 以降は /favicon.ico へのリクエストを受け、サイトアイコンの 32×32 版へリダイレクトします（未設定なら WordPress のロゴ画像へ。do_favicon()）。レンタルサーバーの public_html に favicon.ico を置くと、サーバーがそのファイルを直接返すので、こちらが優先されます。サイトアイコンとは別の画像を置くと、ブラウザやツールによって違うアイコンが見えることになるので、どちらか一方にそろえます。

iPhone のホーム画面：apple-touch-icon は 180×180

iPhone で「ホーム画面に追加」したときのアイコンは apple-touch-icon です。Apple のドキュメントは、ページに <link rel="apple-touch-icon" href="..."> を書く方法と、link がなければサイトのルートで apple-touch-icon で始まる名前のファイルを探す方法の 2 つを説明しています。180×180 は Retina の iPhone 向け（60pt の 3 倍）として挙げられているサイズです。

角丸は iOS が付けるので、正方形のまま作ります。透明部分がどう描かれるかは Apple のドキュメントに書かれていないため、背景を塗りつぶした画像にしておくと端末による差が出ません。

Android とインストール：192・512 とマスカブル

Web サイトをアプリとしてインストールできるようにするには、Chrome のインストール要件を満たすマニフェストが必要です。name か short_name、start_url、display（fullscreen、standalone、minimal-ui、window-controls-overlay のいずれか）、そして 192px と 512px のアイコンです。

Android のランチャーはアイコンを円や角丸四角などの形に切り抜きます。"purpose": "maskable" を付けたアイコンは切り抜いてよいという意味で、ロゴは中心から幅の 40% を半径とする円の中に収める必要があります。外側の 10% は切られることがあるからです（web.dev: マスカブルアイコン）。同じ記事は、1 つのファイルに "any maskable" と両方を書くことを勧めていません。切り抜き用の余白を取ったアイコンを、そのまま表示する場面でも使うとロゴが小さく見えるためです。any 用と maskable 用は別のファイルにします。Chrome の DevTools の「Application → Manifest」で、切り抜き後の安全領域を確認できます。

favicon.ico の中身

ICO ファイルは、6 バイトのヘッダー、画像 1 枚につき 16 バイトのディレクトリ項目、そのあとに画像本体が続く形式です。各項目には幅と高さ（各 1 バイト、0 は 256 を意味する）、1 ピクセルあたりのビット数、画像のバイト数、ファイル先頭からの位置が入ります。Windows Vista 以降は画像部分にビットマップではなく PNG ファイルをそのまま入れられ、ブラウザもこの形式を読めます。

実測に使った favicon.ico（「Z」の文字アイコン）を Python の struct で読むと、次のとおりでした。

項目	幅 × 高さ	ビット数	バイト数	位置	中身
1	16 × 16	32	343	54	PNG
2	32 × 32	32	539	397	PNG
3	48 × 48	32	714	936	PNG

最初の画像は 54 バイト目（6 + 3 × 16）から始まり、ファイル全体は 1,650 バイトです。16・32・48 を 1 つの ICO にまとめておけば、通常の画面と Retina 画面のタブ、Windows のショートカットをまかなえます。それより大きいサイズは、マニフェストや apple-touch-icon が指す PNG に任せます。

SVG ファビコンとダークモード

SVG のアイコンはどのサイズにも拡大縮小でき、ファイル内の <style> に prefers-color-scheme のメディアクエリを書けば、OS のテーマに合わせて色を変えることもできます。

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

上の実測の 5 番目のページで、Chromium が取りに来たのは icon.svg だけでした。ICO の行は、SVG アイコンに対応していないブラウザと、SVG を対応形式に挙げていない Google 検索のために残します。テーマを切り替えたときにタブのアイコンが描き直されるかはブラウザ次第で、今回は確かめていません。また、ファビコンの SVG は画像として描画されるため、外部のフォントや画像、スクリプトは読み込まれません。必要なものはファイルの中に含めます。

ZeroTool のジェネレーターで作る手順と、直しておく点

ファビコンジェネレーターは、絵文字、1〜4 文字のテキスト、アップロードした画像、貼り付けた SVG をブラウザ内のキャンバスに描き、11 個のファイルを ZIP にまとめます。画像はどこにもアップロードされません。実測では、初期設定のロケット絵文字（透明背景）と、青背景の「Z」の 2 通りで作りました。

ファイル	ピクセル	ロケット絵文字	文字「Z」	使われ方
`favicon.ico`	16・32・48	6,029 B	1,650 B	タブ（Chromium が選んだ）
`favicon-16.png`	16	855 B	343 B	`link` はあるが Chromium は取得せず
`favicon-32.png`	32	1,770 B	539 B	同上
`favicon-48.png`	48	3,350 B	714 B	同上
`favicon-64.png`	64	5,382 B	904 B	どの `link` からも参照されない
`favicon-96.png`	96	10,278 B	1,328 B	同上
`favicon-128.png`	128	16,203 B	1,852 B	同上
`apple-touch-icon.png`	180	29,689 B	2,744 B	iPhone のホーム画面
`android-chrome-192.png`	192	33,238 B	3,003 B	マニフェスト
`android-chrome-512.png`	512	98,017 B	9,286 B	マニフェスト
`site.webmanifest`	—	438 B	438 B	ページを開いた時点で取得

ツールの表示は、絵文字が「11 files · 200.4 KB」、文字が「11 files · 22.3 KB」でした。カラー絵文字はグラデーションが多いため、PNG が平たい文字の 10 倍ほどになります。絵文字は OS の絵文字フォントで描かれるので、Mac と Windows で作ると見た目が変わります。どの環境でも同じ結果にしたいときは、画像か SVG の入力を使います。

ツールが出す HTML は次のとおりです。

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

site.webmanifest（サイト名の欄に「Example Site」、短い名前の欄に「Example」を入れ、テーマカラーは初期値、背景は透明の場合）はこうなります。

{
  "name": "Example Site",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "/android-chrome-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

このマニフェストは Chrome のインストール要件のうちマニフェストの項目を満たしています。name と short_name、"start_url": "/"、"display": "standalone"、2 つのサイズのアイコンがそろっているためです。サイト名の欄を空にすると、ツールは空文字を書かずに name と short_name を省き、Chrome がインストールを案内しないことを表示します。

公開前に、必要に応じて次の 2 点を直します。

マスカブルアイコンを足します。2 つのアイコンはどちらも "any" です。パッケージに切り抜き用の余白を取った画像がないためです。必要なら、ロゴが中央の円に収まるよう余白を取った 512px の画像を別に作り、"purpose": "maskable" で追加します。円形のロゴなら各辺 10% 程度、四角いロゴは角も円に収める必要があるので 22% 程度の余白が目安です（ジェネレーターの余白は 30% まで設定できます）。
不要なら、どこからも参照されない 64・96・128 の PNG と、ICO がある場合に Chromium が使わなかった 16・32・48 の PNG の行を削除します。

ファイルはサイトのルートに置きます。HTML とマニフェストがルートからのパスで書かれているためです。WordPress の場合は、サイトアイコンを設定済みなら link が二重にならないよう、どちらか一方にしてください。最後に、DevTools の「Application → Manifest」、iPhone の「ホーム画面に追加」、Google がトップページを再クロールした後の検索結果で確認します。高解像度の元画像を作るときは SVG PNG 変換ツールが使えます。