Touch Icon Generator

Datei hinzufügen

Was sind Touch-Icons?

Benutzer von iPhone oder iPad können Webseiten als Shortcut auf ihrem Homescreen ablegen. Sie können für Ihre Webseite sogenannte Touchicons definieren. Diese werden dann als Icon auf Homescreen des Benutzers angezeigt.

So sieht das Ganze aus:

touch_icon

Größen und Bildformat

Die Touch-Icons haben verschiedene Größen. Je nach der Auflösung des iOS-Gerätes. Der Generator erzeugt das Icon in allen Größen: 57x57, 72x72, 76x76, 114x114, 120x120, 144x144, 152x152 Pixel.

Erstellen Sie die Vorlage am Besten größer als die höchste Auflösung. Zudem sollte das Ausgangsbild quadratisch sein. Effekte, z.B. der Glossy-Effekt von iOS 6, werden automatisch hinzugefügt.

Einbinden in die Webseite

Mit dem folgenden HTML-Code binden Sie die Icons in Ihre Webseite ein:

<link rel="apple-touch-icon" href="57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="152.png" />
Entfernen Sie Icon-Größen, welche Sie nicht benötigen und passen Sie ggf. den Bildpfad an.

Technisches

Folgende Geräte verwenden folgende Größen:
Gerät Größe
iPhone und iPhone Touch ohne Retina 57x57 Pixel
iPad ohne Retina 72x72 Pixel (iOS 6); 76x76 Pixel (ab iOS 7)
iPhone mit Retina Display 114x144 Pixel (iOS 6); 120x120 Pixel (ab iOS 7)
iPad mit Retina 144x144 Pixel (iOS 6); 152x152 Pixel (ab iOS 7)