Apple Touch Icon auf der eigenen Webseite einbinden (iPhone, iPad)

Webseiten lassen sich auf dem Home-Screen des iPhones oder iPads ablegen. Man kann so immer schnell seine Lieblings-Webseiten öffnen. Standardmäßig wird nur ein verkleinerter Screenshot der Webseite als Icon angezeigt. Schöner wäre es doch wenn die Webseite extra ein kleines Apple Touch Icon anbieten würde. Mit Hilfe eines Apple Touch Icons wird dies möglich ein Logo oder ein Symbol zu verwenden.

Blog Apple Touch Icon auf der eigenen Webseite einbinden iPhone iPad

Apple Touch Icon erstellen

Ein Icon lässt sich ganz leicht selbst erstellen. Es wird dazu nur ein PNG-Bild benötigt. Den Glanz-Effekt und die abgerundeten Ecken müssen sich sich nicht kümmern, das macht Apple automatisch. Das Bild laden Sie in den Ordner der Webseite hoch. Merken sich die URL-Pfad des Bildes.

Apple Touch Icon – Code auf der Webseite einbinden

Nehmen beziehungsweise erstellen Sie eine Grafik.
1. Für ein iPhone mit Retina Display hat das Bild optimalerweise die Größe 180×180 Pixel.
2. Für ein iPad mit Retina Display wird ein Bild mit der Größe 167×167 Pixel benötigt.
Anschließend speichern Sie die Datei unter apple-touch-icon.png ab.
Schließlich laden Sie die Datei in das Root-Verzeichnis der Webseite.

Es wird automatisch erkannt, das ein Icon vorhanden ist und dieses verwendet. Sie können aber auch auf Nummer sicher gehen und die Grafik im <head> Tag Ihrer HTML-Datei einbinden.

<link rel="apple-touch-icon" href="http://deinedomain.de/apple-touch-icon.png"/>

Um mehrere Symbole für verschiedene Geräteauflösungen (zum Beispiel für iPhone und iPad) festzulegen fügen Sie jedem Link-Element ein Größenattribut hinzu:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">

Icon ohne abgerundete Ecken und ohne Glanzeffekt

Sind zum Beispiel kein Glanzeffekt und keine abgerundeten Ecken gewünscht, muss es folgender Code sein.

<link rel="apple-touch-icon" href="http://deinedomain.de/apple-touch-icon-precomposed.png"/>

In WordPress

Wird WordPress verwendet können Sie hingegen diesen Code im <head> Tag in der header.php Ihres Themes einfügen. Die Grafik dafür liegt im Hauptverzeichnis des Themes.

<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon.png"/>

Safari-Interface ausblenden – Webseite als App auf dem iPhone, iPad

Auf iOS haben sie die Möglichkeit den Standalone-Modus zu verwenden, damit die Seite wie eine native Anwendung aussieht. Wenn Sie diesen Modus verwenden, wird Safari nicht verwendet, um den Web-Content anzuzeigen. Es gibt weder das Browser-URL-Textfeld noch die Schaltflächenleiste am unteren Rand des Bildschirms. Es erscheint nur eine Statusleiste am oberen Rand des Bildschirms.

Hier sehen Sie ein Beispiel für einen HTML5 <head> Tag einer Web App:

<!DOCTYPE html>
<html lang = "de-DE">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Meine WebApp</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <link rel="apple-touch-startup-image" href="pic/ios_startup.png"> 
</head>

Vor allem folgende zwei Zeilen Code sind für das App-Verhalten notwendig.

<meta name="apple-mobile-web-app-capable" content="yes" />

<link rel="apple-touch-startup-image" href="pic/ios_startup.png">

Die erste Zeile ist dafür zuständig, dass die Webseite, wenn sie auf dem Homescreen abgelegt wird, vom iPhone/iPad als Web App behandelt wird. Sie setzen das apple-mobile-web-app-capable Meta Tag auf Ja, um den Standalone-Modus zu aktivieren.

Dazu kommt noch die zweite Zeile. Hier wird der Pfad zum Start Bild hinterlegt. Startet man nun die Web App auf dem iPhone/iPad über den Homescreen, kann es natürlich vorkommen, dass die Website kurz benötigt, bis diese geladen wurde. Um in dieser Zeit keinen weißen Bildschirm zu sehen, bietet Apple beispielsweise die Möglichkeit an, in diesem Zeitraum ein Bild anzuzeigen.

WordPress Website als Web App

Für WordPress bietet sich für die Darstellung der Website als Web App zum Beispiel das Plugin Web App an. Dieses muss man nur installieren und aktivieren.

Hinweis:

Weitere Infos zum dazu finden Sie unter Apple iOS Developer.

Zurück