Bedeutung des Apple Touch Icons im Webdesign

Eingefleischte IPhone und IPad User wissen, dass sich Webseiten auf dem Home Screen speichern lassen. Standardmässig wird dann ein Screenshot der Site als Icon genommen. Auch hier gibt es aber eine Möglichkeit, dieses Icon, ähnlich wie beim Favicon Icon selber zu bestimmen.

Bsp.: Iphone

Bsp.: Ipad

Apple Touch Icon ist wichtig und wie man es installiert

Die Bedeutung eines Apple Touch Icons kurz erklärt: Ein Apple Touch Icon ist ein spezielles Icon, das auf Apple-Geräten (iPhones, iPads) angezeigt wird, wenn ein Benutzer eine Website als Lesezeichen oder als Verknüpfung auf dem Home-Bildschirm speichert. Es verbessert die Benutzererfahrung und das Branding Ihrer Website auf mobilen Apple-Geräten. Hier sind einige Gründe, warum ein Apple Touch Icon wichtig ist:

Professionelles Aussehen: Ein eigenes Icon sorgt für ein professionelles und einheitliches Erscheinungsbild, wenn Nutzer Ihre Website als Lesezeichen oder auf dem Home-Bildschirm speichern.
Wiedererkennung: Ein markenspezifisches Icon hilft Benutzern, Ihre Website leichter zu erkennen und von anderen Lesezeichen oder Verknüpfungen zu unterscheiden.
Benutzerfreundlichkeit: Ein gut gestaltetes Icon erleichtert es den Nutzern, Ihre Website schnell und einfach auf ihren mobilen Geräten zu finden und zu öffnen.

Wie man ein Apple Touch Icon erstellt und installiert

Schritt 1: Icon erstellen

1. Design: Erstellen Sie ein quadratisches Icon mit einer Größe von mindestens 180x180 Pixel. Nutzen Sie ein einfaches und klares Design, das gut skaliert und in verschiedenen Grössen gut aussieht.
2. Format: Speichern Sie das Icon im PNG-Format.

Schritt 2: Icon benennen

Benennen Sie Ihre Icon-Datei `apple-touch-icon.png`.

Schritt 3: Icon hochladen

Laden Sie die `apple-touch-icon.png` Datei in das Hauptverzeichnis Ihrer Website.

Schritt 4: HTML-Code hinzufügen

Fügen Sie den folgenden HTML-Code in den <head>-Bereich Ihrer Website ein, um das Apple Touch Icon zu verlinken:

```html
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
```

Wenn Sie verschiedene Icon-Größen für unterschiedliche Geräte bereitstellen möchten, können Sie mehrere <link>-Tags hinzufügen:

```html
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
```

Schritt 5: Testen

Testen Sie, ob das Apple Touch Icon korrekt funktioniert, indem Sie Ihre Website auf einem iOS-Gerät besuchen und die Seite zum Home-Bildschirm hinzufügen.

Beispiel für den HTML-Code eines Apple Touch Icons

Hier ist ein vollständiges Beispiel, wie der HTML-Code im `<head>`-Bereich Ihrer Website aussehen könnte:

```html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine Website</title>

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">

</head>
<body>

</body>
</html>
```

Fazit zum Icon und Kontakt für Beratung punkto Webdesign in Bern

Ein Apple Touch Icon ist ein wichtiges Element, um die Benutzerfreundlichkeit und das professionelle Erscheinungsbild Ihrer Website auf Apple-Geräten zu verbessern. Durch die Erstellung eines ansprechenden Icons und die Einbindung des entsprechenden HTML-Codes können Sie sicherstellen, dass Ihre Website auch auf mobilen Geräten optimal dargestellt wird.

Wenn Sie ein solches Icon möchten oder wir Ihnen Ihre Website für das IPhone optimieren sollen, nehmen Sie doch direkt mit unserem Entwickler Kontakt auf:

Dan Riesen, Webdesigner
Tel. direkt: 031 351 45 35
riesen[at]aloco[.]ch

Weitere Blogartikel der Agentur über Fotografie, Film, Medientraining, Webdesign und Grafik

Der Blog der Werbeagentur, Filmproduktionsfirma, Grafikatelier und Webagentur reicht bis vor das Gründungsjahr 2004 zurück und ist in folgende Kategorien gegliedert:

Das spricht für die ALOCO GmbH

hohe Qualität dank professionellen Standards
breite Fachkompetenz als Basis
effiziente Produktion = faire Preise
umfassende Beratung und Betreuung
Alles aus einer Hand

Kontakt:

Dan Aron Riesen, lic. rer. soc.
E-Mail: riesen[at]aloco[.]ch
Mobile: 079 222 78 45