Safari 9 – Pinned Tab für WordPress einrichten

So – das Thema ist ein bischen Of Topic. Aber egal. Ich habe mich gerade eben mit dem neuen Feature der Pinned Tabs von Safari 9 beschäftigt. Nun hat es Apple doch auch endlich geschafft dem hauseigenen Browser Favicons hinzuzufügen. Das ist ja soweit schon mal ganz gut. Leider konnte sich Apple mit den sonst üblichen .ico oder Bitmap Favicons nicht zufrieden geben und an der Stelle muss also etwas nachgeholfen werden. Ich habe eine Weile dafür gebraucht. Mit dieser kurzen Anleitung solltet ihr das wesentlich schneller hinbekommen. Zumindest MAC Nutzer.

Standardmäßig generiert Safari aus dem ersten Buchstaben und einer häufig verwendeten Farbe deiner Homepage ein einfaches Tab-Logo. Das sah in meinem Fall dann so aus. Das “F” im grünen Kasten. Määhh.

 

Pinned Tap Safari - Standard

Pinned Tap Safari – Standard

 

1. Das Vektor TaB-Logo erstellen

Gut – ich wollte also mein Standard Favicon mit dem Vögelchen an der Stelle haben. Dazu muss das Logo in eine .svg Vektordatei konvertiert werden. Wichtig dabei ist ein transparenter Hintergrund und schwarze Farbe. Alles was später in der .svg-Datei schwarz ist, wird beim Mausover in eine vorgegebene Farbe umgewandelt. Gut!

Da mein Logo normalerweise dreifarbig ist musste ich es etwas reduzieren. Das ging ganz fix in Photoshop und sah dann so aus.

Favicon_Safari nach Photoshop

Um das Ganze nun in die Vektordatei zu konvertieren könnte man z.B. Adope Illustrator oder GIMP bedienen. Schneller geht es mit einem Onlinetool wie z.B. https://realfavicongenerator.net. Dort könnt ihr euer schwarzweißes Logo ganz einfach hochladen. .jpg, .png, .gif, .bmp ist total egal. Das schöne an dem Tool ist, dass ihr euch nicht anmelden müsst und euch auch eine Vorschau gezeigt wird. Ist eigentlich selbsterklärend. Nach knapp zwei Minuten solltet ihre euer Favicon Paket herunterladen können. Ihr findet dann im Downloadordner einen Ordner “favicons” in welchem sich die Datei “safari-pinned-tab.svg” befindet. Das ist das benötigte Logo.

 

2. Code anpassen – Logo hochladen

Im Header zwischen <head></head> eurer Webseite müsst ihr nun diesen Code einfügen. Bei WordPress befindet sich das in der header.php Datei eures Themes.

<link rel=’mask-icon’ href=’safari-pinned-tab.svg’ color=’#Farbcode’>

Ihr könnt euren Farbcode vorgeben und falls ihr die Datei umbenannt habt muss das natürlich korrigiert werden. Das fertig Tab-Logo müsst ihr nun noch in euer WordPress Standardverzeichnis laden. Also direkt in /httpdocs.

 

3. Safari Template Icons löschen

Damit das neue Tab-Logo richtig geladen wird löst die Fixierung eurer Webseite im Safari Browser und schließt ihn. Danach geht ihr über den Finder zu ~/Library/Safari/ und löscht den Ordner “Template Icons”. Nun könnt ihr Safari neu starten und eure Homepage anpinnen.

Tataaaa  – fertig! Bei mir sieht das nun so aus!

 

Bildschirmfoto 2016-01-06 um 15.12.41

Tap-Logo Mausover

Bildschirmfoto 2016-01-06 um 15.13.09

Tap-Logo normal

 

Freut mich wenn ich euch weiterhelfen konnte!

Euer Martin

Martin Leonhardt

Martin ist Gründer und alleiniger Redakteur von Freiheitenwelt.de. Fotografie und Reisen sind seine große Leidenschaft. Seit knapp zwei Jahren erkundet er Amerika. Er schreibt auch gerne Reportagen für einschlägige Magazine. Willst du mehr über Martin wissen? Schreibe ihm einfach eine Nachricht oder nutze eines der sozialen Netzwerke.

Kommentar verfassen