Favicon Verknüpfung auf Desktop (Handy)

  • Hallo liebe Community,


    ich verwende Joomla 3.9.3 mit dem Standart Template Protostar und habe ein Favicon eingestellt, was auch alles super funktioniert. Wird im Browser wie auch im Mobile Browser angezeigt. Nur wenn ich am Handy auf: Zum Startbildschirm hinzufügen gehe, nimmt er das Standard Bild und nicht mein Favicon. Was muss ich hier ändern, wo das Favicon reinkopieren? Ich habe keinen mobile Ordner oder sonstiges ;( Siehe Screenshotse


    Hoffe ihr könnt mir helfen, vielen Dank!

  • Das Root Verzeichnis von Joomla ist das in dem auch die index.php liegt. Das in dem auch das administrator, components, images, libaries usw. liegen... Hast du ggf. den Cache nicht aktualisiert beim testen?


    Gib uns mal einen Link, dann kann man es selbst ausprobieren (ob es bei uns angezeigt wird)

  • Ich lade auf https://realfavicongenerator.net/ ein Bild hoch. Sofort danach switcht die Seite auf eine Vorschau um. Da mache ich dann bei den Tabulatoren "Assets" Häkchen, weil ich keine Ahnung habe. "Create all ", "Declare in HTML", "Generate html_code.html"


    Ich lass mir das Paket erstellen und lade es im Tabulator "HTML5" herunter.


    Die entpackten Bilder/Dateien lade ich dann alle in das Wurzelverzeichnis (Root) Joomlas hoch, also in das oberste Verzeichnis, wo man auch die Ordner /administrator/, /components/, /images/ sieht.


    Persönliche Entscheidung. Da mir das favicon.ico meist zu verpixelt ist, behalte ich mein altes und kopiere es nicht hoch auf Server. ebenso die "html_code.html", die eine Vorlage ist, was man noch in sein Template reinkopieren soll.


    Dann kopiere ich die Zeilen aus der "html_code.html" in den <head>....</head>-Bereich meines Templates.

    Prüfe, ob in dem Bereich schon gleichlautende Anweisungen vom Template drinnen sind, die Konflikte machen könnten.

    Den Pfad zum favicon.ico setzt Joomla automatisch ein (sucht zuvor, wo es eines findet). Muss ich nix zutun.


    Dann prüfe ich, ob per Browser erreichbar sind: https://www.example.org/browserconfig.xml und https://www.example.org/site.webmanifest und https://www.example.org/safari-pinned-tab.svg, weil meine .htaccess einiges blockt ;-)

    Dann lasse ich auf obiger Seite den "Check your favicon" laufen und habe alles grün,

    auch, wenn er mich hinweist, dass mein favicon.ico nicht im Root-verzeichnis liegt. Habe ich ja oben rausgeschmissen. Könnte ich nat. aus meinem Template auch einfach rüberkopieren, wenn's mir nicht wurst wäre ;-)


    Bezüglich favicon.ico wärs natürlich besser auch ein generiertes in verschiedenen Größen hochzuladen. Wegen obigem Problem, war mir das aber für diesen Test zu blöd. Man kann ja auch ein weiteres Paket erstellen lassen, wo man dann ein besser geeignetes Bild nur für favicon.ico wählt.


    Wenns dann auf deinem Mobilgerät nicht funktioniert, kann's nat. auch daran liegen, dass das Gerät, der Browser die Grafik gecachet hat. Da sind die oft zickig. Schon das Austauschen eines favicon.ico bei einer Webseite kann eine Qual beim Testen sein.


    So, und jetzt habe ich nach diesem ""Tutorial"" Favicons auf meiner Seite, die ich nie haben wollte ;-)