Favicon funktioniert im Safari nicht

[walter333]

hallo

ein Problem bzgl. dem favicon: wenn man zb am iphone den Shop als Favoriten oder Lesezeichen hinzufügen möchte, dann übernimmt es das favicon nicht als Symbol, sondern nur einen Buchstaben.

Überall anders übernimmt es das favicon.

Mit der Standardzeile von Shopify selbst für das favicon, übernimmt es das favicon nur auf normalen Browsern, deshalb wurde für die Apple Geräte um diese Zeile ergänzt <link rel="apple-touch-icon" href="*Dateipfad*_favicon-180.png" sizes="180x180"> , funktioniert aber trotzdem nicht.

Auf anderen Websites die nicht mit Shopify laufen, funktioniert genau der gleiche Code tadellos.

Woran liegt es, dass mit Shopify das favicon bei Safari bei mobilen Geräten für die Favoriten/Lesezeichen nicht funktioniert?

Danke für Infos!

PS: gibt es bei Shopify überhaupt keine Möglichkeit, zb. die favicon Dateien direkt ins root Verzeichnis des Shops legen zu können?

[Gabe]

Hey @walter333 

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren.

Es gibt mehrere Gründe, warum das Favicon auf mobilen Safari-Browsern, insbesondere auf dem iPhone, möglicherweise nicht wie erwartet funktioniert:

• Caching: Safari hat manchmal hartnäckige Cache-Einstellungen. Selbst wenn du die entsprechenden Änderungen vorgenommen hast, kann es sein, dass der Cache des Browsers immer noch die ältere Version speichert. Lösche den Browser-Cache auf deinem iPhone und prüfe dann, ob das Problem weiterhin besteht.
• Dateipfad: Stelle sicher, dass der Pfad, den du im <link>-Tag angibst, korrekt ist. Shopify hat einen etwas anderen Dateipfad System als andere Webhosting-Dienste und arbeitet somit ggf. ganz anders als du es vielleicht gewohnt bist.
• Mehrere Favicons: Manchmal kann es sein, dass es mehrere Favicon-Definitionen in deinem HTML-Code gibt. Das kann zu Konflikten führen. Überprüfe den gesamten Code deiner Webseite und stelle sicher, dass es keine doppelten oder widersprüchlichen Favicon-Einträge gibt.
• Theme-Problem: Es könnte auch ein Problem mit dem von dir verwendeten Theme geben. Überlege, ob du kürzlich Änderungen am Theme vorgenommen hast und versuche, das Problem durch Testen mit einem anderen Theme zu isolieren.
• Shopify-Einstellungen: In den Einstellungen von Shopify gibt es einen Bereich, in dem du ein Favicon hochladen kannst. Wenn du das gemacht hast und auch manuell Code hinzugefügt hast, könnte es zu Überschneidungen kommen. Gehe zu "Online-Store" -> "Themes" -> "Anpassen" und dann im linken Menü zu "Theme-Einstellungen" -> "Favicon", um die Einstellung zu überprüfen.

Was das Root-Verzeichnis betrifft: Shopify gibt den Nutzern standardmäßig keinen direkten Zugriff auf das Root-Verzeichnis da Shopify ja ein gehosteter SaaS Plattformdienst ist. Aber das Einfügen von Favicons über den oben beschriebenen Theme-Bereich oder über den <link>-Tag im HTML-Head sollte ausreichen, um die meisten Anforderungen zu erfüllen.

Wenn du nach der Überprüfung dieser Punkte immer noch Probleme hast, empfehle ich, einen Experten zu kontaktieren um nach weiterer Hilfe zu suchen.

[walter333]

hallo Gabe,

danke für die Antwort und die Infos!

Alles schon merhmals probiert 😉

Wenn Safari das Icon für den Vorgang "zu den Favoriten hinzufügen" holt, dann greift es - wie es aussieht - rein auf das root directory zu, egal was man als Pfad definiert hat, das dürfte das Problem sein.

>>

"GET /apple-touch-icon.png HTTP/1.1" 200 -

Wenn man in Safari die Website zB zum Startbildschirm hinzufügt, dann holt es sich das Icon auch problemlos über einen definierten Pfad.

Daher würde es das Problem wohl lösen, wenn man es ins root directory geben könnte.

schöne Grüße

[Gabe]

Hey @walter333 

Nicht vergessen, wenn die verwendeten Bilder nicht hochauflösend sind, können sie auf hochauflösenden (Retina-)Displays auf iPhone entweder unscharf oder gar nicht erscheinen. Dies ist ein bekanntes Problem auf Retina.

• Daher würde es das Problem wohl lösen, wenn man es ins root directory geben könnte.

Ja, in einer perfekten Welt aber, wie gesagt, Shopify gibt Nutzern keinen direkten Zugang zur Root-Directory aus Sicherheitsgründen. Stell dir mal vor was das für eine Hintertür wäre für böswillige Akteure (u.a. Datendiebstahl, Malware-Upload, Shopdaten-Manipulation, Quellcode-Diebstahl, DDoS attacks, Ransomware, Geldwäsche und falsche Transaktionen, Zero-Day-Exploits, Reputationschaden, Spam, und Phishing, und, und, und......die Liste geht weiter was die alles anrichten könnten wenn man Zugang zur Root Directory hätte... 

Derzeit hat man aber ganz tollen Zugriff über die Admin API und die Storefront API. Hast du es über diesen Weg probiert?

Mit der Admin API kannst du beispielsweise auf die Theme-Dateien zugreifen und sie manipulieren. D.h. du könntest versuchen, den notwendigen Code für das Favicon in den entsprechenden Dateien (z. B. theme.liquid) hinzuzufügen oder zu ändern.

• Endpoint: GET /admin/api/2023-10/themes/{theme_id}/assets.json?asset[key]=templates/layout/theme.liquid&theme_id={theme_id}
• Nachdem du den Inhalt erhalten hast, könntest du ihn ändern und dann mit einem PUT-Request wieder hochladen.

Manchmal hilft es, verschiedene Größen für das Apple-Touch-Icon anzugeben, da unterschiedliche Geräte und iOS-Versionen verschiedene Größen bevorzugen können. Du könntest versuchen, mehrere <link rel="apple-touch-icon" ...> Tags mit verschiedenen Größen hinzuzufügen, um zu sehen, ob das hilft.

Du könntest auch eine URL-Umleitung (Redirect) in Shopify einrichten. Diese Umleitung sollte Anfragen an /apple-touch-icon.png zu der tatsächlichen URL deines Favicons weiterleiten. Es ist jedoch ungewiss, ob dies das Verhalten von Safari beeinflusst, da es sein kann, dass Safari nicht erneut nach dem Favicon sucht, nachdem es einmal festgestellt hat, dass /apple-touch-icon.png nicht existiert.

[walter333]

Hallo Gabe,

danke für die Antwort und die Info,

das mit der url Umleitung hätte ich schon probiert, hat keine Änderung gebracht. Verschiedene Größen auch schon angegeben gehabt, auch ohne Erfolg.

Werde noch die Variante über die API probieren, die du anregst.

Schöne Grüße

[Gabe]

Halte uns auf dem Laufenden! 😉