PWAアイコン作成ツール
Webアプリに必要な画像と設定をひとまとめに
アイコン、ファビコン、iOSの起動画面、manifestをまとめて作成。画像はブラウザー内で処理します。
ロゴ画像をここにドロップ
PNG・SVG・WebP・JPG対応／512 × 512 px以上を推奨
PWAのアイコンと設定をまとめて準備
プラットフォーム、色、出力するファイルを選び、ブラウザー内で作成できます。
画像のアップロードは不要
アイコンと起動画面は端末内で作成します。ロゴ画像をサーバーに送信しません。
iPhone・iPad向けの画像
Apple Touch Iconと、対応する解像度の縦向き・横向きの起動画面を作成します。
6種類の形状でプレビュー
円形や角丸四角などで切り抜いたときに、ロゴが見切れず読み取れるか確認できます。
暗い背景にも対応
背景色を設定し、元のロゴを使うか、色を反転するか、別の画像を使うか選択できます。公開前に出力内容とブラウザーの対応状況を確認してください。
HTMLコードも出力
manifest、アイコン、起動画面を参照するタグを、パッケージ内のパスに合わせて作成します。
manifestを細かく設定
名前、色、言語、識別子、スクリーンショット、ショートカットを設定できます。プロジェクトへの追加前に内容を確認してください。
このツールでできること
画像をアップロードするタイプの生成ツールや、PWA作成サービスとの機能比較です。
| 機能 | このツール | アップロード型の生成ツール | PWA作成サービス |
|---|---|---|---|
| 画像を送信せずブラウザー内で処理 | |||
| iOSの起動画面 | |||
| 6形状のマスカブルプレビュー | |||
| ダークモード用の画像 | |||
| ICO・SVG・Safari用のファビコン | |||
| 識別子・スクリーンショット・ショートカットの設定 | |||
| コピーして使えるHTMLコード | |||
| 日本語の操作画面 | |||
| 無料・登録不要 |
✓ 対応・~ 一部対応または有料・✗ 非対応
ツールの種類ごとの一般的な比較です。個々の製品によって機能は異なります。
設定について詳しく知りたい方へ PWAアイコンとセーフエリアのガイド(英語)
PWAアイコンの作り方
設定とプレビューを確認し、プロジェクトに追加するファイルをダウンロードします。
1. ロゴ画像を選択
PNG・SVG・WebP・JPGを選択します。512 × 512 px以上の正方形をおすすめします。画像はブラウザー内で処理します。
2. 名前・色・プラットフォームを設定
アプリ名と色を入力し、Android・iOS・ブラウザー向けに必要なファイルを選択します。
3. プレビューで確認
マスカブルアイコンの切り抜きと起動画面を確認します。ロゴの主要部分がセーフエリアに収まるようにしてください。
4. ダウンロードして設置
選択した画像、manifest、Service Workerのひな形、HTMLをZIPでダウンロードします。公開前にパスを確認してください。
PWAアイコンのサイズと形式
プラットフォームによって、使われるファイルが異なります。
PWAはAndroid、iOS、パソコンで利用できます。このツールが出力する主なファイルと用途をまとめました。
| ファイル | サイズ | 用途 |
|---|---|---|
| PWAアイコン（any） | 72〜512 px（8サイズ） | manifestに指定するアイコンです。インストール用の192 × 192 pxと512 × 512 pxを含みます。 |
| マスカブルアイコン | 192・512 px | 端末ごとの形状に合わせた切り抜き用です。ロゴの主要部分をセーフエリアの円内に収めます。 |
| Apple Touch Icon | 180 × 180 px | iPhoneやiPadのホーム画面に追加したときのアイコンです。 |
| ファビコン | 16・32・48 pxのICO＋SVG | ブラウザーのタブやブックマークでサイトを示します。SVG版は元画像がSVGの場合に作成します。 |
| iOSの起動画面 | 複数の解像度・画面の向き | インストールしたWebアプリの起動時に表示する画像です。apple-touch-startup-imageで参照します。 |
PWAパッケージの内容
有効にしたプラットフォームと設定に応じて、ZIPの内容が変わります。
icons/
8サイズのPNGと、Androidが有効な場合は192・512 pxのマスカブル版を含みます。ファイル容量は元画像によって異なります。
favicon/
複数サイズ入りのICOとPNG画像です。元画像がSVGなら、ベクター形式のファビコンも含みます。
splash/
iOSと起動画面の出力が有効な場合、対応する解像度・画面の向きの画像を含みます。
manifest.json
名前、アイコン、色に加え、言語、識別子、スクリーンショット、ショートカットなどの設定を保存します。
service-worker.js
Service Workerのひな形です。公開前にキャッシュのルールとパスをアプリに合わせて見直してください。
install-snippet.html
manifest、色、アイコン、選択した起動画面を参照する、head用のタグです。
PWAアイコンについてよくある質問
出力ファイルの役割と、プロジェクト側で必要な設定を確認できます。
PWAにはどのサイズのアイコンが必要ですか？
manifestには192 × 192 pxと512 × 512 pxのアイコンを用意します。このツールでは、ほかの一般的なサイズも作成します。Androidを有効にするとマスカブル版も含まれます。設定と出力ファイルを確認してから、プロジェクトに追加してください。
マスカブルアイコンとは何ですか？
端末ごとに異なる形に切り抜かれても、ロゴの主要部分が欠けないように作るアイコンです。大切な部分をセーフエリアの円内に収め、背景は画像全体を塗りつぶします。6種類のプレビューで見切れを確認してください。
manifest.jsonは何に使いますか？
Webアプリの名前、アイコン、色、開始URL、表示モードなどを記述するファイルです。ブラウザーはインストールなどの機能でこの情報を使います。作成したファイルをサイトに配置し、プロジェクトに合わせてパスを確認してください。
iPhoneでPWAの起動画面を表示するには？
iOSと「起動画面を含める」を有効にしてください。対応する解像度の画像と、apple-touch-startup-imageタグを出力します。タグを組み込んだうえで実機で確認してください。起動画面の追加だけでは、アプリの読み込みエラーは解消しません。
manifestの識別子とは何ですか？
idはPWAを識別するための値です。開始URLを変えても、更新時には同じ値を使います。ツールが提案する値は編集できます。一度決めた値は、次回以降も使えるように保存してください。
SVGファビコンも作成できますか？
はい。元画像がSVGの場合は、ベクター形式のファビコンも作成します。Web・ブラウザーの設定が有効であれば、ICOとPNGもパッケージに含まれます。
iOSの起動画面はすべて必要ですか？
各画像は特定の解像度と画面の向きに対応します。出力した内容を確認し、対象とする端末でテストしてください。起動画面が不要な場合は、設定で出力を無効にできます。
ロゴ画像はサーバーに送信されますか？
いいえ。このツールはブラウザー内で画像を読み込み、アイコンと起動画面を作成します。ロゴ画像をサーバーに送信しません。
ネイティブアプリのアイコンも作れますか？
このツールはWebアプリ向けのmanifest、ファビコン、アイコン、起動画面を作成します。ネイティブアプリには、アプリアイコン作成ツールやXcode・Android専用のツールをご利用ください。
どのファビコンがパッケージに含まれますか？
Web・ブラウザーを有効にすると、16・32・48 px入りのfavicon.icoとPNG画像が含まれます。元画像がSVGならベクター版も追加します。Apple Touch IconはiOSの設定に含まれます。
会員登録は必要ですか？
不要です。ロゴを選び、PWAを設定すればファイルをダウンロードできます。作成したアイコンに透かしは入りません。
ダウンロードするだけでサイトがPWAになりますか？
いいえ。このツールが用意するのはアイコン、manifest、HTMLの例、Service Workerのひな形です。プロジェクトに合わせて組み込み、適切な環境で配信したうえで、インストールとオフライン時の動作を対象ブラウザーで確認してください。
設定方法を詳しく見る
PWAアイコンのサイズとセーフエリアガイド(英語)