Safari-Pinned-Tab-Icon (mask-icon)
Safari unter macOS verwendet ein eigenes Icon für angeheftete Tabs, deklariert mit <link rel="mask-icon" href="..." color="#...">. Die Datei ist ein einfarbiges SVG aus soliden schwarzen Formen auf transparentem Hintergrund, und Safari färbt es mit dem color-Attribut um. Es ist getrennt von deinem normalen Favicon und betrifft nur angeheftete Tabs im Desktop-Safari.
Ein monochromes SVG, von Safari umgefärbt
Ein mask-icon ist keine normale farbige Grafik. Safari behandelt es als Maske: Du lieferst solide schwarze Formen auf transparentem Hintergrund, und Safari füllt sie mit der Farbe aus dem color-Attribut des Tags, eine Farbe angeheftet, eine andere beim Hover. Verläufe, mehrere Farben und Striche werden alle abgeflacht, sodass die Grafik als einzelne Silhouette lesbar sein muss.
Es steuert nur angeheftete Tabs im Desktop-Safari. Neuere Safari-Versionen greifen zudem auf dein reguläres SVG- oder PNG-Favicon zurück, weshalb viele Websites gar kein separates mask-icon mehr ausliefern.
Es deklarieren
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#111111" />Das color-Attribut ist das, womit Safari die schwarzen Formen füllt, wenn der Tab angeheftet ist.
FAQ zum Safari-Pinned-Tab
Brauche ich noch ein mask-icon?
Selten. Modernes Safari greift für angeheftete Tabs auf dein SVG- oder PNG-Favicon zurück, sodass ein separates mask-icon heute eher eine nette Zugabe als eine Pflicht ist.
Warum ist mein Pinned-Tab-Icon ein solider Klecks?
Weil Safari das mask-icon auf eine einzelne Silhouette abflacht und sie mit dem color-Attribut füllt. Jedes Detail, das über Farbe oder Verlauf getragen wird, geht verloren. Die Formen selbst müssen die Bildmarke definieren.
Welches Format braucht das Pinned-Tab-Icon?
Ein SVG aus soliden schwarzen Pfaden auf transparentem Hintergrund. Kein PNG und kein mehrfarbiges SVG. Safari nutzt nur die Geometrie und legt seine eigene Farbe an.