In Joomla 6 gehören Ihre eigenen Favicon-Dateien für ein Child-Template in den Ordner media/templates/site/[dein-child-template]/images/.
Da Joomla standardmäßig nach mehreren Dateiformaten sucht, sollten Sie Ihr Favicon in drei Varianten in dieses Verzeichnis hochladen:
• favicon.ico
• joomla-favicon.svg
• joomla-favicon-pinned.svg
So gehen Sie Schritt für Schritt vor:
- Dateien vorbereiten: Benennen Sie Ihre Grafikdateien exakt so wie oben beschrieben (Joomla behält den Dateinamen joomla-favicon aus dem Standard-Template Cassiopeia bei, sucht aber zuerst in Ihrem Child-Ordner danach).
- Über das Joomla-Backend hochladen:
• Gehen Sie auf System → Templates → Site Templates.
• Klicken Sie auf den Namen Ihres Child-Templates (nicht auf den Stil), um die Dateistruktur zu öffnen.
• Navigieren Sie im linken Verzeichnisbaum in den Ordner images.
• Klicken Sie oben auf Datei hochladen und wählen Sie Ihre drei Favicon-Dateien aus.
- Alternativ per FTP:
• Verbinden Sie sich mit Ihrem Webspace und navigieren Sie zum Pfad: /media/templates/site/[Name_Ihres_Child_Templates]/images/.
• Laden Sie die Dateien dort direkt hoch.
Hinweis: Nach dem Hochladen kann es vorkommen, dass noch das alte Icon angezeigt wird. Leeren Sie in diesem Fall den Joomla-Cache und den Cache Ihres Webbrowsers komplett.
Die drei Favicon-Dateien erfüllen unterschiedliche technische Aufgaben und werden von verschiedenen Browsern und Betriebssystemen ausgelesen.
Hier sind die Unterschiede, Maße und worauf Sie achten müssen:
- joomla-favicon.svg (Das moderne Standard-Icon)
• Was es ist: Eine moderne Vektorgrafik, die von fast allen aktuellen Desktop- und Mobil-Browsern (Chrome, Firefox, Edge, Safari) bevorzugt wird.
• Maße: Da es eine Vektordatei (SVG) ist, hat sie keine festen Pixelmaße. Sie skaliert ohne Qualitätsverlust von 16x16 Pixeln bis hin zu Retina-Auflösungen.
• Worauf Sie achten müssen: Erstellen Sie das SVG im quadratischen Format (z. B. eine Zeichenfläche von 512x512 Pixeln in Ihrem Grafikprogramm). Es sollte komprimiert sein (SVG-Tiny) und keine externen Schriftarten oder verlinkten Bilder enthalten.
- joomla-favicon-pinned.svg (Für Safari / macOS)
• Was es ist: Apple nutzt dieses Icon für angepinnte Tabs (Pinned Tabs) in Safari und für die Touch Bar auf dem MacBook.
• Maße: Auch hierbei handelt es sich um eine Vektorgrafik (SVG) ohne feste Pixelmaße.
• Worauf Sie achten müssen:
• Das Icon muss komplett schwarz sein (100% Schwarz auf transparentem Hintergrund). Safari färbt dieses Icon später automatisch ein, wenn der Nutzer den Tab anpinnt.
• Es darf keine Farbverläufe oder Graustufen enthalten. Nur solide, schwarze Formen.
- favicon.ico (Für die Abwärtskompatibilität)
• Was es ist: Das klassische, alte Favicon-Format. Es dient als Fallback für ältere Browser (wie den alten Internet Explorer) oder bestimmte RSS-Reader, die keine SVGs lesen können.
• Maße: Eine .ico-Datei ist ein Container, der idealerweise mehrere Auflösungen in einer einzigen Datei speichert. Sie sollte folgende Größen enthalten:
• 16x16 Pixel (für die Tableiste)
• 32x32 Pixel (für Lesezeichen/Bookmarks)
• 48x48 Pixel (für Windows-Anwendungs-Icons)
• Worauf Sie achten müssen: Sie können eine quadratische PNG-Datei (z. B. 48x48 Pixel) über kostenlose Online-Tools (wie favicon-generator.org oder realfavicongenerator.net) in eine echte .ico-Datei mit allen nötigen Untergrößen umwandeln lassen.
💡 Wichtig für Joomla 6:
Joomla bindet die SVGs so im Quellcode ein, dass moderne Browser automatisch die scharfe Vektor-Variante wählen, während ältere Systeme im Hintergrund auf die .ico-Datei zurückgreifen. Laden Sie daher am besten alle drei Varianten hoch, um auf allen Geräten ein perfektes Ergebnis zu erzielen.
Das apple-touch-icon.png und das android-chrome-icon werden verwendet, wenn ein Nutzer Ihre normale Website im Browser öffnet und auf "Zum Home-Bildschirm hinzufügen" klickt.
Wenn Sie das noch einen Schritt weiter treiben und Ihre Website so einrichten, dass sie sich wie eine echte App öffnet – also ohne die Adressleiste des Browsers, im Vollbildmodus und blitzschnell –, spricht man von einer PWA (Progressive Web App).
So verwandeln Sie Ihre Joomla 6 Website in eine solche Web-App:
Schritt 1: Die App-Icons im Child-Template hinterlegen
Damit Ihre Website auf dem Smartphone-Bildschirm ein schönes Icon hat, benötigt sie PNG-Grafiken.
- Grafiken erstellen: Erstellen Sie ein quadratisches Logo (am besten 512x512 Pixel).
- Ordner: Laden Sie die Datei als apple-touch-icon.png in denselben Ordner Ihres Child-Templates hoch, in dem auch die Favicons liegen:
media/templates/site/[dein-child-template]/images/
- Im Code einbinden: Joomla 6 lädt das Apple-Touch-Icon bei Child-Templates oft nicht vollautomatisch im Quelltext. Sie sollten es manuell in die index.php Ihres Child-Templates einfügen (im <head>-Bereich):php
$this->addHeadLink(JUri::base() . 'media/templates/site/DEIN_CHILD_TEMPLATE/images/apple-touch-icon.png', 'apple-touch-icon', 'rel');
Verwende Code mit Vorsicht.
Schritt 2: Die Website als App konfigurieren (Die PWA-Methode)
Um aus der Website eine installierbare "App" zu machen, benötigt der Browser eine Steuerungsdatei namens manifest.json. Diese sagt dem Smartphone: "Ich bin eine App, blende die Browser-Leiste aus."
In Joomla 6 lässt sich das am einfachsten über ein Plugin lösen, da die manuelle Einrichtung eines sogenannten Service Workers (für Offline-Funktionen) technisch sehr aufwendig ist.
Option A: Der einfachste Weg über eine Joomla-Erweiterung (Empfohlen)
Es gibt hervorragende, oft kostenlose Erweiterungen im Joomla Extensions Directory (JED), die das mit drei Klicks erledigen (z. B. nach "PWA" oder "Progressive Web App" suchen).
• Diese Plugins generieren die manifest.json automatisch.
• Sie laden dort einfach Ihr App-Icon hoch.
• Sie können einstellen, ob die App im Vollbildmodus (Standalone) starten soll und welche Hintergrundfarbe der Ladebildschirm (Splash Screen) haben soll.
Option B: Der manuelle Weg (Für Entwickler)
Wenn Sie kein Plugin nutzen möchten, können Sie eine Datei namens manifest.webmanifest im Hauptverzeichnis Ihrer Joomla-Installation erstellen:
json
{
"name": "Meine Joomla 6 Website",
"short_name": "JoomlaApp",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0056b3",
"icons": [
{
"src": "/media/templates/site/DEIN_CHILD_TEMPLATE/images/apple-touch-icon.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Verwende Code mit Vorsicht.
Diese Datei müssen Sie dann ebenfalls im <head> Ihrer index.php verknüpfen:
html
<link rel="manifest" href="/manifest.webmanifest">
Verwende Code mit Vorsicht.
Wie der Nutzer Ihre "App" installiert:
Sobald das eingerichtet ist, passiert folgendes:
• Auf dem iPhone (Safari): Der Nutzer tippt unten auf das Teilen-Symbol (Viereck mit Pfeil nach oben) und wählt "Zum Home-Bildschirm". Die Website landet mit Ihrem Icon auf dem Display und öffnet sich fortan ohne Safari-Browserleiste.
• Auf Android (Chrome): Chrome erkennt die Manifest-Datei oft automatisch und zeigt dem Nutzer sogar aktiv ein kleines Banner mit "App installieren" an.