Apple Touch Icon in Shopify integrieren

Was das Apple Touch Icon ist

Wenn ein iOS Nutzer eine Shopify Seite über den Share Button zum Homescreen hinzufügt, lädt iOS ein 180 mal 180 Pixel großes Icon. Ohne explizit gesetztes Apple Touch Icon nimmt iOS einen Screenshot der Seite, was meistens nicht gut aussieht.

Schritt eins: Asset hochladen

Eine 180 mal 180 PNG Datei in die Shopify Files hochladen. Wichtig: Das Icon muss einen einfarbigen Hintergrund haben und nicht transparent sein, da iOS sonst eine dunkle Maske dahinterlegt.

Schritt zwei: Layout Theme Liquid anpassen

Im theme.liquid im Head Bereich folgendes Tag einfügen:

<link rel="apple-touch-icon" sizes="180x180" href="{{ 'apple-touch-icon.png' | asset_url }}">

Falls die Datei in den Files liegt statt im Asset Folder, stattdessen file_url nutzen.

Schritt drei: Verifizieren

Die Seite auf einem iPhone öffnen, auf Teilen tippen, dann auf Zum Home Bildschirm. Das Icon sollte sofort korrekt erscheinen.