Ein individuelles Favicon für die eigene Webseite mit GIMP herstellen und in einer Joomla! Webseite anzeigen

Ein Favicon ist das kleine Bild (Icon), das in modernen Browsern an verschiedenen Stellen angezeigt wird.

Wo wird das Favicon angezeigt?

• in der Adresszeile vor der URL
• im Tab der geöffneten Webseite
• in den Lesezeichen vor dem Lesezeicheintrag


Favicons im Firefox

Mit der Standardinstallation von Joomla! wird das Joomla! Logo als Favicon ausgeliefert. Häufig möchte man aber gerne ein zur eigenen Seite bzw. zum eigenen Logo passendes, individuelles Favicon haben. Dieser Artikel beschreibt, wie Sie ein Favicon mit dem open-source Bildbearbeitungsprogramm GIMP herstellen und in Ihre Webseite einfügen können. Sie benötigen hierzu etwas Erfahrung mit GIMP oder einer vergleichbaren Software

Ein Favicon mit GIMP erstellen

Das Favicon hat eine Größe von 16x16 Pixeln. Damit ihr Favicon gut aussieht, benötigen Sie also ein Logo, ein Objekt oder eine Form, die in einer Auflösung von 16x16 Pixeln noch erkennbar ist.

Öffnen Sie in GIMP eine neue Datei in der Größe 16x16 Pixel und malen Sie Ihr Favicon direkt dort hinein. Sie können auch ein vorhandenes Bild - z.B. Ihr Logo - direkt in GIMP öffnen. Wichtig ist, dass Sie am Ende ein Bild haben, das nur eine Ebene enthält, die 16x16 Pixel groß ist und in der Ihr Icon gemalt ist.

Das Favicon speichern

Speichern Sie das Bild nun im Format Microsoft-Windows-Symbol (Ico) unter dem Namen favicon.ico (bitte achten Sie auf die Kleinschreibung) ab. Bei neueren GIMP-Versionen müssen Sie das Exportieren-Menü verwenden. Wählen Sie im folgenden Dialog als Symbolinformation "bbp, 16 Slot Palette" in der Listbox aus.

Favicon in Joomla! Webseite integrieren

Anschließend müssen Sie die Standard Favicon Dateien Ihrer Joomla! Installation mit dem neu erstellten favicon.ico ersetzen. Diese befinden sich sowohl im Frontend-Template und als auch im Administrator-Template. Loggen Sie sich ins Backend Ihrer Webseite ein und schauen Sie unter Extensions/Templates nach, welche Templates Sie verwenden. Ersetzen Sie dann die favicon.ico Datei im Verzeichnis templates/IhrTemplate (also das Unterverzeichnis, in dem Ihr Frontend-Template liegt) und administrator/templates/IhrAdminTemplat (also das Unterverzeichnis, in dem Ihr Administrator-Template liegt). Es ist möglich, dass Ihre Webseite mehr als zwei Templates verwendet, dann müssen Sie entsprechend in allen Templates das favicon.ico ersetzen.

Browsercache löschen

Erfahrungsgemäß cachen einige Browser das Favicon über eine längere Zeit. Wenn Sie also das neue Favicon nach Aktualisierung Ihrer Seite nicht sofort angezeigt bekommen, müssen Sie evtl. den Browser-Cache löschen.

Zur Beitragsliste