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

Marcel 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 obligatorischen Favicons ignoriert: Pinnt ihr eine Webseite an, so seht ihr als Icon oftmals nicht das eigentliche Favicon der Seite, sondern lediglich ein kleines Quadrat mit dem Anfangsbuchstaben der Seite. Geht noch, wenn man nur eine Hand voll Seiten anpinnt, haben allerdings zwei oder drei den gleichen Anfangsbuchstaben, wird es schon wieder unübersichtlich.

Der Grund liegt schlicht darin, dass Apple eben nicht das allseits bekannte Favicon des HTML-Standards nutzt, sondern eine eigene Implementierung vorgesehen hat. Hier müssen also Webseitenbetreiber und Blogger selbst Hand anlegen, zumindest wenn man möchte, dass seine Seite ordentlich angeheftet wird. Ist auch eigentlich recht schnell gemacht, allerdings benötigt ihr dazu ein Icon im Vektoren-Format SVG, welches lediglich in Schwarz daherkommt.

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 herumspielen, Hintergrund und prägnante Elemente transparent machen, damit das Logo in Schwarz eben kein Klotz Matsch darstellt. Wer kein Vektoren-Zeichenprogramm besitzt: Könnt ihr einfach als transparentes 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 Implementierung, die eigentlich keinen Arbeitsaufwand darstellt. Das umgewandelte SVG mit einem prägnanten Namen versehen und an gewünschter Stelle auf euren FTP hochladen – bevorzugt natürlich im Bildordner beziehungsweise im Bildordner eures verwendeten 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 austauschen, der Wert „color“ liefert den Farbwert zurück, den das Icon bei Mausüberfahrt oder einem aktiven Tab erhält. Ihr könnt die Akzentfarbe eures Logos nutzen, wahlweise im HEX-Format oder auch als Keyword (blue, red, green, etc. pp.). Wer derartiges nicht „hardcoded“ im Theme einbauen möchte, der kann es auch über eine Funktion innerhalb der functions.php implementieren, 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 gegebenenfalls euren Dateinamen und die gewünschte Akzentfarbe ändern, ansonsten läuft es aber so. Aktualisiert ihr nun eure Seite und heftet diese in Safari an, sollte nun statt des Standard-Icons euer erstelltes und eingebautes 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 enthaltenen Dateien und startet Safari einmal neu. Dann geht’s.

Quelle Apple via Yoast

Artikel teilen

Kaufempfehlung*

  • Apple ME918Z/A AirPort Extreme Wireless-LAN Basisstation (2,4/5GHz, LAN-Port, WAN-Port, USB) weiß
  • Neu ab EUR 198,74, gebraucht schon ab EUR 99,00
  • Auf Amazon kaufen*