3 große Probleme mit Favicons in Safari

Gemoran · ‎11-03-2024

Ich habe 3 große Probleme mit Favicons in Safari, von denen ich leider nur eins trotz intensiver Recherche selber lösen könnte.

1. Problem: Bei mir auf dem Iphone wird noch ein altes Favicon gespeichert, sämtliche Versuche es zu löschen sind gescheitert wie Cache löschen oder Handy neustarten - Scheint aber ein Allgemeines Safari Problem zu sein. Kunden / Neubesucher sehen zum Glück das richtige Logo.

2. Problem: Favicon fehlt wenn ich es in Favoriten hinzufügen will - Besonders für Kunden die meine Seite als Lesezeichen auf dem Safari abspeichern wollen ist es ärgerlich.

3. Problem: Apple Touch Icon fehlt.

Das Problem 3 konnte ich mit einem favicongenerator lösen. Habe kurzfristig folgenden Code hinzugefügt vom /head und natürlich die Dateinnamen angepasst

Dies hat Problem 3 gelöst.

Egal was ich aber gemacht habe, es lässt sich nicht die Seite mit Icon als Favorit abspeichern. (Problem 2)

Ich sehe auch bei Konkurrentseiten, dass dies genauso ist.

Habe sonst gelesen unter: https://community.shopify.com/c/technische-fragen-antworten/favicon-funktioniert-im-safari-nicht/m-p... , dass dies überhaupt nicht möglich ist, da man auf dass Root Verzeichnis zugreifen muss?

Ich hoffe ich kann hier einen Favicon Experten finden - Ich bin jemand, der sich leider wegen jeder Kleinigkeit den Kopf zerbricht. Vielen Dank schonmal !:)

Ben310 · ‎12-16-2024

Hast du das lösen können?

Gemoran · ‎12-16-2024

Nur Problem 3.

Ben310 · ‎12-16-2024

Liegt wahrscheinlich daran, dass Safari sehr aggressiv Cache-Daten speichert, insbesondere Favicons. Gehe mal zu: Einstellungen -> Safari -> Verlauf und Websitedaten löschen (löscht aber auch den gesamten Verlauf und Cookies). Gehe auch in den Finder und lösche den Safari Favicon Cache auf dem Mac und starte Safari neu.

Neues Favicon erzwingen mit „Cache Busting“: Füge einen Zeitstempel oder Versionierungsparameter zur Favicon-URL hinzu <link rel="icon" href="favicon.ico?v=2">. Safari lädt so die neueste Version, da es denkt, es sei eine neue Datei.

Das Problem Favicon fehlt beim Hinzufügen zu den Favoriten tritt häufig auf, wenn Safari nicht die passenden Apple Touch Icons erkennt, die speziell für iOS-Geräte benötigt werden. Stelle sicher, dass du Meta-Tags in den <head>-Bereich deiner HTML-Seite einfügst:

<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="#5bbad5">

Gemoran · ‎12-25-2024

Das mit dem Cache Bursting hat geklappt soweit..

Bei dem Problem mit dem fehlenden Logo beim hinzufügen zu den Favoriten finde ich keine Lösung. Laut Realfavicongenerator ist das Apple Touch Icon richtig dargestellt (Es wird ja auch beim hinzufügen auf dem Homebildschirm richtig angezeigt)

Einzig das Problem mit dem Favoriten bleibt bestehen und ich habe schon wirklich alles versucht.

Es muss ein allgemeines Problem bei dem Dawn Theme sein, ich habe circa 50 Shops die das Theme benutzen analysiert und bei jedem einzelnen fehlt das Logo für die Favoriten in Safari. Es muss also irgendwas am Theme Code sein.

Naja egal ist ja nicht so schlimm, es wundert mich nur.

3 große Probleme mit Favicons in Safari

3 große Probleme mit Favicons in Safari

Community Blog Artikel