Mit macOS El Capitan (10.11) hat Apple die „Website Pins“ in Safari eingeführt. Mit Website Pins kannst Du Deine am häufigsten verwendeten Webseiten in Safari festpinnen. Sie erscheinen dann als kleinere Tabs auf der linken Seite Deiner Tableiste und sind so immer geöffnet, aktuell und einfach abzurufen. Standardmäßig wird aus dem ersten Buchstaben der festgepinnten Seite ein Icon erstellt. Solltest Du eine eigene Webseite haben, so kannst Du mit wenig Aufwand aber auch ein eigenes Symbol für Deine Webseite hinterlegen.
Wenn Du mit Safari Deine Homepage festpinnst, sieht das Symbol erst einmal so bzw. so ähnlich aus:
Möchtest Du für Deine Webseite ein „Pinned Tab Icon“ erstellen, benötigst Du erstmal ein Bild bzw. Logo, das Du hinterlegen möchtest. Für Pinned Tab Icons müssen die Grafiken im svg-Format vorliegen. Das bedeutet, dass Du Dir Dein Bild erst noch in eine svg-Datein konvertieren lassen musst. Unter online-convert.com findest Du einen der vielen frei verfügbaren online Konverter.
Du musst aber bedenken, dass Logos im svg-Format nur mit einer Farbe dargestellt werden können. Passe Dein Logo vor dem konvertieren entsprechend an, damit Du als Ergebnis nicht einfach nur einen schwarzen Fleck erhältst.
Wenn Du Deine svg-Datei erstellt hast, musst Du sie per FTP, denn WordPress verbietet den Upload von svg-Dateien per WordPress-Uploader, auf Deiner Homepage ablegen – wohin ist eigentlich egal. Für diese Anleitung gehe ich davon aus, dass sie im root-Verzeichnis Deiner Seite liegt und die Datei „logo.svg“ heißt. Teste anschließend, ob sie über ihre URL erreichbar ist – gibt dafür im Browser die Adresse ein: http://www.DEINE-SEITE.de/logo.svg ein – Du siehst ein extrem großes schwarzes Logo:
Wird Dir Dein Logo angezeigt ist alles gut und es kommt der nächste Schritt.
Wenn Du WordPress benutzt und in Deinem Theme-Verzeichnis (/wp-content/themes/DEIN-THEME/) eine header.php vorhanden ist, dann füge dort folgende Zeile vor </head> ein:
<link rel='mask-icon' href='http://www.DEINE-SEITE.de/logo.svg' color='#008000' />
Die Farbe bestimmst Du über color=’#00800′ – #00800 steht für grün. Auf http://www.color-hex.com findest Du die Farbcodes zu Deiner Farbe.
Solltest Du das Genesis Framework verwenden, dann gehe einfach unter Genesis in die Theme-Einstellungen und füge den Code in das „Header Scripts“-Feld ein. Das war’s auch schon. Wenn Du Deine Seite erneut aufrufst und festpinnst, siehst Du Dein Pinned Tab Icon:
Solltest Du noch kein Icon sehen, musst Du den Inhalt des Ordners „~/Library/Safari/Template Icons“ löschen. Wenn dies auch noch nicht ausreicht, musst Du in Safari unter „Verlauf löschen …“ Deinen gesamten Verlauf löschen.
Viel Spaß!