Druckbare Version
Wenn ich bei den Website-Einstellungen ein Favicon auswähle, wird das im Frontend nicht angezeigt.
- Browser Cache löschen
- "composer install"
- Symlinks neu erstellen
... nichts davon hilft.
Jemand eine Idee?
Wie wird das Favicon im Template "fe_page.html5" ausgegeben?
Über "<?= $this->head ?>" ?
DAnke!
Das im Backend einstellbare favicon würd über die /favicon.ico Route ausgespielt. Wenn du jedoch dort schon ein physisches favicon.ico hast, wird vom Webserver dieses ausgespielt.
Handelt sich um eine frische Installation.
Ein physisches favicon.ico hab ich nicht hinzugefügt.
Hast du den Browser neu gestartet? Was passiert, wenn du example.com/favicon.ico direkt aufrufst?
Hallo Zusammen.
Ich grabe das Thema hier mal kurz auf.
Ich habe über Seitenstruktur die favicon.ico eingebunden.
Wenn ich domain.com/favicon.ico aufrufe ist das favicon auch da.
In Head-Bereich wird aber kein <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> ausgegeben.
Ist es gewollt so, wie funktioniert das eigentlich mit dem favicon-link?
Vielen Dank und beste Grüße
Das ist so gewollt. Das favicon, das du in der Seitenstruktur im Website Root einstellen kannst, ist einzig und allein für die Ausgabe der example.com/favicon.ico URL zuständig. Damit ist es dir möglich ein Fallback Favicon für jede Domain festzulegen. Denn angenommen du hast eine Multidomain-Installation und zeigst eine nicht-HTML Datei direkt im Browser an. Da es sich nicht um eine HTML Ausgabe handelt, kann es auch keine Meta Informationen bzgl. des Favicons geben und der Browser ruft daher automatisch domain/favicon.ico auf, um das Favicon für diese URL zu ermitteln. Früher warst du hier dann auf das favicon.ico in deinem DocumentRoot eingeschränkt (oder musstest entsprechend über die Server Konfiguration weiterleiten je Domain). Jetzt kannst du das direkt im Website Root pro Domain einstellen.
Jetzt leuchtet es mir ein.
Hier wird praktisch der Link /favicon.ico generiert damit es vom Browser automatisch erkannt wird.
Hab das Problem früher mit Sprachvariablen bzw. Inserttags gelöst gehabt, aber so ist es natürlich um vielfaches einfacher. Icon wählen und das wars.
Aber ich denke hier sollten auch die PNG-Dateien zugelassen werden und nicht nur ICO- oder SVG-Dateien.
Ist natürlich nur eine Anmerkung so nebenbei.
Ich weiß nicht, ob das von Browsern so unterstützt wird. Das würde bedeuten, dass die URL example.com/favicon.ico in Wirklichkeit eine PNG oder SVG Datei zurück gibt. Technisch wäre das möglich, da der Mime Type in den Response Headern festgelegt wird. Aber ob das praktisch funktioniert und überhaupt Sinnvoll ist …Zitat:
Zitat von theMatrix
Das habe ich selbst nicht getestet, was passiert, wenn die Datei im Web-Root als favicon.png liegt. Das müsste man testen.
Ich weiß nur, dass man es über <link rel="shortcut icon" type="image/x-icon" href="/favicon.png"> angeben kann und es funktioniert.
Sinnvoll wäre es eben für diejenigen, die keine ICO-Datei erstellen können und nur PNG oder SVG parat haben.
ICO-Format generieren ist immer so eine Sache. Aber mittlerweile, wenn man die PNGs auf ICO umbenennt funktionieren auch als ICO-Datei.
Das musst du nicht testen, das funktioniert auf jeden Fall nicht ;). Wie gesagt rufen Browser automatisch nur die URL example.com/favicon.ico auf.Zitat:
Zitat von theMatrix
Ja, aber darum geht es hier ja nicht. Siehe https://community.contao.org/de/show...l=1#post549333Zitat:
Zitat von theMatrix
Um in .ICO-Dateien zu konvertieren, verwende ich das Programm @icon sushi (Windows). Damit kann man auch .ICO-Dateien erzeugen, die Icons in mehreren Auflösungen enthält. Mit Photoshop erstelle ich mir dazu die Iconvarianten im PNG-Format und führe sie in @icon sushi zusammen.Zitat:
Zitat von theMatrix
Ok. Soweit ist alles verständlich angekommen.
Aber Tools wie Ryte und Goolge meckern, weil das Favicon nicht als Meta-Tag existiert. :)
Man kann es nicht jedem zurecht machen :D
Anhang 24909
Den Meta Tag musst du nach wie vor selbst einfügen. Und das ist ja oft nicht nur ein Meta Tag sondern mehrere, wie zB:Zitat:
Zitat von theMatrix
Nicht alles davon ist natürlich notwendig (oder überhaupt sinnvoll).HTML-Code:<link rel="apple-touch-icon" sizes="180x180" href="/…/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/…/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/…/favicon-16x16.png">
<link rel="manifest" href="/…/site.webmanifest">
<link rel="mask-icon" href="/…/safari-pinned-tab.svg" color="#e75113">
<link rel="shortcut icon" href="/…/favicon.ico">
<meta name="msapplication-TileColor" content="#e75113">
<meta name="msapplication-config" content="/…/browserconfig.xml">
<meta name="theme-color" content="#fabd43">