PWAアイコン生成ツール

インストール可能なWebアプリに必要なアイコンを生成します — 192と512pxのPNG、そしてsite.webmanifestを — 1枚の画像から、すべてブラウザ内で。

プライバシー第一：すべての画像はブラウザ内でローカルに処理されます。サーバーへのアップロード・保存・送信は一切ありません。

アプリをインストール可能にするアイコン

プログレッシブWebアプリがインストール可能と判定されるかは、一部アイコンで決まります。ブラウザはインストールの案内を出したりホーム画面にまともなアイコンを置いたりする前に、少なくとも192×192と512×512のPNGを宣言したWebマニフェストを探すのです。この生成ツールはあなたのソース画像から両方を描画し、それらを参照するsite.webmanifestを書き出します。あわせてiOSが求めるapple-touch-iconと、通常のタブ用のfavicon.icoも用意します。

ランチャーに合わせて形を整える

Androidのランチャーはアイコンを円や角丸の正方形にマスクすることがあるため、端まで絵柄が広がっているとはみ出した部分が切られてしまいます。ここで余白と単色の背景を足しておけば、どんなマスクがかかっても大事な部分はセーフエリア内に収まります。ライブプレビューが各サイズでの結果を示します。すべてはCanvas APIであなたのデバイス上で描画され — ロゴがアップロードされることは決してありません — 一式はzipでダウンロードできます。