Modernes Apple Touch und Favicon Logo hinzufügen.
Bei Apple Touch und Favicons geht es darum, dass diese angezeigt werden, wenn ein Nutzer ein Lesezeichen von seinem Store anlegt oder dies bei der Google Vorschau oder im Browser als dein Logo angezeigt wird. Bei Apple nutzt man dieses anstatt der Seitenvorschau, die meist nicht gut zu lesen ist. So hat man die Möglichkeit dem Nutzer ein schönes und besseres Bild anzuzeigen. Dies hat nicht nur SEO VOrteile sondern bietet einen echten Mehrwert für den Nutzer,
Je nach Auflösung, die der Nutzer auf seinem Endgerät nutzt, benötigt man verschiedene Versionen seines Logos. Am einfachsten kann man diesen selbst erstellen oder ein vorhandenes Logo umwandeln lassen. Meine Empfehlung an dieser Stelle ist: https://realfavicongenerator.net/
Hier erhält man bereits alle Formate und Größen sowie eine Anleitung und die passenden Dateien in json, xml, ico, png. DIrekt fertig zum Upload in Shopify.
Hier kann man hochwertige professionelle Icon erstellen die z.B. auch im DarkTheme perfekt aussehen. Hier kannst du alles nach deinen wünschen konfigurieren.
Am ende gehen weit auf „Next“
Und können dann das ganze paket facicon.zip herunterladen.
Das paket dann einfach entpacken und den Inhalt in Shopify unter Dateien hochladen
Nun muss man doch die Links zu den eben hochgeladenen Bildern abrufen dazu jeweils auf die folgenden Bilder mit der Maus halten und rechts auf das Link Symbol klicken. Dann erhält man den eigenen Link zu dem Bild z.B.https://cdn.shopify.com/s/files/1/0929/9394/5867/files/favicon-96x96.png?v=1752000168
dies ruft man nun für folgende Bilder ab und notiert sich die Links:
– favicon-96×96.png
– favicon.svg
– favicon.ico
– apple-touch-icon.png
Als nächstes öffnet man den Code Editor in Shopify
- Shopify Admin öffnen
- Onlineshop > Themes öffnen
- … Drei Punkte Menü
- Code bearbeiten auswählen
Links in der Dateiauswahl den Ordner layout öffnen und die Datei theme.liquid öffnen. Direkt unter <link rel="canonical" href="{{ canonical_url }}"> folgende Coden einfügen: Dabei die zuvor kopierten Links einfügen sowie den Webseitentitel
<link rel="icon" type="image/png" href="kopierten_Link_von_favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="kopierten_Link_von_favicon.svg" />
<link rel="shortcut icon" href="kopierten_Link_von_favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="kopierten_Link_von_apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="Websitetitel" />