ファビコン（Favicon）の推奨サイズと設定方法｜現代のブラウザ対応

結論

「1つだけ作るなら SVG」、「互換性重視なら 32x32 の PNG」。かつての .ico 形式は、もはや必須ではありませんが、ルートディレクトリに置いておくと自動で認識されるため便利です。

現代の推奨セット

すべてを網羅するのは大変ですが、以下の3セットがあれば現代のブラウザとデバイス（iOS/Android）で美しく表示されます。

ファイル形式	用途・推奨サイズ
favicon.ico	ルート配置用。16x16, 32x48のマルチサイズ推奨。レガシーブラウザ用。
icon-192.png	汎用。32x32, 192x192。Androidやブラウザタブ用。
apple-touch-icon.png	iOS用。180x180。ホーム画面追加時のアイコン。
favicon.svg	【推奨】ベクター形式。1つで全サイズに対応でき、ダークモード対応も可能。

🎨 この場でFaviconを生成する

画像をアップロード

画像をアップロードすると、各サイズのFaviconが生成されます。クリックでダウンロード。

ダークモード対応のFavicon

SVGを使えば、ユーザーのOS設定に合わせてファビコンの色を変えることができます。

<!-- favicon.svg の中身 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: black; }
    @media (prefers-color-scheme: dark) {
      path { fill: white; }
    }
  </style>
  <path d="..." />
</svg>

実装のコツ

シンプルさを追求する — ファビコンは非常に小さく表示されるため、複雑なロゴや文字は読めません。シンボル化したデザインを心がけましょう。
背景を透過させる — ブラウザのタブの色は白とは限りません（特にダークモードやカスタムテーマ）。必ず背景を透明にして書き出しましょう。
ツールを活用する — 1枚の大きな画像（512x512程度）から各サイズを一括生成するオンラインツールを使うのが、もっとも効率的でミスがありません。

あわせて読むと理解が深まる関連記事をまとめました。

トピック	記事
Favicon Generator	Favicon Generator｜ico/png/svg マルチサイズ
QR Code 生成	QR Code 生成｜URL・WiFi・vCard の作り方
Dummy Image Placeholder	Dummy Image Placeholder｜開発用プレースホルダー
画像リサイズのアスペクト比維持	画像リサイズのアスペクト比維持｜崩さないためのコツ
AIクローラー対応 robots.txt・llms.txt 設定ガイド 2026	AIクローラー対応 robots.txt・llms.txt 設定ガイド 2026｜GPTBot・ClaudeBot・Google-Extended・GEO戦略
HSTS Preload設定手順	HSTS Preload設定手順｜nginx・Cloudflare実装とhstspreload.org申請ガイド
htaccess Redirect	htaccess Redirect｜Apache 301/302 設定
OGP Preview	OGP Preview｜SNS シェアカードの確認
PostgreSQL接続プール枯渇の対処法	PostgreSQL接続プール枯渇の対処法｜too many connections・PgBouncer・Node.js pg
セキュアなCookie設定ガイド	セキュアなCookie設定ガイド｜HttpOnly・Secure・SameSiteの使い分けとCSRF対策
セキュリティヘッダー一覧と設定ガイド	セキュリティヘッダー一覧と設定ガイド｜CSP・HSTS・Referrer-Policy・Permissions-Policy
Subresource Integrity (SRI) 完全ガイド	Subresource Integrity (SRI) 完全ガイド｜CDN スクリプトの integrity・crossorigin・フォールバック

ツール一覧

現代の推奨セット

🎨 この場でFaviconを生成する

ダークモード対応のFavicon

実装のコツ

関連記事