ファビコン（Favicon）の推奨サイズと設定方法｜モダンブラウザ＆PWA完全対応

Web制作 デザイン フロントエンド HTML
結論：30秒で Favicon 構成を理解する
  • SVG（推奨）: <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  • Apple タッチ: <link rel="apple-touch-icon" href="/apple-touch-icon.png"> (180x180)
  • 生成ツール: 下の生成器で画像から全サイズを一括マルチ変換

1. オンライン Favicon マルチサイズ生成器

元の画像ファイルを読み込ませることで、必要な各種サイズの Favicon 画像と HTML タグを即時に生成できます。

🎨 この場でFaviconを生成する

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

2. 現代の推奨アイコン構成

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

3. ダークモード対応 SVG Favicon の書き方

<!-- favicon.svg の中身 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M10 10 H 90 V 90 H 10 Z" />
</svg>

4. 注意点（ハマりどころ）

  1. ブラウザキャッシュの固さ
    • Favicon はブラウザに強力にキャッシュされます。変更が反映されない場合は https://example.com/favicon.ico?v=2 のようにクエリストリングを付与してください。