Die Geschichte vom Joomla-Favicon auf der Geburtstagsparty
Vor ein paar Tagen waren meine Frau und ich auf einer Geburtstagsparty eingeladen. Es war eine dieser Abende, an denen man eigentlich nur entspannen wollte: gute Musik, ein Glas Bier in der Hand, der Duft vom Grill hing in der Luft, und überall standen kleine Grüppchen zusammen, die über Gott und die Welt plauderten.
Ich hatte mich gerade in eine Diskussion über Fußball vertieft, als ich plötzlich im Hintergrund einen Satz aufschnappte, der sofort meine Aufmerksamkeit fesselte.
„Ich verstehe das nicht“, klagte jemand, „jedes Mal, wenn ich mein Joomla aktualisiere, ist mein Favicon wieder verschwunden. Dann muss ich es erneut hochladen – und das nervt!
Und das alles, obwohl ich ein Child-Template von Cassiopeia nutze!
Morgen werde ich ein neues Update hochladen und was wetten wir? Mit absoluter Sicherheit ist im Browser wieder das Joomla-Favicon zu sehen und nicht meines!“
In meinem Kopf machte sofort klick. Das war genau mein Gebiet. Als Mediendesigner, der auch Websites mit Joomla erstellt, wusste ich genau, was er meinte:
Während in früheren Joomla-Versionen (vor allem Joomla 2.5 oder Joomla 3.x) das Favicon häufig im Template-Ordner lag, hat sich diese Struktur mit Joomla 4 geändert.
Seit Joomla 4 mit seinem Standard-Template Cassiopeia ist der Pfad für das Favicon:
/media/system/images
Achtung: Das gilt nicht für jedes Template. Einige Templates erlauben es, das Favicon in anderen Ordnern zu speichern.
Ich spreche hier vom Standard-Template Cassiopeia, welches ich entsprechend den Anforderungen des Kunden und seinem Corporate Design anpasse.
Wenn man Änderungen an einem Template vornehmen will – und das kommt immer vor, wenn man es z.B. an das eigene Corporate Design anpassen will – ist die 1. Regel: Arbeite niemals an den Originaldateien!
Erstelle ein Child-Template, um dort die Änderungen update-sicher unterzubringen.
Der Browser zeigt die im Kind-Template veränderten Einstellungen und übernimmt ansonsten alle Werte vom ableitenden Eltern-Template.
Neugierig trat ich näher, stellte mein Glas auf den Tisch und mischte mich in das Gespräch. Die kleine Runde bestand aus zwei Männern – Nico und Emil –, die offenbar gerade ein privates Webprojekt betreuten, und Nina, einer jungen Fotografin, die sich und ihre Arbeit Online darstellen wollte.
„Entschuldigt, dass ich mich einmische“, begann ich lächelnd, „aber ich glaube, bei Eurem Favicon-Problem kann ich helfen.“
Die Gesichter hellten sich sofort auf. „Oh, bitte!“, meinte Nico, der eben noch gejammert hatte. „Das ist wirklich ein Graus. Nach jedem Joomla-Update sitze ich wieder da, lade die Datei hoch, lösche den Cache, und beim nächsten Mal geht es von vorn los.“
Ich nickte. „Das liegt daran, dass ihr euer Favicon wahrscheinlich im vorgegebenen Verzeichnis oder unter /media/system/images/ speichert. Das ist aber ein Ordner, den Joomla bei Updates immer überschreibt. Kein Wunder, dass eure Datei wieder verschwindet.“
„Und was kann man dagegen tun?“, fragte Nina.
„Die Lösung ist ziemlich einfach und gleichzeitig elegant“, erklärte ich. „Man muss nur das Favicon an einem Ort speichern, den Joomla bei Updates nicht anrührt. Und das sollte bei Cassiopeia – oder generell bei allen Templates – der Template-Ordner des Child-Templates sein.
Wenn ihr ohnehin mit einem Child-Template arbeitet, ist das der richtige Ort. Denn dort bleibt wirklich alles sicher.
Alle anderen Dateien – auch im Verzeichnis in dem Cassiopeia als Eltern-Template liegt – wird bei den regelmäßigen Updates überschrieben.“
Ich griff nach einer Serviette und begann mit dem Kugelschreiber zu skizzieren. „Euer Pfad sollte also so aussehen:
/templates/euer_cassiopeia_child/images/favicon.ico
Alle schauten neugierig auf die kleine Zeichnung.
„Das ist das Zauberwort: cassiopeia_child. Wenn ihr ein Child-Template nutzt, könnt ihr dort euren eigenen images-Ordner anlegen, und genau da gehört das Favicon hinein.
Joomla-Updates ändern das Child-Template nie, also bleibt euer Favicon dauerhaft erhalten.“
Die beiden Männer nickten zustimmend, aber ich sah, dass sie noch Fragen hatten. Also führte ich den Gedanken weiter aus:
„Damit der Browser das Favicon auch wirklich anzeigt, müsst ihr es unter <head>...</head> eurer index.php des Child-Templates einbinden. Das sieht dann so aus:
<link rel="icon" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/favicon.ico" type="image/x-icon">
Sie sahen auf die Serviette und dann kam auch gleich die Frage: „Warum denn 2x <link rel=?“
„Das liegt an den Browsern, die Eure User nutzen.
- rel=”icon” erkennen alle modernen Browser
- rel=”shortcut icon” hängt Ihr vorsichtshalber dran, damit auch User mit älteren Browsern Euer favicon sehen.“
Wenn ihr möchtet, könnt ihr auch gleich noch moderne Formate ergänzen, etwa ein favicon.svg oder ein apple-touch-icon.png für iPhones.
Aber der Kern ist: Alles liegt sicher im Child-Template. Kein Update kann das überschreiben.“
Nina war begeistert. „Also muss ich mein Icon nur einmal hochladen – und das war’s?“
„Genau“, bestätigte ich. „Einmal sauber eingerichtet, und ihr habt Ruhe. Wichtig ist nur, den Joomla- und Browser-Cache zu leeren, wenn ihr das Icon austauscht. Favicons werden extrem hartnäckig gespeichert. Manchmal denkt man, es wäre immer noch das alte, obwohl der Browser nur aus dem Cache lädt.“
Emil lachte. „Jetzt verstehe ich endlich, warum mein Test-Favicon immer noch angezeigt wurde, obwohl ich längst ein neues hochgeladen hatte.“
Wir lachten gemeinsam, und ich merkte, dass die Stimmung noch entspannter wurde. Die Unterhaltung hatte etwas von einem Mini-Workshop mitten auf einer Geburtstagsparty. Während die Musik lauter wurde und ein paar Leute bereits anfingen zu tanzen, stand unsere kleine Gruppe zusammen, vertiefte sich in die Feinheiten von Joomla-Child-Templates und diskutierte darüber, warum so viele Anfänger ihre Änderungen direkt im Core-Template machen – und dann jedes Mal beim Update alles verlieren.
„Das ist genau der Grund, warum ich meinen Kunden immer predige, Child-Templates zu verwenden“, sagte ich. „Man kann Farben, Layouts, CSS, Favicons und vieles mehr dort ablegen, und alles bleibt sicher. Wer direkt im Cassiopeia-Ordner arbeitet, wird früher oder später frustriert sein.“
Nina machte sich eifrig Notizen auf ihrem Handy. „Das ist wirklich Gold wert. Ich hätte nie gedacht, dass man so ein kleines Detail wie ein Favicon so klug lösen kann.“
Ich schmunzelte. „Das ist das Schöne an Webdesign: Oft sind es die kleinen Dinge, die einen großen Unterschied machen. Ein Favicon wirkt winzig, aber es transportiert die Markenidentität. Es macht eine Website sofort wieder erkennbar. Und wenn man dafür jedes Mal nach einem Update Zeit verschwenden muss, ist das nicht nur ärgerlich, sondern auch unprofessionell.“
Langsam mischte ich mich wieder unter die anderen Gäste, aber ich sah noch aus der Ferne, wie die drei sich weiter über Joomla unterhielten. Für mich war es ein schönes Gefühl: Ein Abend voller Musik, Freunde und Gespräche – und mittendrin ein kleines Stück Fachwissen, das jemandem wirklich geholfen hat.
Und schon am nächsten Tag kam die Rückmeldung. Nico rief am Vormittag an:
„Hallo, wir haben unser favicon so eingebunden, wie Du es gestern aufgeschrieben hast und es funktionierte!
Und das Beste ist, dass wir danach das neue Joomla-Update eingespielt haben, ohne dass das favicon, wie sonst immer, überschrieben wurde.“
