Favicon bei Contao hinzufügen

  • 3.5
  • 4.4
  • 4.9
  • 4.13
  • 5.x

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 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.

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-Mail-Adresse jederzeit mit nur einem Mausklick aus unserem System löschen. Der Newsletter Versand sowie die individuelle Messung, Speicherung und Auswertung von Öffnungsraten und der Klickraten in Empfängerprofilen erfolgen durch KlickTipp. Ausführliche Hinweise erhältst du in unserer Datenschutzerklärung.

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

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.

Folge Christian jetzt auf Twitter, Xing und LinkedIn.

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

Bitte rechnen Sie 7 plus 8.