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.

Favicon Graphik erstellen

Zuerst benötigst du eine PNG Grafik mit ausreichender Größe (z.B. 512px 512px). Die Grafik sollte auf jeden Fall quadratisch sein. Hierfür kannst du ein beliebiges Grafikprogramm verwenden.

Du hast nun mehrere Möglichkeiten, wie du das Favicon bei Contao integrieren kannst.

Favicons per Erweiterung einbinden

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

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, Unternehmertum und Persönlichkeitsentwicklung.

Folge Christian jetzt auf Twitter, Facebook, Instagram und Xing.

1 Kommentare

Didier |

Hi Christian
Ich habe das genau so umgesetzt, aber trotzdem wird mir in der /var/log/ immer noch ein Fehler generiert der besagt, dass das favicon.ico nicht gefunden wird (https://www.domain.ch/favicon.ico). Der Fehler dürfte doch in der /var/log/ nicht auftauchen, da das Favicon wie hier beschrieben eingebunden wird oder ????

Christian Feneberg Antwort von Christian Feneberg

Hallo Didier,

der Fehler stammt vermutlich vom Backend. Bitte kopiere die Datei favicon.ico zusätzlich in den Ordner /web

Einen Kommentar schreiben

Was ist die Summe aus 4 und 5?