Favicon bei Contao hinzufügen
- 3.5
- 4.4
- 4.9
- 4.13
- 5.x
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 eine der folgenden Contao-Erweiterungen installieren und verwenden.
Favicon ohne Erweiterung in Contao einbinden
Um die passenden Größen und den Quellcode für deine Favicons zu erzeugen, empfehle ich das Tool RealFaviconGenerator. Hier lädst du deine Grafik hoch, wählst die gewünschten Optionen aus und erhältst als Ergebnis alle nötigen Dateien und HTML-Tags.
Wenn du dein Favicon erzeugt hast, dann extrahierst du die ZIP-Datei, die der Favicon-Generator erstellt hat. Diese Dateien lädst du alle in den neuen Unterordner /files/favicon/
Anschließend wechselst du im Contao Backend 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.
Hinweis:
Ab Contao 4.9 kannst du im Backend für jeden Startpunkt einer Website ein Favicon im Dateiformat ico einstellen. Allerdings wird hierbei nur das klassische Favicon im ICO-Format unterstützt. Alle anderen Formate und Größen werden dabei nicht berücksichtigt.
Über den Autor

Christian Feneberg ist der Gründer der Contao-Academy und erstellt seit 2010 Websites mit Contao. Außerdem ist er im Team von trakked.io. und regelmäßig auf YouTube in der Contao Show zu sehen. Neben Contao begeistert er sich für Online-Marketing, Unternehmertum und Persönlichkeitsentwicklung.
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 ????
Hallo Didier,
der Fehler stammt vermutlich vom Backend. Bitte kopiere die Datei favicon.ico zusätzlich in den Ordner /web
Einen Kommentar schreiben