Favicon Generator｜1枚の画像からマルチサイズ Favicon / PWA アイコンを一括生成

Favicon PWA アイコン
結論：30秒で Favicon パックを用意する
  • 元画像: 512×512px 以上の正方形 PNG / SVG を用意
  • 必須 3 大セット: favicon.ico + apple-touch-icon.png (180px) + site.webmanifest
  • 生成ツール: 下のコンポーネントで全サイズを一括出力

1. オンライン Favicon / PWA アイコン一括生成ツール

画像を 1 枚ドラッグ＆ドロップするだけで、主要すべてのサイズの Favicon 画像を生成します。

🎨 この場でFaviconを生成する

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

2. 推奨サイズ一覧と HTML <head> タグ配置コード

<!-- ① 標準 Favicon (旧型・レガシーブラウザ向け fallback) -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

<!-- ② SVG Favicon (ダークモード追従・無段階拡大) -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- ③ iOS ホーム画面追加用 (Apple Touch Icon) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- 180x180 -->

<!-- ④ Web App Manifest (Android / PWA用) -->
<link rel="manifest" href="/site.webmanifest">

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

  1. Favicon の強固なブラウザキャッシュ
    • Favicon はブラウザや Google 検索インデックスのキャッシュが非常に強力です。更新が反映されない場合は、URL に ?v=2 等のクエリパラメーターを付与（例: /favicon.ico?v=2）するか、ブラウザキャッシュを全クリアしてください。
  2. 透過 PNG の透過部分が黒化する現像問題
    • 古いコンバーターでは alpha チャンネル（透過）が黒色で潰れる場合があります。当ツールは Canvas 2D 透過コンテキストを維持するため背景透過のまま正しく出力されます。