Artikelformat

Howto: Icons für fixierte Tabs im Safari erstellen und nutzen

Vor ein paar Wochen hatte ich an dieser Stelle die Problematik um die fehlenden Favicons im Safari angesprochen. Eher am Rande erwähnte ich, dass der Safari bei fixierten Tabs sehr wohl eine Art Favicon anzeigt.

Im Standard werden festgepinnte Webseiten als kleines Tab auf der linken Seite des Safaris in der Tab-Leiste gesammelt. Das Icon wird dabei aus dem erste Buchstaben der Webseite generiert.

Bildschirmfoto 2017-09-06 um 16.50.44-minishadow

Gibt man sich damit nicht zufrieden, kann man mit etwas Aufwand auch ein eigenes Icon hinterlegen. Dieses muss allerdings im SVG-Format vorliegen und mit einer extra Zeile Code aktiviert werden.

Schritt 1

Zunächst benötigt man ein Logo bzw. Symbol, das die eigene Webseite repräsentiert; in unserem Fall der Space Invader.

Hat man kein Illustrator, Sketch oder Affinity Designer zur Erstellung der SVG-Datei installiert, gibt es auch diverse Online-Tools, die aus einer PNG-Datei das benötigte Format konvertieren.

Bildschirmfoto 2017-09-06 um 22.18.19

Wichtig ist dabei, dass der Hintergrund des Bildes transparent und das Logo selber in nur einer Farbe, nämlich 100% Schwarz, dargestellt wird. Als Größe werden 16×16 Pixel (32×32 Pixel für Retina Displays) benötigt.

Bevor sich jemand wundert: das hier erstellte „schwarze Logo“ dient nur als Maske. Die schlussendlich im Browser angezeigte Farbe des Icons wird erst in Schritt 2 festgelegt.

Schritt 2

Nachdem man die erstellte SVG-Datei auf seinen Server hochgeladen hat, muss man folgende Zeile Code in den Head-Teil (zwischen < head >…< /head >) seines HTML-Templates hinzufügen:

<link rel="mask-icon" href="/pinfavicon.svg" color="#990000">

Das href zeigt dabei auf die hochgeladene SVG-Datei. Die Farbe des Icons wird über color bestimmt, was in unserem Fall ein dunkleres Rot ist.

Das wars im Prinzip schon. Sollte das Icon anfangs übrigens nicht zu sehen sein, muss man den Safari beenden, den Ordner ~/Library/Safari/Template Icons löschen und den Safari anschließend neu starten.

(via)(via)

Autor: Björn

Ich bin Björn und quasi der COO von aptgetupdateDE. Ich kümmere mich um die PR und allerlei Kontaktaufnahmen zu Herstellern und Softwareentwicklern. Erreichbar bin ich bei Twitter und natürlich per E-Mail.

8 Kommentare

  1. Schade – ausgerechnet bei Eurer Seite funktionierte das nicht auf Anhieb (Safari musste neugestartet werden) spiegel.de, bild.de, facebook.com, amazon.de und mail.google.com (nur um Beispiele zu nennen) machen das offensichtlich „richtiger“ …. vllt aber auch ein timeout prob … ?

    Btw. und OT: wäre schön, wenn man im mobile-Modus auch die Anzahl der Kommentare sehen würde, ohne noch einmal den Artikel einzeln laden zu müssen

    Antworten
    • Cache Problem, jede Wette! ;)

      Das mit den Kommentaren ist vermutlich nicht zu ändern, da durch das Theme bedingt.
      Auf dem iPad wird die Anzahl der Kommentare angezeigt. Auf dem iPhone nicht. Wir schauen aber trotzdem mal nach, ob sich irgendwo ein Schalter versteckt hat.

      Antworten
      • Lieben DANK!!! Ich bin ja in Sachen Tablet mal ausnahmsweise fremd gegangen und nutze ein Lenovo Android Tablet (auch um in Sachen Android halbwegs auf Erfahrungsstand zu bleiben) und dort sind unabhängig vom Browser in der mobilen Variante nirgends die Kommentare zu sehen …

        Antworten
  2. Ach ja und ein eigentlich sehr guter SVG-Editor ist natürlich inkscape – leider unter Mac OS immer noch nur mit X11 brauchbar

    Antworten

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.