ファビコンの拡張子・ファイル形式ガイド｜ICO・PNG・SVGどれを使うべき？

結局、ファビコンの拡張子は何を使えばいいの？

「ファビコンは.icoじゃないとダメ？」「PNGやSVGは使えるの？」——Web制作をしていると、一度はぶつかる疑問です。

結論を先に言うと、2026年現在、.icoだけが正解ではありません。PNG、SVG、さらにはGIFもファビコンとして利用できます。ただし、ブラウザごとに対応状況が異なるため、形式の選び方にはコツがあります。

この記事では、ファビコンに使える全ファイル形式を比較し、ブラウザ対応状況・HTMLの書き方・実務での推奨構成まで一気に解説します。

ファビコンに使えるファイル形式一覧

まずは、ファビコンとして技術的に利用可能な形式を整理します。

それぞれの特徴を詳しく見ていきましょう。

ICO形式（.ico）——長年の標準

ICOはMicrosoft が開発したアイコン専用フォーマットで、ファビコンの「元祖」です。

ICOの特徴

• マルチサイズ対応：16x16、32x32、48x48など複数サイズを1ファイルに格納できる
• ブラウザ互換性：IE5の時代からすべてのブラウザで対応。最も安全な選択肢
• 自動検出：/favicon.ico をルートに配置するだけで、HTMLに何も書かなくても読み込まれる

ICOの弱点

• ファイルサイズがPNGより大きくなりがち（内部にPNGデータを埋め込めば軽量化できますが、古いツールで作られたBMPベースのICOは同じ見た目でもかなり重くなります）
• ベクターではないため、高解像度ディスプレイへの対応はサイズを追加していくしかない
• 制作ツールが限られる（Photoshop単体では書き出せない。内部にPNGを使う場合でも、最終的に.ico形式にパッキングする一手間がかかります）

マルチサイズICOの仕組みについては、マルチサイズICOとは？仕組みと作り方をわかりやすく解説で詳しく解説しています。

関連記事マルチサイズICOとは？仕組みと作り方をわかりやすく解説ICOファイルに複数サイズの画像を格納する「マルチサイズICO」の仕組み、メリット、作り方を解説します。

HTMLの書き方

<!-- ルートに置くだけで自動検出される（HTMLタグ不要） -->
<!-- 明示的に指定する場合 -->
<link rel="icon" href="/favicon.ico">

当サイトの画像→ファビコン変換ツールを使えば、PNG画像からマルチサイズICOを簡単に作成できます。

PNG形式（.png）——現在のメインストリーム

PNG はファビコンの実質的な標準フォーマットとして、もっとも広く使われています。ICOの代わりにPNGだけで運用しているサイトも増えています。

PNGの特徴

• 透過対応：アルファチャンネルによる滑らかな半透明が可能（ICOのBMP埋め込みでは透過が荒くなることがある）
• 軽量：ICO（BMP埋め込み）と比べてファイルサイズが小さい。32x32pxなら通常1〜3KB程度
• 制作が簡単：Photoshop、Figma、Canvaなど、あらゆる画像編集ツールで書き出せる
• ブラウザ対応率：約97%（IE10以前を除くほぼ全ブラウザ）
• Apple Touch Iconに必須：iOSのホーム画面アイコンはPNG形式のみ対応（180x180px）
• PWAアイコンに必須：Web App Manifestで指定するアイコンもPNG形式（192x192, 512x512px）

PNGの弱点

• 1ファイル1サイズのため、複数サイズが必要な場合はファイル数が増える
• ラスター形式なので、拡大するとぼやける（高解像度対応にはサイズ追加が必要）

Google検索結果とPNGファビコン

Googleは検索結果に表示するファビコンについて、48pxの倍数を推奨しています。最小構成なら48x48pxのPNG1枚でブラウザタブとGoogle検索結果の両方をカバーできます。

HTMLの書き方

<!-- 基本（1サイズ） -->
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.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">

<!-- Apple Touch Icon（iOS用、PNGのみ対応） -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

type="image/png" と sizes を明記するのがポイントです。ブラウザはsizesを手がかりに、表示場所に適したサイズを選びます。

PNG1枚で済ませるなら48x48、しっかり対応するなら16+32+48の3サイズ、さらにApple Touch IconとPWAまで含めるなら180+192+512も加えます。全サイズをまとめて準備するならアプリアイコン一括生成ツールが便利です。

SVG形式（.svg）——モダンな最適解

SVGはベクター形式のため、どんなサイズでもくっきり表示されるのが最大の強みです。

SVGの特徴

• 無限拡縮：ベクターなので16pxでも512pxでも鮮明
• ファイルサイズが極小：テキストベースなのでシンプルなアイコンなら数百バイト
• ダークモード対応：CSS @media (prefers-color-scheme: dark) を埋め込める
• 1ファイルで全サイズ対応：サイズ別に用意する必要がない

SVGの弱点

• Safari対応がv26以降（2025年後半〜）。それ以前のSafariでは表示されない
• 写真的なアイコンには不向き（ベクター向きのシンプルなデザインに限る）
• iOSのホーム画面アイコン（Apple Touch Icon）にはPNGが必要

ブラウザ対応状況

2026年3月時点で約90%のブラウザがSVGファビコンに対応しています。Safari v26で対応が追加されたことで、実用段階に入ったと言えます。

HTMLの書き方

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

ダークモード対応の書き方

SVGファビコンならではの機能として、ダークモード時にデザインを自動切替できます。SVGファイル内にCSSを埋め込みます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #2563eb; }
    text { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #60a5fa; }
    }
  </style>
  <rect width="32" height="32" rx="6" />
  <text x="16" y="22" text-anchor="middle" font-size="20" font-weight="bold">F</text>
</svg>

ライトモードでは濃い青、ダークモードでは明るい青に自動で変わります。PNG/ICOではこの切り替えはできません。

SVGファビコンの作り方・ダークモードの実装パターン・最適化テクニックは以下の記事で詳しく解説しています。

関連記事SVGファビコン完全ガイド｜作り方・ダークモード対応・フォールバック実装までSVGファビコンの実装方法を徹底解説。ダークモード自動切替、ICO/PNGフォールバック、最適化テクニック、ブラウザ対応状況まで。コピペ可能なコード付き。

GIF形式（.gif）——アニメーションの可能性

GIFをファビコンに使うメリットはアニメーションです。タブでアイコンが動くと目を引きます。

注意点

• アニメーションが再生されるのはFirefoxだけ。Chrome・Safari・Edgeでは1フレーム目が静止画として表示される
• 透過は1ビット（半透明は不可、ギザギザになりやすい）
• 2026年現在、実用性は低い

通知バッジ的な演出をしたい場合は、JavaScriptで <link> タグの href を動的に差し替える方法が現実的です。

JPEG形式（.jpg）——おすすめしない

JPEGはファビコンに使えるが、使うべきではない形式です。

• 透過非対応：背景色が必ず入るため、タブの背景色と合わない場合に違和感が出る
• PNGと比べてファイルサイズの優位性もほぼない（16〜48pxの小画像では差が出にくい）
• 意図的にJPEGを選ぶ理由がない

HTMLの書き方（参考）

<link rel="icon" type="image/jpeg" href="/favicon.jpg">

WebP・AVIF——まだ早い

WebPやAVIFは画像フォーマットとしては広くサポートされていますが、ファビコンとしての対応状況はまだ不安定です。

• WebP：Chromium系ブラウザでは動作するが、Safariでのファビコン対応は未確認
• AVIF：ファビコンとしての対応はごく限定的

2026年時点では、WebP/AVIFをファビコンに使うのは時期尚早です。数年後に状況が変わる可能性はありますが、今はPNGまたはSVGで十分です。

ブラウザ対応状況まとめ

各形式のブラウザ対応を一覧にまとめます。

ここで押さえておきたいのは、ICOは100%だがPNGも97%、SVGも90%に達しているという点です。「ICO以外はダメ」という時代はとっくに終わっています。

2026年の推奨構成

では実際にどの形式をどう組み合わせればよいのか。サイトの要件に合わせた3段階の構成を紹介します。

最小構成（1ファイル）

「細かいことは気にしない、とにかく表示されればいい」場合。

<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">

48x48のPNG1枚で、ブラウザタブとGoogle検索結果の両方をカバーできます。Googleは48pxの倍数のファビコンを推奨しているため、このサイズが効率的です。

標準構成（3〜4ファイル）

ほとんどのサイトにはこれで十分です。

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

加えて、/favicon.ico（32x32）をルートに配置しておけばレガシーブラウザも安心です。

フル構成（PWA対応）

PWA（Progressive Web App）やAndroidホーム画面への追加も考慮する場合。

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

site.webmanifest に192x192と512x512のPNGを定義します。

当サイトのアプリアイコン一括生成ツールを使えば、全サイズのPNG + ICO + マニフェストファイル + HTMLスニペットをまとめてダウンロードできます。

各サイズの用途について詳しくはファビコンのサイズ一覧 2026年版で解説しています。

関連記事ファビコンのサイズ一覧 2026年版｜全プラットフォーム完全対応ガイドFavicon、Apple Touch Icon、Android Chrome、Microsoft Tile、OG画像など、全プラットフォームで必要なアイコンサイズを網羅的に解説。

よくある誤解：「ファビコンは.icoでないとダメ」？

日本語のWeb制作記事では、いまだに「ファビコンはICO一択」という情報が散見されます。これは2010年代前半までは正しかったのですが、2026年現在は誤りです。

実態としては：

• <link rel="icon" type="image/png"> は2012年頃からほぼ全ブラウザでサポート
• <link rel="icon" type="image/svg+xml"> は2025年のSafari v26対応で実用段階に到達
• ICOが必要なのはIE11以前を本気でサポートする場合のみ

ただし、/favicon.ico をルートに配置しておく慣習は今でも有効です。HTMLに <link> タグを書かなくても、ブラウザが自動的に /favicon.ico を探しに行く仕様は健在です。フォールバックとしてICOを残しつつ、メインはPNGまたはSVGにするのが現代のベストプラクティスです。

「rel="shortcut icon"」はもう不要

古い記事やテンプレートで見かける rel="shortcut icon" という書き方。これは非標準であり、現在は不要です。

<!-- 古い書き方（非推奨） -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- 正しい書き方 -->
<link rel="icon" href="/favicon.ico">

HTML仕様では rel="icon" が正式な値です。shortcut は歴史的経緯でIEが独自に使っていたもので、現在のブラウザは rel="icon" だけで正しく動作します。

同様に、Safari用の rel="mask-icon" も現在は不要です。

<!-- かつてSafariピン留めタブ用に必要だった（現在は不要） -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">

これはSafariがSVGファビコンに未対応だった時代に、ピン留めタブ用としてモノクロSVGを指定するために使われていた独自仕様です。Safari v26以降は標準の rel="icon" type="image/svg+xml" でSVGファビコンが認識されるため、mask-icon を新たに追加する必要はありません。古いテンプレートに残っている場合は、削除しても問題ないでしょう。

自サイトのファビコンの拡張子を確認する方法

「自分のサイトのファビコンが何の形式で設定されているかわからない」という場合は、当サイトのICOファイル分析ツールで確認できます。

URLを入力するだけで、そのサイトのHTMLから <link rel="icon"> タグを自動検出し、設定されているすべてのアイコン（ICO・PNG・SVG等）を一覧表示します。

よくある質問（FAQ）

Q. PNGをファビコンに使うとき、拡張子は.pngのままでいい？

はい、拡張子は.pngのままで問題ありません。HTMLの <link> タグで type="image/png" を指定すればブラウザが正しく認識します。.icoに変換する必要はありません。ただしフォールバック用に /favicon.ico もルートに配置しておくと安心です。

Q. PNGファイルの拡張子を.icoに書き換えたらICOになる？

なりません。 logo.png のファイル名を logo.ico に変更しても、ファイルの中身（データ構造）はPNGのままです。Chromeなど一部のブラウザは中身を見て判断してくれるため表示されることもありますが、ICO形式を前提とする古いブラウザでは正しく読み込まれません。拡張子の書き換えではなく、変換ツールなどを使って正しいICOバイナリ形式に変換する必要があります。

Q. SVGファビコンはすべてのブラウザで使える？

2026年3月時点で約90%のブラウザが対応しています。Safari v26（2025年〜）で対応が追加されたのが大きな転換点です。ただしIEや古いSafariでは表示されないため、PNGまたはICOのフォールバックを併記するのが定石です。

Q. .icoファイルはもう不要？

完全に不要ではありません。/favicon.ico をルートに置いておく慣習は、レガシーブラウザやクローラーへの対応として今も有効です。ただし、HTML内で <link> タグを書く際のメイン形式はPNGまたはSVGで十分です。

Q. GIFアニメーションのファビコンは作れる？

技術的には可能ですが、アニメーションが再生されるのはFirefoxだけです。Chrome・Safari・Edgeでは最初のフレームが静止画として表示されます。全ブラウザでアニメーションさせたい場合は、JavaScriptで <link> タグの href を動的に差し替える方法があります。

Q. WebPはファビコンに使える？

Chromium系ブラウザ（Chrome・Edge）では動作しますが、Safari等での対応が不安定です。2026年時点ではPNGの方が確実で、WebPをファビコンに使うメリットはほぼありません。

Q. WordPress はどの形式に対応している？

WordPressのカスタマイザー（サイトアイコン機能）はPNG形式を推奨しています。512x512px以上のPNG画像をアップロードすると、WordPress側で必要なサイズを自動生成してくれます。詳しくはWordPressのファビコン設定方法をご覧ください。

まとめ

2026年のファビコンは「SVGまたはPNGをメインに、ICOをフォールバックに」が正解です。

ファビコン画像の準備がまだの方は、ファビコンの作り方を参考に作成してみてください。当サイトのツールで作成したファビコンは、商用利用を含め自由にご利用いただけます。

関連記事ファビコンの作り方｜無料で簡単に作成する3つの方法【2026年最新】ファビコン（favicon）を無料で作成する方法を3パターン紹介。画像からの変換、テキストでの自作、図形を組み合わせたデザインまで、目的別に手順をわかりやすく解説します。