jquery.app
日本語
EnglishDeutschFrancaisEspanol日本語Nederlands

画像・アセットツール

無料 PWAマスカブルアイコンセーフゾーンジェネレーター

アプリアイコンをアップロードし、PWAマスカブルセーフゾーンをオーバーレイでプレビューします。

ツールを読み込み中...

PWAマスカブルアイコンセーフゾーンジェネレーターとは

A maskable icon is a PWA icon that can adapt to different platform shapes. Android may display it as a circle, squircle, or rounded square depending on the device. The safe zone is the inner portion of the icon that is guaranteed to be visible regardless of the shape. PWA guidelines recommend that important icon content fills at least 80% of the canvas, with padding so content stays inside the safe zone.

クイックアンサー

Upload your square PWA icon to preview the maskable safe zone overlay. Keep important content inside the safe zone (the inner 80% of the icon). Export manifest icon entries with both any and maskable purposes at 192x192 and 512x512 sizes.

制限事項

  • The preview shows a circular safe zone, but actual platform shapes vary (squircles, rounded squares, circles). The circular zone is a reasonable worst-case approximation for all shapes.
  • This tool provides a visual preview only. It does not export actual PNG files — use an image editor or icon generation tool to create the final icon files at the required sizes.
  • Some platforms apply additional transformations beyond maskable cropping, such as drop shadows or platform-specific icon treatments that cannot be previewed here.

使い方

  1. Upload a square PNG icon (512x512 or larger recommended) for your PWA.
  2. Adjust the safe-zone padding percentage — 15% (PWA standard) means an 85% visible safe zone.
  3. Preview the overlay on the icon to confirm important content is inside the dashed safe-zone circle.
  4. Copy the manifest icon entries with purpose: maskable and export your icons at 192x192 and 512x512.

主な用途

  • Verify that your app icon's key visual elements stay inside the maskable safe zone before deploying to production.
  • Generate properly configured manifest icon entries with correct sizes, purpose, and type fields.
  • Preview how different padding values affect the visible portion of your icon on Android and Chrome OS.

用途

使用例

例

Preparing a logo icon for PWA

A brand has a circular logo. Upload the 1024x1024 PNG, set padding to 15%, and check that the logo edges do not get clipped. The tool confirms the logo stays inside the safe zone with a dashed overlay.

例

Icon safe zone check before store submission

Before publishing a PWA to the Google Play Store, verify the icon safe zone. Upload the icon, confirm the key content is centered and within the safe boundary, and export the manifest entries with both any and maskable purposes.

よくあるミス

  • Using purpose: maskable on an icon that has no safe-zone padding — the icon may get cropped into an unrecognizable shape on Android.
  • Only providing one icon size — PWA requires at minimum 192x192 and 512x512 for installability across platforms.
  • Uploading a non-square icon — maskable icons should be square for consistent rendering across platform shapes.

検証

  1. Use Lighthouse PWA audit to verify your manifest, icons, and maskable icon configuration are correct.
  2. Test on a physical Android device by installing the PWA and checking the home screen icon appearance with different device themes.

FAQ

PWAマスカブルアイコンセーフゾーンジェネレーターのFAQ

What percentage of the icon should be inside the safe zone?

The PWA safe zone standard recommends that the safe zone occupies 80% of the icon area, meaning 10% padding on each side. However, many designers use 15% padding (70% safe zone) for extra safety margin. The tool defaults to 15% padding. Key content like logos and text should stay inside the safe zone.

What is the difference between any and maskable icon purpose?

purpose: any means the icon can be used as-is without adaptation. purpose: maskable means the icon is designed with a safe zone and can be cropped or masked by the platform. Always include at least one icon with both purposes (any maskable) to ensure broad compatibility.

What background color should I use for maskable icons?

Set the background color to match your icon canvas. If your icon has a transparent background, choose a solid background color that complements the icon, because platforms will fill transparent areas. The background_color in your manifest should match this color for a consistent splash screen experience.

関連ツール

その他の画像・アセットツール

こちらもお試しください

こちらもお試しください