Das App-Symbol erstellen (und den Startbildschirm)
Das Symbol ist das Erste, was jemand von Ihrer App sieht, und fast immer winzig klein: in der Store-Suche, auf dem Startbildschirm, in der Liste der Benachrichtigungen. Ein gutes Symbol ist in Daumennagelgröße erkennbar. Fast alles andere folgt daraus.
Dieser Ratgeber behandelt die Maße, die jeder Store verlangt, die Fehler, an denen die Einreichung scheitert, und wie Sie ein Symbol in Canva oder mit KI-Bildgenerierung machen.
Die Maße, Store für Store
| App Store | Google Play | |
|---|---|---|
| Größe | 1024 × 1024 px | 512 × 512 px im Store-Eintrag |
| Format | PNG | 32-Bit-PNG, bis 1 MB |
| Transparenz | nicht erlaubt | erlaubt, aber nicht verwenden |
| Ecken | volles Quadrat, das System rundet ab | volles Quadrat, der Store legt die Maske an |
| Schatten | nicht zeichnen | nicht zeichnen, der Store legt seinen eigenen an |
Die Faustregel: einmal in 1024 × 1024 anlegen, Hintergrund gefüllt, gerade Ecken. Aus dieser Datei entstehen alle anderen Größen.
Die häufigsten Fehler
Transparenter Hintergrund beim iPhone. Apple lehnt Symbole mit Transparenz ab. Der Hintergrund muss bis zum Rand ausgemalt sein.
Bereits abgerundete Ecken. Das System legt seine Maske über Ihre, und an den Ecken bleibt ein merkwürdiger Rand. Laden Sie das Quadrat hoch.
Kleiner Text. Ein ausgeschriebener Firmenname wird bei 60 Pixeln zum Fleck. Hängt die Marke an Text, nehmen Sie nur den Anfangsbuchstaben oder ein kurzes Kürzel.
Zu viele Details. Ein Foto, ein Verlauf mit vier Farben, drei Gegenstände. Auf dem Startbildschirm wird all das zu Rauschen. Ein Zeichen, eine Hintergrundfarbe, starker Kontrast.
Ein Symbol wie das der Konkurrenz. Wenn alle Pizzerien der Stadt ein orangefarbenes Pizzastück verwenden, verschwindet Ihr orangefarbenes Stück in der Liste. Manchmal fällt der Anfangsbuchstabe der Marke auf der Markenfarbe mehr auf als die naheliegende Zeichnung.
Das adaptive Symbol bei Android
Unter Android ist das Symbol auf dem Gerät adaptiv: es besteht aus zwei Ebenen, einem Hintergrund und einer Zeichnung davor, und jeder Hersteller schneidet es in einer anderen Form zu. Auf einem Handy wird es ein Kreis, auf einem anderen ein Quadrat mit runden Ecken, auf einem dritten ein Tropfen.
Was das von Ihnen verlangt:
- halten Sie die Zeichnung in der sicheren Zone, einem Kreis in der Mitte mit etwa zwei Dritteln der Gesamtbreite. Was außerhalb liegt, kann abgeschnitten werden;
- lassen Sie Luft: ein Zeichen, das am Rand anliegt, verliert beim Zuschnitt als Erstes ein Stück;
- der Hintergrund sollte eine glatte Farbe oder ein einfaches Muster sein, denn er kann sich bei Systemanimationen etwas bewegen.
Ein schneller Test: zeichnen Sie einen Kreis mit 66 % der Breite in die Mitte Ihres Symbols. Passt das ganze Zeichen hinein, übersteht es jeden Zuschnitt.
Lesbarkeitstest in 30 Sekunden
Verkleinern Sie das Symbol vor dem Einreichen auf 48 × 48 Pixel und betrachten Sie es aus der Entfernung. Legen Sie es danach neben Screenshots vom Startbildschirm eines iPhones und eines Android-Geräts mit anderen Apps.
Erkennen Sie die Marke noch, ist es gut. Müssen Sie die Augen zusammenkneifen, vereinfachen Sie.
So geht es in Canva
- Legen Sie ein Design an mit benutzerdefinierter Größe von 1024 × 1024 px;
- Füllen Sie den ganzen Hintergrund mit der Hauptfarbe der Marke;
- Setzen Sie das Zeichen oder den Anfangsbuchstaben in die Mitte, mit etwa 60 % der Fläche, um die sichere Zone von Android einzuhalten;
- Verwenden Sie höchstens zwei Farben zusätzlich zum Hintergrund;
- Laden Sie es als PNG herunter. Der transparente Hintergrund ist eine Funktion des Bezahltarifs von Canva, und für das Symbol wollen Sie keine Transparenz, also passt das Standard-PNG.
Für das Symbol bei Google Play laden Sie dieselbe Datei noch einmal herunter und verkleinern sie auf 512 × 512, oder Sie überlassen das dem Veröffentlichungswerkzeug.
So geht es mit KI-Bildgenerierung
Bildgeneratoren sind gut, um eine Idee zu finden, und schlecht darin, die fertige Datei zu liefern. Der Weg, der funktioniert:
- Verlangen Sie das Konzept, nicht das fertige Symbol. Etwa „minimalistisches App-Symbol, ein stilisierter Kamm, dicker Strich, glatter weinroter Hintergrund, ohne Text, Flat-Stil“. Das „ohne Text“ ist wichtig, denn erzeugte Buchstaben kommen meist falsch heraus;
- Erzeugen Sie mehrere Varianten und wählen Sie die einfachste, nicht die, die in groß am schönsten ist;
- Bringen Sie sie nach Canva und machen Sie den Feinschliff neu: zentrieren, die Hintergrundfarbe auf die genaue Markenfarbe setzen, die sichere Zone prüfen;
- Prüfen Sie, dass es nicht der Marke eines anderen Unternehmens ähnelt. Ein erzeugtes Bild kann einem bestehenden Logo zu sehr gleichen, und ein Symbol, das dem einer anderen App ähnelt, ist ein Ablehnungsgrund und ein rechtliches Problem.
Der Startbildschirm
Das ist das Bild, das zwischen dem Tippen auf das Symbol und der fertigen App erscheint. Es ist nur kurz zu sehen, aber bei jedem Öffnen.
Verwenden Sie die Marke in der Mitte, auf einer glatten Farbe. Android baut den Startbildschirm seit Version 12 genau so auf: ein zentriertes Symbol auf einer Hintergrundfarbe. Apple empfiehlt, dass dieser Bildschirm zurückhaltend ist und dem ersten Bildschirm der App ähnelt.
Kein bildschirmfüllendes Foto. Jedes Gerät hat ein anderes Seitenverhältnis, und das Foto wird auf jedem anders zugeschnitten. Was auf einem in der Mitte liegt, wird auf dem anderen zum Rand.
Kein Werbetext. Niemand liest ihn, und auf schnellen Geräten verschwindet der Bildschirm vorher.
Wo das bei Fabapp hingehört
Bei Fabapp liegen Symbol und Startbildschirm im Reiter App, im Schritt Marke der Einrichtung der nativen App (verfügbar ab dem Builder-Tarif). Was die Plattform verlangt:
- Symbol: quadratisches PNG mit 1024 × 1024, Hintergrund gefüllt und ohne abgerundete Ecken. Wenn Sie keines hochladen, erzeugt die Plattform eines mit dem Anfangsbuchstaben der App auf Ihrer Markenfarbe;
- Startbildschirm: PNG mit der Marke in der Mitte und transparentem Hintergrund, denn die Farbe, die Sie wählen, füllt den Rest des Bildschirms.
Beachten Sie den Unterschied: das Symbol hat einen Hintergrund, der Startbildschirm keinen. Das ist die häufigste Verwechslung, und deshalb lohnt es sich, in Canva zwei getrennte Dateien anzulegen. Danach erzeugt die Plattform die Größen für jedes System. Die Anleitung steht im Ratgeber Die App in den Stores veröffentlichen.
Die Zusammenfassung
- in 1024 × 1024 anlegen, PNG, Hintergrund gefüllt und gerade Ecken;
- Apple lehnt Transparenz ab; das System rundet die Ecken selbst ab;
- bei Android bleibt die Zeichnung im mittleren Kreis von zwei Dritteln;
- ein Zeichen, wenige Farben, kein kleiner Text, und Test bei 48 Pixeln;
- der Startbildschirm ist die Marke in der Mitte auf einer Farbe, nie ein bildschirmfüllendes Foto.
Eine fertige Anfrage für Ihre eigene App
Erstelle eine App für einen Friseursalon mit drei Fachkräften. Jede Fachkraft hat Arbeitszeiten pro Wochentag, freie Tage und ihre eigene Liste von Leistungen mit Dauer und Preis; die Kundin wählt die Leistung, die Fachkraft und einen freien Termin und erhält eine Bestätigung per E-Mail und am Vortag eine Erinnerung; der Kalender verhindert zwei Termine zur selben Zeit; eine Galerie mit Arbeiten und Fotos je Leistung; jede Fachkraft meldet sich mit ihrem eigenen Konto an, sieht nur ihren eigenen Tageskalender und markiert Termine als wahrgenommen oder nicht erschienen; jede Kundin hat eine Karteikarte mit Verlauf; und ich sehe ein Dashboard mit Umsatz pro Fachkraft und pro Monat und der Ausfallquote.
Kostenlos starten. Die erste Version ist in wenigen Minuten da, und Sie passen sie im Chat an.