Favicon bei Contao hinzufügen

Zur Wiedererkennung von Webseiten ist es sinnvoll, ein sogenanntes Favicon zu verwenden. Dieses wird beispielsweise in den Bookmarks bzw. Favoriten im Webbrowser oder auch in den Browser-Tabs angezeigt.

1. Graphik erstellen

Zuerst solltest du eine PNG-Graphik mit ausreichender Größe erstellen (z.B. 512 x 512px). Die Graphik sollte auf jeden Fall quadratisch sein. Hierfür kannst du ein beliebiges Graphikprogramm verwenden.

2. Favicons per Erweiterung einbinden

Hierfür kannst du die Erweiterung [contao-easy-favicon] installieren und verwenden.

3. Favicon ohne Erweiterung in Contao einbinden

Um die passenden Größen und den Quellcode für die Favicons zu erzeugen, empfehle ich das Tool Favicon Generator. Hier lädst du deine Graphik hoch und wählst die entsprechenden Optionen aus.

Wenn du dein Favicon erzeugt hast, dann extrahierst du die ZIP-Datei, die uns der Favicon-Generator erstellt hat. Diese Dateien laden wir alle in den neuen Unterorder  /files/favicon/

Anschließend wechseln wir unter Themes > Seitenlayouts und ergänzen alle vorhandenen Layouts im Bereich Zusätzliche <head>-Tags wie folgt:

<link rel="apple-touch-icon" sizes="180x180" href="/files/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/files/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/files/favicon/favicon-16x16.png">
<link rel="manifest" href="/files/favicon/site.webmanifest">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">

Evtl. musst du die Pfade noch anpassen, falls du einen anderen Ordner wie /files/favicon/ verwendest.

Tutorial getestet mit Contao:
  • 3.5
  • 4.3
  • 4.4
  • 4.5
Hat dir dieser Artikel gefallen?

Willst du in Zukunft keinen Artikel verpassen?
Dann trage hier deine E-Mailadresse ein und klicke auf "Abonnieren". Du erhältst regelmäßig aktuelle Infos über Contao und die Contao-Academy.

Wir geben deine Daten niemals an Dritte weiter! Du kannst deine E-Mailadresse jederzeit mit nur 1 Klick wieder aus unserem System löschen. Datenschutzhinweis

Über den Autor
Christian Feneberg (Gründer Fenepedia)

Christian Feneberg ist der Gründer der Contao-Academy und nutzt seit 2010 Contao. Neben Contao begeistert er sich für Online-Marketing und SEO.

Folge Christian jetzt auf Twitter, Facebook oder Xing.

Einen Kommentar schreiben