Ein Website-Symbol auf iOS-Geräten hinzufügen

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

Zuletzt aktualisiert: 20. Januar 2025

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.

So erlangst du Zugriff auf diese Funktion

Die Lösung in dieser Anleitung beinhalten das Einfügen von Code, das für die Abos Core, Plus, Erweitert, Business, E-Commerce Basis und E-Commerce Erweitert verfügbar ist. Weitere Informationen findest du unter Das richtige Squarespace-Abonnement auswählen.

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.

text-link.png

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.

file-link.png

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
file_URL.png

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.

code_injection_panel.png

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:

KB Guide Image

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:

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.