Maskable icon für PWA ohne Rand?

[Thomas P]

Hallo zusammen,

momentan spiele ich mit den Maskable Icons herum, um für die PWA App auf Android, Windows oder macOS ein Logo-Icon zu generieren.

Leider werden die Icons (meins und das Originale) viereckig angezeigt, obwohl sie rund, oval oder mit rundem Rand dargestellt werden sollten.
Bei dem Icon von InvisionFocus klappt das gut, bei dem originalen von InvisionComunity oder bei meinen Selbstversuchen nicht...

Hier ist es gut beschrieben:
https://web.dev/maskable-icon/

Genutzt habe ich unter anderem diesen Editor mit einem transparenten Icon:

https://maskable.app/editor

Es funktioniert leider nicht, ich bekomme weiterhin ein viereckiges Icon z.B. unter Android angezeigt...

Wie habt Ihr das gelöst?

Danke,
Thomas

 

[Sonya*]

Das hat @V0RT3X gelöst. Ich trigge ihn mal aus dem Winterschlaf.

 

[V0RT3X]

Es ist ganz einfach ein rundes Icon, das wars.

[Thomas P]

Danke Dir, dann habe ich zu kompliziert gedacht 
Wir haben an sich kein rundes Icon, das habe ich mit einem Kreis hinterlegt (Transparenz + Ebene 1: Kreis, Ebene 2: unser Logo). Danach musste ich mich an die Größen herantasten, da die W3C-Formel zwar soweit passt für die safe zone - das Icon bei meinen Androiden allerdings viel zu klein war im Vergleich zu den übrigen Icons in der UI.

Irgendwie sieht es noch nicht 100% gut aus, vor allem beim iOS "teilen nach" > "zum Home-Bildschirm". Ich teste weiter bei Gelegenheit... ;-)

Danke soweit 

 

 

 

 

Bearbeitet 8. Februar 2022 von Thomas P