Joomla 4.x-Tutorial - Entwicklung von Erweiterungen - Template - Favicon

Ändere diesen Beitrag

Ein [Favicon](https://de.wikipedia.org/wiki/Favicon ist ein kleines Symbol, das verwendet wird, um eine Website auf wiedererkennbare Weise zu kennzeichnen. Es erscheint auf unterschiedlichen Geräten beim Speichern einer Website als Favorit.

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-Ansichtgithub.com/astridx/boilerplate/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.

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

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.

Joomla Template erstellen - Favicon

Links

Favicon Generatorhttps://realfavicongenerator.net

Ändere diesen Beitrag

Comments