Jump to content

Maskable icon für PWA ohne Rand?


Recommended Posts

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...

maskable_icons.jpg.8ba2cb08c9f26b9517895a144f7955ce.jpg

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

 

Link to comment
Share on other sites

Danke Dir, dann habe ich zu kompliziert gedacht :grinning-squinting-face:
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 :thumbs-up:

 

 

 

 

Edited by Thomas P
  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen zu Cookies erhalten Sie in unserer Privacy Policy.