jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

Bild- und Asset-Tools

Kostenlose PWA Maskable Icon Safe Zone Generator

Lade ein App-Icon hoch und zeige die PWA-Maskable-Safe-Zone mit Overlay-Vorschau an.

Tool wird geladen...

Was ist PWA Maskable Icon Safe Zone Generator?

Ein maskierbares Icon ist ein PWA-Icon, das sich an verschiedene Plattformformen anpassen kann. Android zeigt es je nach Gerät als Kreis, Squircle oder abgerundetes Quadrat an. Die sichere Zone ist der innere Teil des Icons, der unabhängig von der Form garantiert sichtbar ist. PWA-Richtlinien empfehlen, dass wichtige Icon-Inhalte mindestens 80% der Leinwand ausfüllen, mit Abständen, damit der Inhalt innerhalb der sicheren Zone bleibt.

Kurze Antwort

Laden Sie Ihr quadratisches PWA-Icon hoch, um die maskierbare sichere Zone mit Überlagerung in der Vorschau anzuzeigen. Halten Sie wichtige Inhalte innerhalb der sicheren Zone (die inneren 80% des Icons). Exportieren Sie Manifest-Icon-Einträge mit sowohl any- als auch maskable-purposes in den Grössen 192x192 und 512x512.

Last updated: 2026-05-28

Einschränkungen

  • Die Vorschau zeigt eine kreisrunde sichere Zone, aber die tatsächlichen Plattformformen variieren (Squircle, abgerundete Quadrate, Kreise). Die kreisrunde Zone ist eine angemessene Worst-Case-Näherung für alle Formen.
  • Dieses Tool bietet nur eine visuelle Vorschau. Es exportiert keine tatsächlichen PNG-Dateien —verwenden Sie einen Bildeditor oder ein Icon-Generierungstool, um die endgültigen Icon-Dateien in den erforderlichen Grössen zu erstellen.
  • Einige Plattformen wenden über die maskierbare Beschneidung hinaus zusätzliche Transformationen an, wie Schlagschatten oder plattformspezifische Icon-Behandlungen, die hier nicht in der Vorschau angezeigt werden können.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Laden Sie ein quadratisches PNG-Icon (512x512 oder größer empfohlen) für Ihre PWA hoch.
  2. Passen Sie den Prozentsatz des sicheren Zonenabstands an —15% (PWA-Standard) bedeutet eine 85% sichtbare sichere Zone.
  3. Zeigen Sie die Überlagerung auf dem Icon in der Vorschau an, um zu bestätigen, dass wichtige Inhalte innerhalb der gestrichelten sicheren Zone bleiben.
  4. Kopieren Sie die Manifest-Icon-Einträge mit purpose: maskable und exportieren Sie Ihre Icons in 192x192 und 512x512.

Wofür du es nutzen kannst

  • Überprüfen, ob die wichtigsten visuellen Elemente Ihres App-Icons innerhalb der maskierbaren sicheren Zone bleiben, bevor Sie in Produktion gehen.
  • Correkt konfigurierte Manifest-Icon-Einträge mit den richtigen Grössen, purpose- und type-Feldern generieren.
  • In der Vorschau anzeigen, wie sich verschiedene Abstandswerte auf den sichtbaren Teil Ihres Icons auf Android und Chrome OS auswirken.

Anwendungsfalle

Praxisbeispiele

Beispiel

Logo-Icon für PWA vorbereiten

Eine Marke hat ein kreisrundes Logo. Laden Sie das 1024x1024 PNG hoch, setzen Sie den Abstand auf 15% und überprüfen Sie, ob die Logoränder nicht abgeschnitten werden. Das Tool bestätigt, dass das Logo mit einer gestrichelten Überlagerung innerhalb der sicheren Zone bleibt.

Beispiel

Icon-Safe-Zone-Pr眉fung vor Store-Einreichung

Vor der Veröffentlichung einer PWA im Google Play Store die Icon-Safe-Zone überprüfen. Laden Sie das Icon hoch, bestätigen Sie, dass der Hauptinhalt zentriert und innerhalb der sicheren Grenze ist, und exportieren Sie die Manifest-Einträge mit sowohl any- als auch maskable-purposes.

Haufige Fehler

  • purpose: maskable auf einem Icon ohne Safe-Zone-Abstand verwenden —das Icon kann auf Android in eine nicht erkennbare Form beschnitten werden.
  • Nur eine Icon-Grösse angeben —PWA erfordert mindestens 192x192 und 512x512 für die Installierbarkeit auf allen Plattformen.
  • Ein nicht quadratisches Icon hochladen —maskierbare Icons sollten für eine konsistente Darstellung auf allen Plattformformen quadratisch sein.

Überprüfung

  1. Verwenden Sie den Lighthouse-PWA-Audit, um Ihr Manifest, Ihre Icons und die maskierbare Icon-Konfiguration zu überprüfen.
  2. Testen Sie auf einem physischen Android-Gerät, indem Sie die PWA installieren und das Startbildschirm-Icon mit verschiedenen Gerätdesigns überprüfen.

FAQ

Fragen zu PWA Maskable Icon Safe Zone Generator

Wie viel Prozent des Icons sollte innerhalb der sicheren Zone sein?

Der PWA-Safe-Zone-Standard empfiehlt, dass die sichere Zone 80% der Icon-Fläche einnimmt, also 10% Abstand auf jeder Seite. Viele Designer verwenden jedoch 15% Abstand (70% sichere Zone) für eine zusätzliche Sicherheitsmarge. Das Tool verwendet standardmässig 15% Abstand. Wichtige Inhalte wie Logos und Text sollten innerhalb der sicheren Zone bleiben.

Was ist der Unterschied between any- und maskable-Icon-Purpose?

purpose: any bedeutet, dass das Icon unverändert verwendet werden kann. purpose: maskable bedeutet, dass das Icon mit einer sicheren Zone entworfen wurde und von der Plattform beschnitten oder maskiert werden kann. Enthalten Sie immer mindestens ein Icon mit beiden Purposes (any maskable), um eine breite Kompatibilität zu gewährleisten.

Welche Hintergrundfarbe sollte ich für maskierbare Icons verwenden?

Setzen Sie die Hintergrundfarbe so, dass sie mit Ihrer Icon-Leinwand übereinstimmt. Wenn Ihr Icon einen transparenten Hintergrund hat, wählen Sie eine solide Hintergrundfarbe, die das Icon ergänzt, da Plattformen transparente Bereiche füllen. Die background_color in Ihrem Manifest sollte dieser Farbe für ein konsistentes Splash-Screen-Erlebnis entsprechen.

Verwandte Tools

Weitere bild- und asset-tools

Auch ausprobieren

Auch ausprobieren

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen