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.
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.
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 …) seines HTML-Templates hinzufügen:
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.
8 Kommentare