ファビコンのSVG・PNG・ICO違いと正しい設定方法を徹底解説
ファビコンの形式（SVG・PNG・ICO）ごとの違いと、ブラウザ対応・設定方法をWeb担当者向けに解説。ブラウザ内完結の無料ツールも紹介。
ファビコンとは何か、なぜ形式選びが重要なのか
ファビコン（favicon）はブラウザのタブ、ブックマーク一覧、スマートフォンのホーム画面ショートカットなど、あらゆる場面でサイトを識別するための小さなアイコンだ。見た目上は小さな要素だが、形式の選び方を誤るとブラウザによって表示が崩れたり、高解像度ディスプレイでぼやけたりする。
ファビコンに使われる主な形式は ICO・PNG・SVG の3種類で、それぞれ特性がまったく異なる。どれか一つだけを置けば済む、という状況は現代のWebでは通用しない。
ICO・PNG・SVG それぞれの違い
ICO形式：後方互換性のための「保険」
.ico はもともとWindowsのアイコン用形式で、1ファイルに複数の解像度（16×16, 32×32, 48×48など）を格納できる。Internet ExplorerはICOしか認識しなかった歴史的経緯から、長らくファビコンのデファクト標準だった。
現在のChromeやFirefox、Safariも favicon.ico をルートディレクトリに置けば認識するため、「favicon.ico をとりあえず置く」という慣習が今も続いている。ただしベクター化できないため、拡大時に劣化する。
PNG形式：現在の主流
PNGはアルファチャンネル（透明）をサポートし、色再現性も高い。モダンブラウザはすべてPNGのファビコンに対応しており、以下のサイズが実務上の標準とされている。
| 用途 | サイズ |
|---|---|
| ブラウザタブ（汎用） | 32×32 px |
| Apple Touch Icon（iOSホーム画面） | 180×180 px |
| Android / PWAアイコン | 192×192 px, 512×512 px |
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> のように sizes 属性を明示することで、ブラウザが適切な解像度を選択できる。
SVG形式：将来に向けた「スケーラブル」な選択
SVGはXMLベースのベクター形式で、どんな解像度でも劣化しない。ChromeやFirefox、Edgeはすでに rel="icon" でのSVGを正式サポートしており、<link rel="icon" type="image/svg+xml" href="/favicon.svg"> と記述するだけで有効化できる（MDN: rel=icon）。
ただしSafariはSVGファビコンに対応していない（2025年時点）。そのため現時点でSVGだけに依存するのはリスクがあり、ICOやPNGとの併用が推奨される。
また、SVGにはダークモード対応という強みもある。CSSの prefers-color-scheme メディアクエリをSVG内に埋め込むことで、OSのダークモード設定に応じてアイコンの色を自動切替できる。
推奨される現実的な設定パターン
形式ごとの特性を踏まえると、現代のWebサイトに最低限必要なファビコン構成は以下のとおりだ。
<!-- ICO：後方互換（ルートに置くだけでブラウザが自動検出） -->
<!-- favicon.ico は <link> 不要でルートに置くと自動認識 -->
<!-- PNG：モダンブラウザ・各種デバイス向け -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- SVG：Chrome / Firefox / Edge 向け（将来性） -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PWA / Android向け -->
<link rel="manifest" href="/site.webmanifest">
site.webmanifest の icons 配列に192×192と512×512のPNGを登録しておくと、Androidホーム画面への追加やPWAインストール時に適切なアイコンが表示される（Web App Manifest仕様 - W3C）。
ポイントは「SVGを優先しつつICOとPNGを保険として残す」構成にすることだ。ブラウザは <link> タグを上から評価し、サポートしている形式を自動で選ぶため、複数形式を並べても問題ない。
実際にファビコンを用意する方法
手順1：元画像を用意する
最低でも512×512px以上の正方形画像（PNGまたはSVG）を用意する。これを元に各サイズへリサイズ・変換する。ロゴや既存のアイコン素材をそのまま使うことが多い。
手順2：必要なサイズ・形式に変換する
複数サイズのICO、各種PNG、SVGを手作業で揃えるのは手間がかかる。オンラインツールを使うのが現実的で、代表的なものに RealFaviconGenerator や Favicon.io がある。どちらも無料で使えるが、アップロードした画像がサーバーに送信・保存される点は留意が必要だ。
プライバシーを重視する場合、または社内ロゴや非公開素材を扱う場合は、ファイルがサーバーへ送信されないツールが安心だ。ファビコン生成ツール はブラウザ内だけで処理が完結し、アップロードした画像が外部サーバーに送信されない設計になっている。ICO・PNG・SVGの各形式を一括で出力できるため、上記の推奨構成を一度に揃えられる。
手順3：ファイルを配置してHTMLに記述する
生成したファイルをWebサーバーのルートディレクトリ（または任意のパス）に配置し、前節で示した <link> タグを <head> 内に記述すれば完了だ。
配置後は複数のブラウザとデバイスで表示を確認する。Chromeの開発者ツール（DevTools）のApplicationタブにある「Manifest」セクションでPWA用アイコンの認識状況も確認できる。
よくある失敗と注意点
キャッシュが残って更新されない：ファビコンはブラウザに強くキャッシュされる。変更後に反映されない場合は、ファイル名にバージョン番号やクエリパラメータを付与するか、スーパーリロード（Ctrl+Shift+R）で確認する。
サイズ指定を省略する：sizes 属性を省略すると、ブラウザが適切なファビコンを選択できず、低解像度のアイコンが拡大表示される場合がある。必ず sizes="32x32" のように明示する。
ICOファイルを省略する：古いブラウザや一部のRSSリーダー、ブックマーク管理ツールはICOしか認識しない。favicon.ico をルートに置くことで余計なトラブルを防げる。
apple-touch-icon を忘れる：iOSでホーム画面に追加した際に使われるアイコンは apple-touch-icon で指定する。これを省略すると、iOSがサイトのスクリーンショットをアイコン代わりに使うため、見栄えが悪くなる。
まとめ
ファビコンの形式選びは「どれか一つを選ぶ」問題ではなく、それぞれの形式の役割を理解して組み合わせることがポイントだ。
- ICO：後方互換のためルートに置く
- PNG：現在の主力。32×32、180×180、192×192、512×512を用意
- SVG：ダークモード対応と将来の主流候補。現時点はPNG・ICOと併用
各形式を手動で揃えるのが面倒な場合は、ブラウザ内で完結する ファビコン生成ツール のようなツールを活用して一括生成するのが効率的だ。形式の組み合わせと <link> タグの記述を正しく設定すれば、あらゆるデバイス・ブラウザで意図通りのファビコンが表示される。
Zerosend Editorial
Zerosend の制作チームによる記事です。ファイルがデバイスの外に出ないことを設計の中心に置き、WASM・Web Worker をベースとするブラウザ完結ツールを開発しています。
Zerosend Editorial について →関連記事
SNS画像サイズ一覧2026年版｜Twitter・Instagram対応完全ガイド
2026年最新のTwitter(X)・Instagramなど主要SNSの推奨画像サイズを一覧で解説。ブラウザだけで使える無料リサイズツールの活用方法も紹介。
動画形式MP4・WebM・MOVの違いと変換方法を徹底解説
MP4・WebM・MOVの違いを比較し、用途別の使い分けと変換方法を解説。ブラウザだけで完結する無料ツールの使い方も紹介します。
GIFと動画の違いとウェブでの使い分け完全ガイド
GIFと動画（MP4など）の技術的な違いを整理し、ウェブサイトやSNSでの最適な使い分け方を解説。変換方法やパフォーマンスへの影響も紹介。