Sollte ein Favicon einen transparenten Hintergrund haben?
Ein transparenter Hintergrund passt zum Browser-Tab-Favicon und lässt die Bildmarke sauber auf heller oder dunkler Chrome sitzen. Aber iOS ignoriert Transparenz beim apple-touch-icon und legt es auf Schwarz, sodass ein transparentes Home-Bildschirm-Icon zu einer Form auf einem schwarzen Quadrat werden kann. Nutze Transparenz für das Tab-Favicon und einen deckenden Hintergrund für das apple-touch-icon und andere Home-Bildschirm-Größen.
Transparent, wo es hilft, deckend, wo nicht
Für das Tab-Favicon ist Transparenz ein Vorteil: Die Bildmarke passt sich an, welche Farbe die Browser-Chrome auch hat, hell oder dunkel. Das ist die eine Oberfläche, wo ein freier Hintergrund wirklich hilft.
Home-Bildschirm-Icons sind das Gegenteil. iOS lässt den Alphakanal fallen und legt das apple-touch-icon auf Schwarz, und Android-Maskable-Icons wollen einen randlosen Hintergrund, in den sie eine Form schneiden. Auf beiden sieht eine transparente Quelle falsch aus.
FAQ zur Favicon-Transparenz
Sollte mein Favicon einen transparenten Hintergrund haben?
Für den Browser-Tab ja. Es passt sich heller und dunkler Chrome an. Für das apple-touch-icon und andere Home-Bildschirm-Größen nein. Nutze einen deckenden Hintergrund.
Warum ist mein iOS-Home-Bildschirm-Icon auf einem schwarzen Quadrat?
Weil iOS Transparenz ignoriert und das apple-touch-icon auf Schwarz legt. Exportiere dieses Icon mit einer deckenden Hintergrundfüllung neu.
Brauchen Maskable Icons einen Hintergrund?
Ja. Maskable Icons werden vom Launcher in eine Form beschnitten, sodass sie einen randlosen Hintergrund brauchen, mit der Bildmarke innerhalb der Safe-Zone.