Zum Inhalt springen
WebViewGold Vibe Coding in den App Store
Deutsch
WebViewGold holen

ChatGPT & Codex

App-Icon und Splash-Screen mit ChatGPT generieren: Prompts, Store-Regeln und wo die Dateien in WebViewGold hingehören

Mit der Bildgenerierung von ChatGPT bekommt eine Vibe-Coding-App an einem Abend ein echtes Icon. Bei der Datei sind die Stores allerdings streng: ein deckendes 1024-px-Quadrat für iOS, ein 512-px-Icon für den Store-Eintrag und adaptive Ebenen für Android, und nichts, was sich bei der Marke eines anderen bedient. Hier sind die Prompts, die Regeln und ein Skript, das aus einem Bild jede Datei macht, die WebViewGold braucht.

Ab $109 einmalig pro Plattform, oder unser Team erledigt alles ab $698.

  • Genehmigungsgarantie – oder Geld zurück innerhalb von 14 Tagen
  • Kein Programmieren nötig
  • Einmalzahlung, kostenlose Updates
  • 24/7 Support von echten Menschen
  • Made in Germany seit 2014 · ISO 27001

Was ChatGPT hier gut kann und was du selbst fertig machst

Die Bildgenerierung von ChatGPT erledigt den kreativen Teil gut: Sie macht aus einem Einzeiler flache, kräftige Symbole, hält sich an Farbvorgaben und lässt dich in normaler Sprache nachbessern ("dickere Linie, weniger Details, etwas nach oben"). Du kannst auch dein bestehendes Logo hochladen und um eine Icon-Version davon bitten.

Beim Dateiteil ist sie unzuverlässig: exakte Pixelmaße, ein echter Alphakanal, wenn du einen brauchst (manchmal malt sie ein Schachbrettmuster statt Transparenz), scharfer kleiner Text und das identische Symbol über zwei Generierungen hinweg. Behandle das, was ChatGPT dir liefert, also als Artwork: Wähle ein Ergebnis aus, speichere es und erzeuge jede Store-Datei aus genau dieser einen Datei, mit einem Bildeditor, dem Skript unten oder dem Cloud Builder. Die komplette Spezifikationstabelle steht im Guide zu App-Icon und Splash-Screen; diese Seite behandelt, worauf es bei KI-generiertem Artwork ankommt.

Die Regeln, die deine Dateien erfüllen müssen

AssetRegelWo es in WebViewGold hingehört
iOS-App-Icon1024 × 1024 px PNG, deckend (kein Alphakanal), eckige Ecken, weil iOS die Maske selbst anwendet, sRGB. Ein Icon mit Alphakanal wird beim Upload mit ITMS-90717 abgelehntXcode: WebViewGold → General → App Icons and Launch Screen → App Icon Source (das AppIcon-Set); siehe die iOS-Docs zum Icon
Icon für den Google-Play-Eintrag512 × 512 px, 32-Bit-PNG, sRGB, bis 1024 KB, ein volles Quadrat ohne abgerundete Ecken oder Schlagschatten (Play fügt beides hinzu). Kein Text und keine Badges, die Rankings, Angebote oder Play-Programme suggerierenPlay Console → Store-Eintrag (nicht im Projekt)
Android-Launcher-Iconsic_launcher.png, ic_launcher_round.png und ic_launcher_foreground.png in jedem mipmap-*-DichteordnerAndroid-Studio-Projekt; siehe die Android-Docs zum Icon
Vordergrund des adaptiven IconsEine 108-dp-Fläche; Launcher schneiden auf Kreise, Squircles oder Quadrate zu, also halte das Symbol im zentralen Kreis von 66 dp, mit Transparenz drumherumic_launcher_foreground.png in jedem mipmap-Ordner
Splash-BildEin quadratisches GIF (zum Beispiel 512 oder 1024 px), statisch oder animiert; die Hintergrundfarbe wird separat gesetztiOS: splash.gif im Hauptordner des Xcode-Projekts, Farbe über splashscreencolor in Config.swift. Android: die mitgelieferten splash.gif-Dateien, Farbe in colors.xml (Android-Docs zum Splash-Screen)

Prompt 1: erst die Idee in Worten festlegen

Jede Bildgenerierung braucht Zeit und ändert Details. Kläre das Konzept im Text, dann generiere.

In ChatGPT einfügen (nur Text, noch kein Bild)
Ich brauche ein App-Icon für [APP-NAME], eine [Beschreibung in einem Satz] für [Zielgruppe]. Markenfarben: [#HEX, #HEX].

Schlag fünf Icon-Konzepte vor. Gib für jedes an:
- das eine Symbol (ein Objekt oder eine Form; keine Buchstaben, außer einer einzigen kräftigen Initiale),
- die Hintergrundfarbe,
- warum es bei 60 x 60 Pixeln erkennbar bleibt,
- ein Risiko (zu nah an einer bekannten Marke, zu detailliert, zu generisch).

Schlag keine Store-Badges, Geräterahmen, Slogans oder irgendetwas vor, das den Logos oder Maskottchen von Apple, Google, OpenAI oder anderen Unternehmen ähnelt. Empfiehl dann in zwei Sätzen ein Konzept.

Mit einer gut optimierten Version Ihrer Web-App können Sie innerhalb von wenigen Minuten eine beeindruckende mobile App erstellen. Zusätzlich dazu ist der Kundenservice sehr nett und hilfsbereit! Ich kann WebViewGold nur empfehlen :-)

Julian Koch · Mitbegründer von DuelDonkey · CodeCanyon

Prompt 2: das Master-Icon

Bitte um ein quadratisches Bild. Generiere zwei oder drei Varianten, wähle eine aus und lade sie sofort herunter; die nächste Generierung wird nicht identisch sein.

In ChatGPT einfügen, um das Bild zu generieren
Erstelle ein quadratisches (1:1) App-Icon-Bild für [APP-NAME] auf Basis von Konzept [N]: [das Symbol].

Stil: flache Vektorgrafik, kräftige einfache Formen, zwei oder drei Farben, hoher Kontrast. Kein Fotorealismus, keine glänzenden 3D-Effekte.
Komposition: ein Symbol, zentriert, das etwa 55 bis 60 Prozent der Fläche ausfüllt, mit gleichmäßigem Rand auf allen Seiten.
Hintergrund: einfarbig [#HEX] bis an alle vier Kanten. Kein Rand, kein Rahmen, keine abgerundeten Ecken, kein Schlagschatten, keine Vignette.
Nicht enthalten: Text, Buchstaben, Zahlen, Wasserzeichen, Geräte-Mockups, Store-Badges oder ein bestehendes Firmenlogo oder Maskottchen.
Das Symbol muss bei 60 x 60 Pixeln erkennbar bleiben.

Prompt 3: das Symbol allein, für das adaptive Icon und den Splash

Das adaptive Icon von Android und der Splash-Screen von WebViewGold funktionieren am besten mit dem Symbol allein. Frag im selben Gespräch, damit ChatGPT die Formen wiederverwendet, und prüfe, ob das Ergebnis echte Transparenz hat oder ein gemaltes Schachbrettmuster.

Im selben Chat, nachdem du das Master gewählt hast
Erstelle mit genau demselben Symbol wie im Icon, das ich gewählt habe (gleiche Formen, Proportionen und Farben), ein quadratisches Bild, das nur das Symbol zeigt, zentriert, auf transparentem Hintergrund.

Falls du keine echte Transparenz erzeugen kannst, nimm stattdessen einen flachen, reinen Magenta-Hintergrund (#FF00FF), eine Farbe, die nirgends im Symbol vorkommt, ohne Schatten oder Leuchten. Kein Text, kein Rand, kein Rahmen.

Von der Idee zu fertigen Dateien

  1. Briefing und Konzept

    Führe Prompt 1 mit deinen echten Farben und deiner Zielgruppe aus. Wähle ein Konzept, das einfach genug ist, um es aus dem Gedächtnis zu skizzieren.

  2. Generieren und ein Master wählen

    Führe Prompt 2 aus, vergleiche die Varianten in Miniaturgröße (zoom deinen Bildschirm heraus) und lade den Gewinner als PNG herunter.

  3. Die Datei prüfen

    Quadratisch? Mindestens 1024 px? Einfarbiger Hintergrund bis an jede Kante? Auf einem Mac beantwortet sips -g pixelWidth -g pixelHeight -g hasAlpha master.png alle drei Fragen; jeder Bildeditor kann das auch.

  4. Die Version nur mit Symbol erstellen

    Führe Prompt 3 aus. Kam das Ergebnis auf Magenta zurück, entferne den Hintergrund in einem Editor (Sofort-Alpha in der Vorschau, Photoshop, Figma, Canva) und exportiere ein PNG mit Transparenz.

  5. Die Größen erzeugen

    Führe das Skript unten aus, nutze einen Icon-Generator oder lade nur das 1024-px-Master in den Cloud Builder hoch, der jede iOS- und Android-Größe für dich erzeugt.

  6. Die Dateien platzieren

    iOS: Ersetze die Bilder im AppIcon-Set. Android: Ersetze die drei PNGs in jedem mipmap-Ordner einzeln und behalte Namen und Ordner bei. Dann der Splash: Ersetze splash.gif, setze die Splash-Farbe und stelle auf iOS den Hintergrund des LaunchScreen-Storyboards auf dieselbe Farbe, damit der Start nicht weiß aufblitzt.

  7. Auf echten Geräten prüfen

    Home-Bildschirm, Spotlight und Einstellungen auf iOS (ab iOS 18 auch im dunklen und getönten Modus) und ein Launcher mit runden Icons auf Android. Verschwindet das Symbol in kleiner Größe, korrigiere das Artwork, nicht die Datei.

Ein Bild rein, jede Datei raus

Dieses Python-3-Skript (braucht Pillow) nimmt das Master und optional das PNG nur mit Symbol. Es schreibt ein deckendes 1024-px-iOS-Icon, das 512-px-Play-Icon, die drei Launcher-PNGs für jede Android-Dichte mit dem Symbol in der sicheren Zone des adaptiven Icons und ein quadratisches splash.gif. Führe es lokal aus, oder lade das Skript und deine Bilder in ChatGPT hoch und bitte es, sie auszuführen, falls Codeausführung in deinem Plan verfügbar ist.

python
#!/usr/bin/env python3
"""Turn one AI-generated master icon into the files a WebViewGold project needs.

Usage:
  python3 make_store_icons.py master.png --bg "#0F766E"
  python3 make_store_icons.py master.png --fg symbol.png --bg "#0F766E"

master.png  square artwork with a solid, full-bleed background
--fg        optional: the symbol alone on a transparent background (better adaptive icon)
--bg        the background color of your icon; reuse it as the splash screen color
Requires Pillow: pip install Pillow
"""
import argparse
import math
from pathlib import Path
from PIL import Image, ImageDraw

DENSITIES = {"mdpi": 1, "hdpi": 1.5, "xhdpi": 2, "xxhdpi": 3, "xxxhdpi": 4}
OUT = Path("store-icons")


def flatten(img, bg):
    """Composite on a solid color and drop the alpha channel (App Store requirement)."""
    img = img.convert("RGBA")
    base = Image.new("RGBA", img.size, bg)
    base.alpha_composite(img)
    return base.convert("RGB")


def square(img):
    w, h = img.size
    if w != h:
        print(f"warning: master is {w}x{h}, cropping to a centered square")
        s = min(w, h)
        img = img.crop(((w - s) // 2, (h - s) // 2, (w + s) // 2, (h + s) // 2))
    return img


def save(img, path):
    path.parent.mkdir(parents=True, exist_ok=True)
    img.save(path)
    print("wrote", path, img.size, img.mode)


def adaptive_foreground(symbol, px):
    """108 dp canvas; the bounding box of the symbol must fit the 66 dp safe circle."""
    canvas = Image.new("RGBA", (px, px), (0, 0, 0, 0))
    sym = symbol.convert("RGBA")
    sym = sym.crop(sym.getbbox() or (0, 0, sym.width, sym.height))
    scale = (px * 66 / 108) / math.hypot(sym.width, sym.height)
    sym = sym.resize((max(1, round(sym.width * scale)), max(1, round(sym.height * scale))), Image.LANCZOS)
    canvas.alpha_composite(sym, ((px - sym.width) // 2, (px - sym.height) // 2))
    return canvas


def main():
    ap = argparse.ArgumentParser()
    ap.add_argument("master")
    ap.add_argument("--fg", help="symbol on a transparent background")
    ap.add_argument("--bg", default="#FFFFFF")
    a = ap.parse_args()

    master = flatten(square(Image.open(a.master)), a.bg)
    if master.width < 1024:
        print(f"warning: master is only {master.width}px; the App Store needs 1024x1024")

    # iOS: one opaque 1024 px PNG for the AppIcon set
    save(master.resize((1024, 1024), Image.LANCZOS), OUT / "ios" / "AppIcon-1024.png")
    # Google Play listing icon: uploaded in the Play Console, not in the project
    save(master.resize((512, 512), Image.LANCZOS), OUT / "play" / "play-icon-512.png")

    symbol = Image.open(a.fg) if a.fg else None
    for name, f in DENSITIES.items():
        folder = OUT / "android" / f"mipmap-{name}"
        legacy = round(48 * f)
        icon = master.resize((legacy, legacy), Image.LANCZOS)
        save(icon, folder / "ic_launcher.png")
        mask = Image.new("L", (legacy, legacy), 0)
        ImageDraw.Draw(mask).ellipse((0, 0, legacy - 1, legacy - 1), fill=255)
        rnd = icon.convert("RGBA")
        rnd.putalpha(mask)
        save(rnd, folder / "ic_launcher_round.png")
        fg_px = round(108 * f)
        fg = adaptive_foreground(symbol, fg_px) if symbol else master.resize((fg_px, fg_px), Image.LANCZOS)
        save(fg, folder / "ic_launcher_foreground.png")

    # Splash: square GIF with the symbol on your splash background color
    if symbol:
        splash = Image.new("RGB", (1024, 1024), a.bg)
        s = adaptive_foreground(symbol, 1024)
        splash.paste(s, (0, 0), s)
    else:
        splash = master.resize((1024, 1024), Image.LANCZOS)
    save(splash.convert("P", palette=Image.ADAPTIVE), OUT / "splash" / "splash.gif")


if __name__ == "__main__":
    main()

Fehler, die einen Upload oder ein Review kosten

  • Ein gemaltes Schachbrettmuster statt Transparenz. Im Chat sieht es transparent aus, und auf dem Home-Bildschirm landet ein graues Raster.
  • Abgerundete Ecken oder ein Schlagschatten im Bild. iOS und Google Play fügen ihre eigenen hinzu, und du bekommst eine doppelte Kante.
  • Feine Details und Verläufe, die verschwimmen. Icons werden bei etwa 60 px gesehen; flache Formen gewinnen.
  • Ein Symbol, das die Ränder des Android-Vordergrunds berührt. Runde Launcher schneiden es ab; halte es in der sicheren Zone.
  • Ein anderes Icon im Store als auf dem Gerät. Generiere einmal und leite jede Datei aus demselben Master ab.
  • Ein Splash, der nicht quadratisch ist, oder ein animiertes GIF, das länger läuft als die Splash-Zeit, sodass Nutzer es abgeschnitten sehen.
  • Das Platzhalter-Icon von WebViewGold, das in einem Dichteordner übrig bleibt, weil ein Ersatz vergessen wurde.

Häufig gestellte Fragen

Darf ich ein mit ChatGPT erstelltes Icon in einer kommerziellen App verwenden?

Die Nutzungsbedingungen von OpenAI übertragen dir die Rechte an den Bildern, die du erstellst, die kommerzielle Nutzung ist also erlaubt. Das garantiert aber nicht, dass das Design frei von Marken Dritter ist, also mach den oben beschriebenen Ähnlichkeitscheck.

Lehnen Apple oder Google ein KI-generiertes Icon ab?

Es gibt keine Regel gegen KI-generiertes Artwork. Es gelten dieselben Regeln wie für jedes Icon: das richtige Format, keine irreführenden oder rechtsverletzenden Inhalte und ein Icon, das zur App passt.

Muss das Bild genau 1024 x 1024 Pixel groß sein?

Die iOS-Icon-Datei schon. Liefert ChatGPT eine andere Größe, skaliere das gewählte Bild (das Skript erledigt das), statt neu zu generieren und ein anderes Design zu bekommen.

Brauche ich dunkle, getönte oder Liquid-Glass-Versionen für iOS?

Sie sind optional. WebViewGold nutzt das Standard-AppIcon-Set, und aktuelle iOS-Versionen arbeiten mit diesem Icon. Mit Apples Icon Composer kannst du Icons in Ebenen mit zusätzlichen Darstellungen erstellen, wenn du mehr Kontrolle willst.

Kann der Splash-Screen animiert sein?

Ja. WebViewGold akzeptiert statische oder animierte GIFs, solange das Bild quadratisch ist. Halte die Animation kurz und stimme die Hintergrundfarbe auf den ersten Screen deiner Web-App ab.

Kann ChatGPT auch meine Store-Screenshots machen?

Nutze echte Screenshots der gebauten App; generierte Bilder von Features stellen die App falsch dar und riskieren eine Ablehnung nach Richtlinie 2.3. ChatGPT ist nützlich für Bildunterschriften und das Hintergrund-Artwork um echte Screenshots herum.

Drei Wege, deine App in die Stores zu bringen

Gleiches Ergebnis, unterschiedlich viel Arbeit auf deiner Seite. Alle drei kommen mit Genehmigungsgarantie und 24/7 Support von echten Menschen.

Selbst machen

$109 pro Plattform, einmalig

Die WebViewGold-Lizenz: ein fertiges Xcode- oder Android-Studio-Projekt. URL einfügen, Name und Icon setzen, Features einschalten, bauen und einreichen. Kostenlose Updates für immer.

Pakete auf der Hauptseite ansehen

Full Service

$698 pro Plattform $798

Schick uns deine URL und dein Icon. Unser Team konfiguriert, baut und liefert deine App innerhalb von 72 Stunden, White-Label, inklusive Quellprojekten. Beide Plattformen für $1,158.

Full-Service-Details Powered by WeSetupYourWebViewApp

Winter-Sale-Preise gültig bis 31. Dezember 2026.

Bereit, deine App zu veröffentlichen?

App Store & Google Play Genehmigungsgarantie – oder Geld zurück innerhalb von 14 Tagen

Lieber abgeben? Full Service: Wir konfigurieren, bauen und liefern innerhalb von 72 Stunden, ab $698 pro Plattform. Fragen? Chatte mit uns – 24/7.

Erstattungen erfolgen zu den in unseren FAQ genannten Bedingungen: eine nicht inhaltsbedingte Ablehnung durch Apple und/oder Google, geltend gemacht innerhalb von 14 Tagen nach dem Kauf.