Template - Favicon

Ein Favicon ist ein kleines Symbol, das dazu dient, eine Website auf erkennbare Weise zu kennzeichnen. Es erscheint auf verschiedenen Geräten auf unterschiedliche Weise. Meistens sieht man es als Symbol in den Favoriten, wenn man die Website hier speichert, um in Zukunft schneller aufrufen zu können. Fast immer sind die Tabulatoren im Internet-Browser mit dem Symbol versehen.

Die Größe und der Typ des Favicon wird auf unterschiedlichen Geräten anders erwartet. Ich nutze die Website realfavicongenerator.net, um die optimale Form meines Bildes für die jeweiligen Geräte zu erstellen. Ich sehe dieses Werkzeug als erprobt und am einfachsten in der Handhabung an. Es gibt allerdings eine alternative neuere Vorgehensweise. Diese wird vom Joomla Standardtemplate Cassiopeia verwendet. Falls du lieber das moderne SVG-Format mit einer ICO-Datei als Rückfallebene verwendest, findest du unter Favicon im Joomla-Template eine Lösung die besser zu dir passt.

Für Ungeduldige: Sieh dir den geänderten Programmcode in der Diff-Ansicht[^codeberg.org/astrid/j4examplecode/compare/t40...t41] an und übernimm diese Änderungen in deine Entwicklungsversion.

Schritt für Schritt

In diesem Abschnitt schaffen wir einen Wiedererkennungswert. Im ersten Schritt wählen wir ein Image. Für das Beispiel habe ich eine gelbe PNG-Datei gewählt. Im nächsten Schritt wandeln wir diese mithilfe der Website realfavicongenerator.net in unterschiedliche Formate.

Tipp: Lösche den Browser-Cache, falls beim Entwickeln Änderungen des Favicons nicht sichtbar werden.

Neue Dateien

Der Favicon-Generator erstellt 9 Datei, die wir in unser Template-Verzeichnis kopieren. Ich habe alle im Verzeichnis templates/facile/favicon_package abgelegt. Es handelt sich dabei genau um die Files

1. android-chrome-192x192.png
2. android-chrome-512x512.png
3. apple-touch-icon.png
4. browserconfig.xml
5. favicon-16x16.png
6. favicon-32x32.png
7. favicon.ico
8. mstile-150x150.png
9. site.webmanifest

Geänderte Dateien

templates/facile/index.php

Damit die Dateien gefunden werden, sind Einträge in der Datei templates/facile/index.php erforderlich. Die Variable $templatePath hilft mir beim Erstellen des relativen Pfades.

Die Variable $templatePath hatten wir im letzten Kapitel eingeführt. Sie ist mit $templatePath = 'templates/' . $this->template; belegt und zeigt somit auf das Verzeichnis des aktuellen Templates im Joomla-Verzeichnisbaum. Der Eintrag <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $templatePath . '/favicon_package'; ?>/favicon-16x16.png"> wird so im HTML-Quelltext zu <link rel="icon" type="image/png" sizes="16x16" href="/PfadZuJoomla/templates/facile/favicon_package/favicon-16x16.png">.

templates/facile/index.php

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <jdoc:include type="styles" />
     <jdoc:include type="scripts" />

   <link rel="apple-touch-icon" sizes="180x180"
       href="<?php echo $templatePath . '/favicon_package'; ?>/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32"
       href="<?php echo $templatePath . '/favicon_package'; ?>/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16"
       href="<?php echo $templatePath . '/favicon_package'; ?>/favicon-16x16.png">
   <link rel="manifest" href="<?php echo $templatePath . '/favicon_package'; ?>/site.webmanifest">
   <meta name="msapplication-TileColor" content="#da532c">
   <meta name="theme-color" content="#ffffff">

     <script type="module" src="https://unpkg.com/dark-mode-toggle"></script>
 </head>

Teste dein Joomla-Template

1. Installiere dein Template in Joomla Version 4, um es zu testen: Kopiere die Dateien im templates Ordner in den templates Ordner deiner Joomla 4 Installation. Eine neue Installation ist nicht erforderlich. Verwende die aus dem vorhergehenden Teil weiter. Vergewissere dich, dass die Favicons auf den jeweiligen Geräten korrekt angezeigt werden. Nachfolgend siehst du eine Darstellung im Browser Firefox.

Links

Favicon Generator[^realfavicongenerator.net]