Safari: Icon für angepinnte Tabs in eure Webseite oder euer Blog einbauen

Am 16.12.2015 veröffentlicht Lesezeit etwa 2:15 Minuten

safari-pinned-tab-icon-mask-icon

Safari 9 kommt von Haus aus (endlich) mit einer Möglichkeit, Tabs anpinnen zu können. Kennt man natürlich schon von Chrome und Firefox, ist aber dennoch eine willkommene Sache für alle Mac’ler und Safari-Nutzer. Blöd nur, dass Apple weiterhin die obliga­to­ri­schen Favicons ignoriert: Pinnt ihr eine Webseite an, so seht ihr als Icon oftmals nicht das eigent­liche Favicon der Seite, sondern lediglich ein kleines Quadrat mit dem Anfangs­buch­staben der Seite. Geht noch, wenn man nur eine Hand voll Seiten anpinnt, haben aller­dings zwei oder drei den gleichen Anfangs­buch­staben, wird es schon wieder unüber­sichtlich.

Der Grund liegt schlicht darin, dass Apple eben nicht das allseits bekannte Favicon des HTML-Standards nutzt, sondern eine eigene Imple­men­tierung vorge­sehen hat. Hier müssen also Websei­ten­be­treiber und Blogger selbst Hand anlegen, zumindest wenn man möchte, dass seine Seite ordentlich angeheftet wird. Ist auch eigentlich recht schnell gemacht, aller­dings benötigt ihr dazu ein Icon im Vektoren-Format SVG, welches lediglich in Schwarz daher­kommt.

Heißt also: Das Favicon oder Logo derart verändern, dass man es auch nur in schwarzer Farbe noch erkennen kann. Hier muss man eben etwas herum­spielen, Hinter­grund und prägnante Elemente trans­parent machen, damit das Logo in Schwarz eben kein Klotz Matsch darstellt. Wer kein Vektoren-Zeichen­pro­gramm besitzt: Könnt ihr einfach als trans­pa­rentes PNG speichern und dann mit einem Online-Konverter (ich habe diesen hier genutzt) umwandeln. Klappt ebenso. 

Ist das erledigt, kann es auch schon losgehen mit der Imple­men­tierung, die eigentlich keinen Arbeits­aufwand darstellt. Das umgewan­delte SVG mit einem prägnanten Namen versehen und an gewünschter Stelle auf euren FTP hochladen – bevorzugt natürlich im Bildordner bezie­hungs­weise im Bildordner eures verwen­deten Themes. Danach müsst ihr noch euren Header bearbeiten (WordPress-Theme: header.php) und dort irgendwo zwischen <head> und </head> die folgende Zeilen einbauen: 

<link rel="mask-icon" href="mask-icon.svg" color="#3B8DBD">

mask-icon.svg“ müsst ihr natürlich mit eurem Icon mitsamt des Pfads austau­schen, der Wert „color“ liefert den Farbwert zurück, den das Icon bei Mausüber­fahrt oder einem aktiven Tab erhält. Ihr könnt die Akzent­farbe eures Logos nutzen, wahlweise im HEX-Format oder auch als Keyword (blue, red, green, etc. pp.). Wer derar­tiges nicht „hardcoded“ im Theme einbauen möchte, der kann es auch über eine Funktion innerhalb der functions.php imple­men­tieren, sieht dann wie folgt aus (Code via Yoast):

/**
 * Adds a pinned tabs icon
 * @param $meta_tags
 * @return array
 */
function safari_site_icons( $meta_tags ) {
  // Mask icon for Safari pinned tabs
  $meta_tags[] = "<link rel='mask-icon' color='#3B8DBD' href='" . get_template_directory_uri() . "/images/icon-mask.svg'>";

  return $meta_tags;
}
add_filter( 'site_icon_meta_tags', 'yst_site_icons' );

Auch hier müsst ihr wieder gegebe­nen­falls euren Datei­namen und die gewünschte Akzent­farbe ändern, ansonsten läuft es aber so. Aktua­li­siert ihr nun eure Seite und heftet diese in Safari an, sollte nun statt des Standard-Icons euer erstelltes und einge­bautes Icon auftauchen. Falls nicht: Im Quelltext prüfen, ob auch alles richtig drin ist. Falls ja: Geht in den Ordner „~/Library/Safari/Template Icons“ (im Finder Shift + CMD + G), löscht die enthal­tenen Dateien und startet Safari einmal neu. Dann geht’s.

Quelle Apple via Yoast