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

Marcel Am 16.12.2015 veröffentlicht Lesezeit etwa 2:12 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*

  • SodaStream Wassersprudler DUO mit CO2-Zylinder, 2x 1L Glasflasche und 2x 1L spülmaschinenfeste Kunststoff-Flasche, Höhe: 44cm, Farbe: Titan, 29x25.6x44.4
  • Neu ab 149,99 €
  • Auf Amazon kaufen*

2 Kommentare vorhanden

Hey Marcel, ich habe beide Varianten ausprobiert keine Funktioniert bei mir. Auch die Temps mehrfach gelöscht.
Daher vermute ich das die Grafik eine bestimmte Größe benötigt die mir leider nicht bekannt ist. Kannst du mir da weiterhelfen? Ich benutze ein WP.

Lieben Gruss Mike

Hallo Mike, vielleicht hilft dir folgender Link: http://artur.io/mask-icon-mac-safari.html

Schreibe einen Kommentar

Schreibe eine Antwort

⚠ Mit dem Nutzen des Kommentarbereiches erklärst du dich mit der Datenschutzerklärung einverstanden.