App-Icons erstellen – Tipps und Templates

Vorlage_Titelbild_1024x460

Das App-Icon ist das Gesicht jeder App, darum möchten wir Euch in diesem Beitrag zeigen, wie Ihr App-Icons in einer Web-App und einer hybriden App hinzufügen könnt. Zusätzlich dazu findet Ihr im Beitrag direkt ein Template, mit dem Ihr in kürzester Zeit selbst euer App-Icon erstellen könnt.

Web-App

Ein App-Icon in einer Web-App hinzuzufügen ist denkbar einfach. Hierfür müsst Ihr lediglich ein Icon in der Größe 57px x 57px erstellen und wie folgt im <head>-Bereich der Anwendung hinzufügen.

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

Schon wird das App-Icon angezeigt, sobald man die Anwendung zum Home-Bildschirm hinzufügt.

Screenshot App Icon

Hybride App

Als hybride App wird hier eine App verstanden, die mithilfe von PhoneGap in den verschiedenen App Stores bereitgestellt wird.

Um eine App mit PhoneGap in den Stores bereitzustellen, wird eine Konfigurationsdatei benötigt – die config.xml. Diese gibt es als fertiges Template auf GitHub . In dieser Konfigurationsdatei werden neben allerhand verschiedener Einstellungen auch die App-Icons referenziert. Da es ja mittlerweile zig tausend verschiedene mobile Endgeräte gibt, variieren dementsprechend auch die Größen der App-Icons. In den folgenden Abschnitten werden die benötigten Größen der verschiedenen Betriebssysteme aufgelistet und dazu (wenn möglich) kurz die Verwendung definiert.

iOS

Größe (px) Verwendung
29 x 29 iPhone Spotlight
48 x 48 iPad Spotlight
57 x 57 iPhone
58 x 58 iPhone 4 Spotlight
64 x 64 Document Icon
72 x 72 iPad
114 x 114 iPhone Retina
144 x 114 iPad Retina
320 x 320 Document Icon
1024 x 1024 iTunes

Quelle: PhoneGap [1]  | PhoneGap [2] | Apple

Android

Name Größe (px)
ldpi 36 x 36
mdpi 48 x 48
hdpi 72 x 72
xhdpi 96 x96
xxhdpi 144 x 144
xxxhdpi 192 x 192
 – 512 x 512

Quelle: Android | PhoneGap [1]

Windows Phone

Name Größe (px)
57 x 57 kleines App-Icon
72 x 72 größeres App-Icon

PhoneGap [2]

Template

Die folgende Datei enthält Templates sowohl für die Web-App als auch für die hybride App. Wir haben uns für Vektorgrafiken entschieden, da wir dieses Format für Icons für sinnvoller halten. Ob Ihr die Icons als Vektor- oder Pixelgrafiken erstellt, obliegt Euch selbst.

Als weiteren Punkt zu den Templates wollten wir hier noch anmerken, dass die App-Icons im Template nicht abgerundet sind. iOS beispielsweise rundet die Icons selbst an den Ecken ab. Je nach dem können außerdem verschiedene App-Icons verwendet werden, da Android z.B. transparente Icons zulässt. Hier müsst Ihr selbst bestimmen, wie diese aussehen sollen – das Template dient nur als Vorschlag. Weitere Informationen hierzu findet Ihr unter folgenden Links: iOS , Android  und Windows Phone .

Download

 

Quelle: PhoneGap [1] | PhoneGap [2] | Apple | Android

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.