PWAアイコンジェネレーター

数秒でProgressive Web App用アイコンを生成

PWA（Progressive Web App）では、規定サイズのアイコンと有効なWeb App Manifestが必須です。このツールを使えば、画像を1枚アップロードするだけで、必要なすべてのPWAアイコンと、すぐに使えるsite.webmanifestを自動生成できます.

PWAアイコンとは？

PWAアイコンは、ユーザーがWebアプリを端末に「インストール」したときに表示されるアプリ用アイコンです。以下のような場所に表示され、ネイティブアプリに近い見た目を実現します。

• Androidホーム画面
• アプリランチャー / アプリ一覧
• タスク切り替え画面
• スプラッシュスクリーン / 起動画面

適切に設定されたPWAアイコンにより、デバイス間で一貫した、プロフェッショナルな見た目のWebアプリを提供できます。

PWA推奨アイコンサイズ（Google推奨）

Android Chrome用アイコン

• 192x192 – ホーム画面用アイコン
• 512x512 – アプリランチャーおよびスプラッシュスクリーン用アイコン

これらのサイズは、PWAインストール要件を満たすために必要であり、不足している場合はLighthouseやブラウザの監査ツールで警告が表示されます。

生成されるファイル

アイコンファイル

• android-chrome-192x192.png
• android-chrome-512x512.png

Manifestファイル

• site.webmanifest（事前設定済み、すぐに利用可能）

記述例：

{
  "name": "My PWA App",
  "short_name": "MyApp",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "display": "standalone"
}

PWAアイコン生成にfavicon.pubを使う理由

• Google推奨サイズに準拠したアイコンを生成
• Web App Manifestファイルを自動生成
• 手動でのリサイズや書き出し作業が不要
• PNG / JPG / SVGなど、様々な元画像に対応
• 無料で今すぐダウンロード可能

PWAアイコンをサイトに組み込む手順

1. ロゴまたはアイコン画像をアップロードします。
2. 生成されたPWAアイコンとmanifestをダウンロードします。
3. ファイルをサイトのルートディレクトリに配置します。
4. HTMLにmanifestへのlinkタグを追加します。

<link rel="manifest" href="/site.webmanifest">

PWAアイコン vs Favicon

よくある質問

関連リンク

• Faviconジェネレーターに戻る
• SVG Faviconジェネレーター
• Faviconサイズガイド