PWA-Maskable-Icon-Generator
Laden Sie Ihr Logo hoch, wählen Sie einen Hintergrund und erzeugen Sie ein Maskable-Icon nach dem Standard für Progressive Web Apps: Das Logo bleibt gut sichtbar, auch wenn das System das Icon kreisförmig, als abgerundetes Quadrat oder in jeder anderen Form zuschneidet.
So funktioniert es
Ein Maskable-Icon muss das gesamte Quadrat bis zum Rand ausfüllen (anders als ein klassisches Icon mit transparenten Rändern), da das Betriebssystem anschließend seine eigene Zuschnittform (Kreis, abgerundetes Quadrat, Tropfen …) darüberlegt. Der gestrichelte Kreis in der Vorschau stellt die Standard-Sicherheitszone dar (etwa 80% des Durchmessers): Jedes Logo, das darin liegt, bleibt unabhängig von der Zuschnittform des Geräts sichtbar.
Muss ich zusätzlich ein klassisches (nicht maskierbares) Icon bereitstellen?
Ja, es wird empfohlen, beide Icon-Typen in der Manifest-Datei Ihrer PWA anzugeben (ein Eintrag mit "purpose": "any" und einer mit "purpose": "maskable"), da manche Systeme keinen Zuschnitt anwenden und das „any“-Icon unverändert anzeigen.
Warum werden sowohl 192x192 als auch 512x512 erzeugt?
192x192 ist die empfohlene Mindestgröße für das Startbildschirm-Icon auf den meisten Android-Geräten, während 512x512 für den Startbildschirm (Splash Screen) und für Kontexte mit höherer Auflösung wie App-Stores verwendet wird.
100% lokale Verarbeitung: Das Icon wird vollständig in Ihrem Browser zusammengesetzt, Ihr Logo wird nie an einen Server gesendet.