Erstelle ein Apple Touch Icon, damit iOS-Benutzer deine Website auf dem Startbildschirm ihres Geräts mit einem Lesezeichen versehen können.

Wenn du ein Apple Touch Icon erstellst, können Besucher auf ihren iOS-Geräten (iPhone, iPad oder iPod) ein Lesezeichen für deine Website setzen. Das Lesezeichen ist ein Symbol, das gemeinsam mit anderen Apps oder Lesezeichen auf dem Startbildschirm angezeigt wird.

Um die Bildrichtlinien für diese Symbole von Apple zu überprüfen, besuche die Seite mit den Bildrichtlinien.

Die in dieser Anleitung beschriebene Lösung umfasst „Code einfügen“. Dabei handelt es sich um eine Premium-Funktion, die im Rahmen des Business- und E-Commerce-Abos verfügbar ist.

Schritt 1 – Das Symbol-Bild hochladen

Erstelle das Symbol für die Website. Das Symbol muss eine PNG-Datei sein und darf nicht transparent sein. Wir empfehlen, dasselbe Design wie dein Favicon oder dein Website-Logo zu verwenden, um ein einheitliches Erscheinungsbild zu erzielen.

Wenn du das Bild erstellt hast, öffne den Seiten-Editor für eine beliebige Layout-Seite auf deiner Website und gib den gewünschten Text ein, der als Link dienen soll. Markiere den Text und klicke auf das Link-Symbol, das sich in der Text-Werkzeugleiste befindet.

Der Link-Editor wird geöffnet. Klicke auf den Dateien-Tab und dann auf Datei hinzufügen, um deine Bilddatei für das Touch-Symbol hochzuladen. Klicke auf Link hinzufügen, um den Link einzufügen.

Schritt 2 – Die URL des Symbol-Bilds kopieren

Klicke erneut auf den verlinkten Text und kopiere die Datei-URL. Die Datei-URL sieht folgendermaßen aus:

/s/file-name.extension

Schritt 3 – „Code einfügen“ hinzufügen

Öffne das Menü „Code einfügen“.

Kopiere den folgenden Code und füge ihn in das Feld Code in den Header einfügen ein:

<link rel="apple-touch-icon" href="/s/file-name.extension">

Ersetze /s/file-name.extension durch die URL, die du für deine Symboldatei kopiert hast.

Klicken Sie auf Speichern.

Schritt 4 – Dein Touch-Symbol ansehen

Besuche deine Website mit deinem iOS-Gerät. Verwende die Option Teilen, um die Website zu deinem Startbildschirm hinzuzufügen. Es sieht ungefähr so aus:

Hinweis: Diese code-basierte Anpassung übersteigt die Zuständigkeit des Squarespace-Supports. Wir empfehlen dir nachdrücklich, nur dann Code zu „Code einfügen“ hinzuzufügen, wenn du über Programmierkenntnisse verfügst. Wir können dir zu diesem Thema leider keine weitere Hilfestellung anbieten, aber es gibt viele Ressourcen, die dir weiterhelfen können:

• Hilfe zu Apple Touch-Symbolen findest du auf der Entwickler-Website von Apple.
• Besuchen Sie das Squarespace-Forum, unser Kunden- und Entwicklerforum.
• Mach dich mit den bewährten Verfahrensweisen zum Hinzufügen von benutzerdefiniertem Code vertraut.
• Lies unsere allgemeine Anleitung für codebasierte Anpassungen.
• Beauftrage einen Squarespace-Experten, um benutzerdefinierten Code für deine Website zu erstellen.