2026年に必要なファビコンのサイズは？理想的なセットを解説

2026年の理想的なファビコンセットは次のとおりです。16・32・48 px の画像を含む favicon.ico、（Google 検索用の）96x96 の PNG、任意の SVG ファビコン、180x180 の apple-touch-icon.png、そしてウェブアプリマニフェストで宣言する 192x192 と 512x512 の PNG（加えてマスカブル対応の 512）。Windows タイルや旧式の Apple 向けサイズは、非常に古いデバイスをサポートする必要がある場合にのみ必要です。以下では、サイズ一覧表、すぐに使える HTML、よくある間違いとともに、その理由を説明します。

かつてのファビコン事情は混沌としていました。ブラウザや OS ごとに異なるサイズが求められ、悪名高い 20 行もの <head> ブロックが生まれたのです。しかし今ではそのほとんどが不要になりました。最新のブラウザは 1 つの良質なアイコンを拡大縮小して使い、iOS は 1 サイズだけを求め、Android はマニフェストを読み込みます。この記事では、本当に必要なものと、あれば便利という程度のものを切り分けて解説します。

結論：理想的なファビコンファイルのセット

• サイトのルートに置く favicon.ico（16・32・48 px を 1 ファイルに格納）。ブラウザ、フィードリーダー、多くのツールは今でも /favicon.ico を自動的にリクエストします。
• favicon.svg（任意ですが推奨）。あらゆるサイズで鮮明に表示され、ダークモードにも対応できます。
• 明示的なフォールバックとしての PNG 16x16、32x32、96x96。96 px 版は、48 px の倍数を求める Google 検索で役立ちます。
• 180x180 の apple-touch-icon.png。不透明で、透過なし。
• manifest.json に記載する 192x192 と 512x512 の PNG、および Android 用の マスカブル 512x512 アイコン。
• モバイルでブラウザ UI に色を付ける theme-color メタタグ。
• Windows タイル（70、150、310 px）と browserconfig.xml。旧式の Windows や IE11 のピン留めサイトにのみ必要です。

ファビコンサイズ一覧表：用途、ファイル名、優先度

この表をチェックリストとして使ってください。「必須」は、なければ通常のサイトが壊れて見えたり未完成に見えたりするもの、「推奨」は品質が明確に向上するもの、「任意」は特殊な用途や旧環境向けのものを指します。

favicon.ico：16・32・48 px を 1 ファイルに

ICO ファイルは複数のビットマップを格納できるコンテナです。優れた favicon.ico には 16x16、32x32、48x48 の画像が含まれており、ブラウザや OS が最も適したものを選べます。ドメインのルート（https://example.com/favicon.ico）に配置してください。HTML で別の場所を指定していても、多くのクローラー、RSS リーダー、古いブラウザは今でもこの URL をそのままリクエストするため、置いておけばログに 404 エラーが残るのを防げます。

PNG の拡張子を単に .ico に変更するのはやめましょう。ほとんどのブラウザは受け入れますが、拒否するツールもあり、マルチ解像度の利点も失われます。本物の ICO として書き出してください。

PNG ファビコン：16、32、96 px

sizes を明示した PNG のリンクを使えば、ブラウザは ICO を解析せずに最適なビットマップを選べます。実際には、32x32 で高 DPI のタブをカバーでき、16x16 は今ではほぼ不要です。96x96 は追加する価値があります。Google 検索は結果の横にファビコンを表示し、サイズが 48 px の倍数（48x48、96x96、144x144 など）の正方形アイコンを必要とするためです。モバイル向け結果にダウンサンプリングする際、96 px のファイルは 48 px のものより鮮明な元画像になります。

デザインのコツ：16 px では細部が消えてしまいます。太くシンプルな形、高いコントラストを使い、文字はほとんど、あるいはまったく入れないようにしましょう。書き出す前に MakeFav エディタでアイコンを調整・プレビューできます。

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

SVG ファビコンは、どの画面密度でも鮮明に表示される小さな 1 ファイルです。Chromium ベースのブラウザと Firefox が対応しています。Safari の対応は以前から限定的なので、SVG だけに頼らず、ICO と PNG のフォールバックを残してください。

最大の利点はテーマ対応です。SVG には CSS を含められるため、prefers-color-scheme を使ってユーザーのカラースキームに合わせてアイコンを変化させられます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

このメディアクエリはタブバーが使うブラウザまたは OS のテーマを反映するものであり、ご自身のウェブサイト上のテーマ切り替えには連動しない点に注意してください。

既知の癖として、ICO と SVG の両方を記載すると、Chrome が ICO を選ぶことがあります。ICO を sizes="32x32" で宣言し、SVG をその後ろに記載すると、Chrome は SVG を優先します。下のコードがその例です。

Apple タッチアイコン：180x180 と旧式のサイズ

ユーザーがサイトを iOS や iPadOS のホーム画面に追加すると、Safari は apple-touch-icon を使用します。現在は 180x180 px の PNG 1 枚で十分です。古いデバイスや iPad 向けには iOS が縮小して使います。ファイル名を apple-touch-icon.png にしてルートに置いてください。link タグがない場合、iOS はこのファイルをデフォルトで探しに行きます。

Apple アイコンのルール：

• 透過は不可。iOS は透明なピクセルを黒で塗りつぶすため、透過ロゴはしばしば黒い塊になってしまいます。単色の背景色を付けてください。
• 角丸にしない。iOS が独自の角丸マスクを適用します。完全な正方形を用意してください。
• 角が切り取られるため、重要な要素は端から離して配置しましょう。

旧式のサイズ（57、72、76、114、120、144、152、167）が必要なのはどんなときか？iOS 6 以前をサポートする場合、または iPad Pro（167 px）や iPad（152 px）でデバイスごとにピクセル単位で正確に制御したい場合だけです。2026年のほぼすべてのサイトでは、180x180 のファイルだけで問題ありません。下の最大互換セットアップには、念のためいくつか含めています。

Android と PWA のアイコン：192、512、マスカブル

Android の Chrome をはじめとする PWA 対応ブラウザは、<link rel="icon"> ではなくウェブアプリマニフェストからアイコンを読み込みます。インストール可能にするには、少なくとも 192x192 と 512x512 の PNG が必要です。192 px のアイコンはホーム画面とアプリランチャーで、512 px のアイコンはスプラッシュ画面とインストールダイアログで使われます。

マスカブルアイコンとセーフゾーン

Android のアダプティブアイコンは、デバイスに応じて円形、スクワークルなどの形に切り抜かれます。マスカブルアイコンは安全に切り抜かれるよう設計されたもので、重要な要素はセーフゾーン、つまり画像の 80% の直径を持つ中央の円（半径は一辺の 40%）の内側に収める必要があります。512x512 のファイルなら、ロゴを直径約 410 px の円内に収め、マスク後に隙間が出ないよう背景色を四辺すべてまで広げるということです。

マスカブルアイコンは "purpose": "maskable" を付けた独立したエントリとして宣言してください。1 つのファイルに "any maskable" を指定するのは避けましょう。マスク用の余白は、マスクなしで表示すると小さすぎて見えます。

manifest.json の例

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

このファイルは application/manifest+json（または application/json）として配信し、すべてのページから <link rel="manifest" href="/manifest.json"> でリンクしてください。site.webmanifest という名前にするプロジェクトもありますが、名前は重要ではなく、重要なのはリンクです。

Windows タイルと browserconfig.xml

Windows 8.1 と 10 では、ユーザーがサイトをスタートメニューにピン留めでき、IE11 や旧 Edge は browserconfig.xml からタイル画像を読み込みます。一般的なサイズは 70x70（小）、150x150（中）、310x150（ワイド）、310x310（大）です。Chromium ベースの Edge は代わりにマニフェストと通常のファビコンを使うため、これは旧式の機能です。企業環境など、古い Windows 環境のユーザーがまだ想定される場合にのみ含めてください。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color：ブラウザ UI に色を付ける

theme-color メタタグは、モバイルブラウザ（および一部のデスクトップブラウザ）にアドレスバーやタイトルバーに使う色を伝えます。ファビコンではありませんが、同じブランディングセットに属するものです。ライトモードとダークモードで別々の値を指定できます。

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

最小限のモダン構成と最大互換構成

最小限のモダン構成（ほとんどのサイトに推奨）

5 つのファイルで、実際の利用の 99% 以上をカバーできます。favicon.ico、favicon.svg、apple-touch-icon.png（180x180）、そして 2 つのマニフェストアイコン（192 と 512）です。Google 検索での表示が重要なら 96x96 の PNG を、PWA を提供するならマスカブルアイコンを追加してください。

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

最大互換構成

幅広いユーザーや企業向けにサイトを提供する場合や、あらゆるクライアントをカバーしたい場合はこちらを選びましょう。明示的な PNG サイズ、旧式の Apple サイズ、Windows タイル、テーマカラーが加わります。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

/ で始まるルート相対パスに注目してください。これならどの階層のページでも機能します。ここから、最もよくある間違いの話に移ります。

よくあるファビコンの間違いと対処法

1. パスの誤り

href="favicon.ico" のようなリンクは現在の URL からの相対パスとして解決されるため、/ では動作しても /blog/post/ では動作しません。ルート相対（/favicon.ico）または絶対 URL を使ってください。また、ファイルが実際に存在するか確認しましょう。各 URL をブラウザで直接開き、404 ページやログイン画面へのリダイレクトではなく HTTP 200 が返ることを確かめてください。

2. sizes 属性の欠落または誤り

sizes がないと、ブラウザは中身を調べるためにアイコンをダウンロードしなければならず、誤ったものを選ぶ可能性もあります。PNG のリンクには必ず sizes を宣言し、実際のピクセル寸法と一致させてください。32x32 と記載されているのに実際は 64x64 のファイルがあると、結果が不安定になります。

3. 強力なキャッシュ

ブラウザはファビコンを、ページのキャッシュとは別に長期間キャッシュすることがよくあります。リブランディング後も、古いアイコンが数日間残る場合があります。ファイル名を変更するかバージョンのクエリ文字列（/favicon.ico?v=2）を追加し、link タグを更新してください。スーパーリロードではタブのアイコンが更新されないことが多く、アイコンの URL を直接開いてリロードするとたいてい更新されます。

4. 正方形でない画像

ファビコンは正方形でなければなりません。長方形のロゴは、引き伸ばされたり、切り取られたり、余白付きで表示されたりと、予測できない扱いを受けます。横長のロゴタイプを縮小するのではなく、頭文字やシンボルのような専用の正方形のマークをデザインしましょう。

5. 透過の Apple タッチアイコンが黒くなる

iOS は透明部分を黒で塗りつぶします。180x180 のアイコンには不透明な背景を付け、角をあらかじめ丸めないでください。

6. セーフゾーンのないマスカブルアイコン

ロゴがマスカブルアイコンの端に触れていると、Android はそれを切り落とします。中央の 80% の円の内側に収め、キャンバス全体を背景色で塗りつぶしてください。

7. クローラーからアイコンをブロックしている

robots.txt でファビコンのパスを禁止していると、Google はそれを取得できず、検索結果に汎用的な地球儀アイコンが表示されます。また、Google はページと同じホストにあるファビコンを必要とし、更新も時々しか行わないため、変更が反映されるまで数日から数週間かかる場合があることも覚えておきましょう。

8. マニフェストのリンクや purpose の書き忘れ

マニフェストがリンクされていない、または 192 px と 512 px のアイコンがない場合、Chrome でインストールプロンプトが表示されません。ブラウザの開発者ツールの Application タブで検証してください。

ワンクリックでセット一式を生成

画像編集ソフトで十数個のファイルを手作業で作成し、ICO に変換してマニフェストを書くのは、面倒でミスも起きがちです。MakeFav なら、1 つの画像、テキスト、または絵文字から、上記のすべてのファイルを生成できます。マルチサイズの favicon.ico、PNG、SVG、Apple タッチアイコン、192/512 の PNG、マスカブルアイコン、Windows タイル、manifest.json、browserconfig.xml、さらにそのまま貼り付けられる HTML スニペットまで、すべて 1 つの ZIP ファイルでダウンロードできます。エディタで背景、余白、形を微調整したり、ファビコンチェッカーで既存のサイトを検証したり、開発者向けリソースで生成を自動化したりすることもできます。

デプロイ前チェックリスト

1. すべてのファイルをサイトのルートにアップロードする。
2. HTML スニペットをすべてのページ（または共通レイアウト）の <head> に貼り付ける。
3. パスがルート相対で、HTTP 200 が返ることを確認する。
4. ライトモードとダークモード、iOS のホーム画面への追加、Android へのインストールを確認する。
5. チェッカーを実行して、欠落やサイズの不一致を見つける。
6. 古いアイコンを置き換えた場合は、バージョン文字列でキャッシュを回避する。

よくある質問

2026年でも favicon.ico は必要ですか？

はい。最新のブラウザは PNG や SVG を受け付けますが、多くのクローラー、フィードリーダー、メールクライアント、古いブラウザは今でも /favicon.ico を直接リクエストします。16・32・48 px の画像を含むマルチサイズ ICO は小さなファイルで、アイコンの欠落や 404 エラーを防げます。

Google 検索用のファビコンのサイズは？

Google は、サイズが 48 px の倍数で、最低 48x48 の正方形のファビコンを必要とします。96x96 の PNG なら安心で、SVG もサポートされています。また、ファイルがクロール可能であることも必要なので、robots.txt でブロックしないでください。更新が反映されるまで数日から数週間かかることがあります。

Apple タッチアイコンは 180x180 で十分ですか？

ほとんどのサイトでは十分です。iOS と iPadOS は、現行のすべてのデバイス向けに 180x180 の PNG を縮小します。古いサイズ（57〜152 px）が関係するのは、非常に古い iOS バージョンだけです。アイコンが黒くならないよう、不透明な背景を使うことを忘れないでください。

マスカブルアイコンとは何ですか？必要ですか？

マスカブルアイコンは、Android のアダプティブアイコンの形状向けに設計された 512x512 の PNG です。重要な要素は中央にある直径 80% の円の内側に収め、背景は正方形全体を埋めます。必要になるのはインストール可能な PWA を提供する場合だけですが、アイコンが白い円の中にぽつんと収まるのではなく、ネイティブアプリのように見えるようになります。

変更したのに古いファビコンが表示され続けるのはなぜですか？

ブラウザはファビコンを別個に、しかも長期間キャッシュします。ファイル名を変更するか ?v=2 のようなバージョンのクエリ文字列を追加し、link タグを更新してから、アイコンの URL を直接開いてリロードしてください。検索エンジンが独自のコピーを更新するには、さらに時間がかかることがあります。