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.
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.
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!
Freut mich wenn ich euch weiterhelfen konnte!
Euer Martin
Willst du keine Neuigkeit auf Freiheitenwelt verpassen oder weitere Insiderinformationen erhalten? Dann abonniere den Newsletter und die Beitragsbenachrichtigung. Du bist nur einen KLICK entfernt.
Freiheitenwelt gibt es auch auf Facebook, Google+, Twitter, YouTube und Instagram.
