Webdesignerin

Webdesignerin

Dipl. Wi. Infrom. Susanne Wollatz

Touch-Icon

Ein Touch Icon ist ein kleines Symbol, das auf Smartphones und Tablets erscheint, wenn Nutzer Ihre Website als Shortcut auf dem Startbildschirm speichern. Es funktioniert wie ein App-Icon für Ihre Website und sorgt dafür, dass sie sofort erkennbar ist.

Ein Touch Icon, oft auch Apple Touch Icon genannt, wird im HTML Ihrer Website eingebunden, zum Beispiel:

<link rel=„apple-touch-icon“ sizes=„180×180“ href=„/touch-icon.png“>
Touch-Icon ELBBYTE

Wichtige Punkte:

  • Funktion:
    Es ersetzt den generischen Screenshot oder Standard-Icon, wenn Ihre Website als Shortcut auf iOS- oder Android-Geräten gespeichert wird.

  • Format und Größe:
    Empfohlen ist ein quadratisches PNG (z. B. 180×180 px). Apple akzeptiert keine Transparenz. Für unterschiedliche Geräte sollte man mehrere Größen bereitstellen, z. B. 120×120, 152×152 und 180×180 Pixel.

  • Android & Web Apps:
    Auch Android unterstützt Touch Icons über <link rel="icon" sizes="192x192">.
    Für Progressive Web Apps (PWA) werden Icons zusätzlich im Web App Manifest definiert.

  • User Experience:
    Ein gut gestaltetes Touch Icon verbessert die Nutzererfahrung, weil Ihre Website auf dem Homescreen sofort erkennbar ist.

  • Branding & SEO:
    Obwohl Touch Icons keinen direkten Einfluss auf Suchmaschinen-Rankings haben, stärken sie das Markenbild und erhöhen die Wahrscheinlichkeit, dass Nutzer Ihre Website häufiger nutzen.

Tipp:
Achten Sie darauf, dass Ihr Icon schlicht, gut erkennbar und auch bei kleinen Größen klar bleibt. Ein markantes Logo oder Symbol funktioniert am besten.