Favicon

Favicons sind die kleinen Symbole, die wir in Browser-Registerkarten sehen. Sie helfen eine Seite wiederzuerkennen, wenn wir die Lesezeichen und offenen Registerkarten im Browsers durchsuchen. Die Integration der Favicons änderte sich im Laufe der Zeit. Manche sagen, sie ist historisch gewachsen. Heute bieten Favicons verschiedene Zusatzfunktionen und es kommen immer wieder neue hinzu.

Es ist möglich, den Dateityp SVG als Favicon zu verwenden. Dies unterstützen die meisten modernen Browser. Um diese neue Funktion zu nutzen, benötigst du eine SVG-Datei. Um sicherzustellen, dass auch ältere Browser die Grafik anzeigen, ist zusätzlich eine ICO-Datei erforderlich.

Du kennst dich mit SVG und ICO nicht aus und würdest lieber das PNG-Format verwenden? Dann findest du unter Favicon im Joomla-Template eine Lösung die besser zu dir passt.

Lösche den Browser-Cache, falls beim Entwickeln Änderungen des Favicons nicht erscheinen.

Favicon in Cassiopeia

Implementierung

Hier ist der Code den Cassiopeia zum Hinzufügen von Favicons nutzt:

...
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);
...

Als Ergebnis erscheinen im HTML-Quellcode folgende Einträge. Der HTML-Quellcode ist das Dokument, welches an den Browser übergeben wird.

In allen gängigen Browsern ist der HTML-Quellcode mit der Tastenkombination [Strg - U] einsehbar.

...
<link href="/j4dev/media/system/images/joomla-favicon.svg" rel="icon" type="image/svg+xml">
<link href="/j4dev/media/system/images/favicon.ico" rel="alternate icon" type="image/vnd.microsoft.icon">
<link href="/j4dev/media/system/images/joomla-favicon-pinned.svg" rel="mask-icon" color="#000">
...

Der Pull Request[^github.com/joomla/joomla-cms/pull/31436] mit dem diese Funktion integriert wurde, orientiert sich an einem CSS-Tricks Tutorial.

Erklärung zur Implementierung

Wenn ein Browser ein SVG-Favicon nicht unterstützt, ignoriert er die erste Zeile <link href="/j4dev/media/system/images/joomla-favicon.svg" rel="icon" type="image/svg+xml"> und fährt mit der zweiten fort. Dadurch wird sichergestellt, dass alle Browser, die Favicons unterstützen, ein Bild anzeigen können.

Beachte den alternativen Attributwert für unsere rel-Deklaration rel="alternate icon". Damit wird dem Browser mitgeteilt, dass das Favicon mit dem Dateiformat .ico lediglich als alternative Darstellung verwenden soll.

Nach den Favicons folgt die Codezeile <link href="/j4dev/media/system/images/joomla-favicon-pinned.svg" rel="mask-icon" color="#000">, die ein weiteres SVG-Bild lädt. Dieses heißt joomla-favicon-pinned.svg. Damit wird die “Pinned Tab”-Funktionalität von Safari unterstützt, die es gab, bevor andere Browser SVG-Favicons unterstützten.

Ein modernes Favicon mit SVG und ICO als Rückfallposition

Warum ein SVG Favicon?

Du fragst dich, welchen Grund es gibt zu SVG zu wechseln? Das .ico-Dateiformat gibt es schon ewig und kann Bilder bis zu einer Größe von 256×256 Pixeln unterstützen. Hier sind drei Gründe.

Das .ico-Dateiformat ist ein proprietäres Format, das von Microsoft verwendet wird. SVG ist ein offener Standard. Du kannst SVG-Dateien ohne jegliche Abhängigkeit verwenden.
Wenn wir eine auflösungsunabhängige SVG-Datei für ein Favicon verwenden, sieht das Favicons bei jeder Displaygröße gestochen scharf aus.
SVGs sind in der Regel sehr kleine Dateien, vor allem im Vergleich zu ihren Rasterbild-Pendants. Indem wir nur ein 16×16 Pixel großes Favicon als Rückfallposition für Browser verwenden, bieten wir mit wenig Datenvolumen einen hohen Grad an Unterstützung.

Erstelle dein Favicon mit Ubuntu 20.04

Zunächst sehen wir uns an, wie man ein Favicon unter Ubuntu erstellt. Ich veranschauliche es mit Hilfe der Pakete Inkscape und Imagemagick. Zuerst besprechen wir den Installationsprozess für beide Pakete. Um mit dem Installationsprozess fortzufahren, solltest du Zugriff auf Superuser-Rechte haben.

Installiere Inkscape und Imagemagick unter Ubuntu

Führe folgendes Kommando im Terminal aus.

sudo apt install inkscape imagemagick

Der obige Befehl installiert die Pakete — Inkscape und Imagemagick. Mit dem Inkscape-Paket erstellen wir eine skalierbare Vektorgrafik und konvertieren anschließend die Datei mit der Erweiterung .svg in .ico mit dem Befehl convert von Imagemagick.

Erstellen einer skalierbaren Vektorgrafik mit Inkscape

Mit Inkscape können wir praktisch alles entwerfen. Wir erstellen ein Text-Favicon. Öffne Inkscape und du siehst zunächst eine leere Seite umringt von Symbolleisten. Klinke auf der linken Seite auf das Symbol mit dem A.