Icon für angepinnte Tabs in Safari erstellen
Seit Mac OS X 10.11 kann man auch in Safari angepinnte Tabs (angeheftete Tabs) erstellen. Sie ermöglichen dir deine Lieblingsseiten immer geöffnet zu lassen und immer in Klick-Reichweite zu halten. Diese Tabs sind klein und können nicht versehentlich geschlossen werden.
Das ist eine praktische Sache, die ich sehr oft nutze. Die Tabs erhalten in Safari dann standard als Symbol einfach den Anfangsbuchstaben von dem Namen der Webseite. In anderen Browsern wird dafür das Favicon genommen, was für besseren Wiedererkennungswert sorgt.
Man kann aber auch in Safari dafür einen eigenen Icon nehmen. Natürlich hat Apple dafür etwas Eigenes erfunden. Und zwar gibt es dafür den mask-icon. So sieht es auf meiner Seite aus. Das ist dieses kleine a im Quadrat:
Wenn du auch ein eigenes Icon für gepinnte Tabs in Safari haben möchtest, dann befolge meine Anleitung.
Schritt #1
Dafür brauchen wir eine SVG-Datei. Also gestalte dein Icon mit einem Editor deiner Wahl. Ich habe dafür Affinity Designer genommen. Das ist wirklich ein toller Editor für den Mac. Wichtig ist, dass dein Bild keinen Hintergrund hat, also muss dein Hintergrund transparent sein. Alles Andere muss in schwarzer Farbe sein. Es darf auch nur eine Ebene verwendet werden. Das ist wichtig, da sonst das Icon von Safari nicht erkannt wird.
So sieht es bei mir im Editor aus:
Schritt #2
Nun musst du das Bild als SVG exportieren, sodass du eine .svg-Datei erhältst. In meinem Fall ist es artur.svg. Ich konnte aber leider die Datei, so wie sie ausgegeben wurde, nicht verwenden. Ich musste die Datei noch etwas modifizieren. Ich zeige dir wie.
Schritt #3
Dazu öffnen wir unsere .svg-Datei mit einem Text-Editor (z. B. Sublime Text) und suchen und löschen dort etwas, was aussieht wie <svg bla bla bla>. Statt bla bla bla steht da natürlich etwas Anderes. Dort steht halt nicht bei jedem Bild das Gleiche. Füge stattdessen diesen Code ein:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16px" height="16px">
Hier ist noch mal ein Beispiel. In meinem Fall wird aus:
<svg width="100%" height="100%" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;">
Das hier:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16px" height="16px">
Schritt #4
Nun speichern wir die Datei und legen sie auf dem Server dort ab, wo wir sie haben möchten. Bei mir ist es http://artur.io/images/artur.svg. Am besten speichern wir sie dort ab, wo auch die Favicons liegen.
Schritt #5
Die Datei ist fertig, jetzt müssen wir dem Browser nur noch sagen, wo sie liegt. Das machen wir indem wir im Head-Bereich deiner Webseite ein Code einfügen.
<link rel="mask-icon" sizes="any" href="/images/artur.svg" color="green">
Die Farbe kannst du auch in HEX-Format (#2ecc71) angeben.
Schritt #6
Sind alle Sachen auf den Server hochgeladen, wird Safari wahrscheinlich nicht sofort dein Icon erkennen. Dafür musst du einmal Safari beenden, den Ordner ~/Library/Safari/Template Icons löschen und Safari neu starten.
Fertig
Weitere Informationen findest du hier:
- Creating Pinned Tab Icons
- Adding a Pinned Tab icon for Safari
- Icon für angepinnte Tabs in eure Webseite oder euer Blog einbauen
Bild: Safari 1 von iconmonstr.