PWA用アイコンを作成
1枚の画像から、通常用とマスク対応（maskable）のPWAアイコン、manifest設定例をまとめて作成できます。
PWAアイコンを作成する方法
画像を選び、2つの手順で通常用とマスク対応用を保存できます。
- 01画像を選択
アイコンにする画像を1枚選択するか、ドラッグ＆ドロップまたは貼り付けで追加します。
- 02見え方を調整して保存
マスク後のプレビューを見ながら配置と背景色を調整し、PNG一式と設定例を保存します。
このツールについて
通常用とmaskable用を同時に作成します
Webアプリマニフェストのpurposeがanyの通常アイコンと、purposeがmaskableのマスク対応アイコンを同じ画像から作成します。
192px・512px・1024pxを作成します
通常用は192 × 192pxと512 × 512px、maskable用は192 × 192px、512 × 512px、1024 × 1024pxのPNGを作成します。
マスク後の見え方を確認できます
端末やブラウザはPWAアイコンを円形や角丸などへ切り抜く場合があります。円形・角丸四角形・スクワークルの表示例で、ロゴや文字が欠けないか確認できます。
maskableの安全範囲を表示します
中央の直径80％の円は、マスク対応アイコンで必ず表示される安全範囲です。透明部分のある画像はこの範囲へ自動調整し、不透明画像は点線を見ながら重要部分を調整できます。
通常用は透明部分を保持します
通常アイコンは元画像の透明部分を保持します。maskable用は指定した背景色で塗りつぶし、透明部分のないPNGとして保存します。
manifest設定例を同梱します
出力した5枚のファイル名、サイズ、type、purposeを記載したmanifest-icons.jsonをZIPへ同梱します。既存のWebアプリマニフェストへiconsの内容を反映して使用してください。
ZIPだけではPWAになりません
このツールはアイコンとicons設定例を作成します。PWAとして公開するには、Webアプリマニフェストの設置・読み込み、HTTPS配信などをサイト側で設定してください。
ファビコンやアプリアイコンは含みません
favicon.ico、Apple Touch Icon、App Store・Google Play提出用アイコン、スプラッシュ画面、Service Workerは含みません。Webサイト用はファビコン作成、ネイティブアプリ用はアプリアイコン作成を利用してください。
対応する画像形式
JPEG・PNG・GIF・WebP・AVIF・HEIC/HEIF・BMPを読み込み、PNGとZIPで保存します。アニメーション画像は最初の1コマを使用します。SVGには対応していません。
画像は外部へ送信されません
画像の読み込み、プレビュー、PNG・ZIPの作成はお使いの端末内で行います。元画像や作成結果を当社のサーバーや外部サービスへ送信しません。
対応上限
入力は1枚100MB・5,000万画素までです。1024 × 1024px未満も使用できますが、大きく表示した際にぼやける場合があります。
画像の付加情報について
位置情報・撮影日時・コメント・カラープロファイルなどの付加情報は、作成したPWAアイコンへ引き継ぎません。