Aller au contenu
WebViewGold Du vibe coding à l'App Store
Français
Obtenir WebViewGold

ChatGPT & Codex

Générez l'icône et l'écran de démarrage de votre app avec ChatGPT : prompts, règles des stores et emplacement des fichiers dans WebViewGold

La génération d'images de ChatGPT peut donner une vraie icône à une app créée en vibe coding en une soirée. Les stores sont toutefois stricts sur le fichier : un carré opaque de 1024 px pour iOS, une icône de fiche de 512 px et des calques adaptatifs pour Android, et rien qui emprunte la marque de quelqu'un d'autre. Voici les prompts, les règles et un script qui transforme une seule image en tous les fichiers dont WebViewGold a besoin.

Dès $109 en paiement unique par plateforme, ou notre équipe s'occupe de tout dès $698.

  • Garantie d'approbation – ou remboursement sous 14 jours
  • Aucun codage requis
  • Paiement unique, mises à jour gratuites
  • Support humain 24/7
  • Conçu en Allemagne depuis 2014 · ISO 27001

Ce que ChatGPT fait bien ici, et ce que vous terminez vous-même

La génération d'images de ChatGPT gère bien la partie créative : elle transforme un brief d'une ligne en symboles plats et affirmés, suit les consignes de couleur et vous laisse itérer en langage courant (« trait plus épais, moins de détails, remontez-le un peu »). Vous pouvez aussi importer votre logo existant et demander une version icône.

C'est sur la partie fichier qu'elle n'est pas fiable : dimensions exactes en pixels, vrai canal alpha quand vous en avez besoin (elle peint parfois un damier au lieu de la transparence), petit texte net, et symbole identique d'une génération à l'autre. Considérez donc ce que vous donne ChatGPT comme une illustration : choisissez un résultat, enregistrez-le, et produisez chaque fichier pour les stores à partir de ce seul fichier, avec un éditeur d'images, le script ci-dessous ou le Cloud Builder. Le tableau complet des spécifications se trouve dans le guide de l'icône d'app et de l'écran de démarrage ; cette page couvre ce qui compte pour les visuels créés par IA.

Les règles que vos fichiers doivent respecter

ÉlémentRègleEmplacement dans WebViewGold
Icône d'app iOSPNG de 1024 × 1024 px, opaque (sans canal alpha), coins carrés car iOS applique le masque, sRGB. Une icône avec alpha est refusée à l'envoi avec ITMS-90717Xcode : WebViewGold → General → App Icons and Launch Screen → App Icon Source (le set AppIcon) ; voir la documentation iOS sur l'icône
Icône de la fiche Google Play512 × 512 px, PNG 32 bits, sRGB, 1024 Ko maximum, un carré plein sans coins arrondis ni ombre portée (Play applique les deux). Pas de texte ni de badges qui suggèrent des classements, des promotions ou des programmes PlayPlay Console → fiche du Play Store (pas dans le projet)
Icônes de lancement Androidic_launcher.png, ic_launcher_round.png et ic_launcher_foreground.png dans chaque dossier de densité mipmap-*Projet Android Studio ; voir la documentation Android sur l'icône
Premier plan de l'icône adaptativeUn canevas de 108 dp ; les launchers recadrent en cercles, en squircles ou en carrés : gardez donc le symbole dans le cercle central de 66 dp, entouré de transparenceic_launcher_foreground.png dans chaque dossier mipmap
Image de l'écran de démarrageUn GIF carré (par exemple 512 ou 1024 px), statique ou animé ; la couleur de fond se définit séparémentiOS : splash.gif dans le dossier principal du projet Xcode, couleur via splashscreencolor dans Config.swift. Android : les fichiers splash.gif fournis, couleur dans colors.xml (documentation Android sur l'écran de démarrage)

Prompt 1 : arrêtez d'abord l'idée avec des mots

Chaque génération d'image prend du temps et modifie des détails. Fixez le concept par écrit, puis générez.

À coller dans ChatGPT (texte uniquement, pas encore d'image)
J'ai besoin d'une icône d'app pour [NOM DE L'APP], un(e) [description en une phrase] destiné(e) à [public]. Couleurs de la marque : [#HEX, #HEX].

Proposez cinq concepts d'icône. Pour chacun, indiquez :
- le symbole unique (un objet ou une forme ; pas de lettres, sauf une seule initiale bien affirmée),
- la couleur de fond,
- pourquoi il reste reconnaissable à 60 x 60 pixels,
- un risque (trop proche d'une marque connue, trop détaillé, trop générique).

Ne proposez pas de badges de store, de cadres d'appareil, de slogans, ni rien qui ressemble aux logos ou mascottes d'Apple, de Google, d'OpenAI ou d'autres entreprises. Recommandez ensuite un concept en deux phrases.

Avec une bonne version optimisée de votre application Web, vous pouvez avoir une superbe application mobile en quelques minutes. De plus, le service client est très agréable et très utile! Je ne peux que recommander WebViewGold :-)

Julian Koch · Co-fondateur de DuelDonkey · CodeCanyon

Prompt 2 : l'icône maîtresse

Demandez une image carrée. Générez deux ou trois variantes, choisissez-en une et téléchargez-la tout de suite ; la génération suivante ne sera pas identique.

À coller dans ChatGPT pour générer l'image
Créez une image d'icône d'app carrée (1:1) pour [NOM DE L'APP] d'après le concept [N] : [le symbole].

Style : vectoriel plat, formes simples et affirmées, deux ou trois couleurs, fort contraste. Pas de photoréalisme, pas d'effets 3D brillants.
Composition : un seul symbole, centré, occupant environ 55 à 60 % du canevas, avec une marge égale sur tous les côtés.
Fond : [#HEX] uni jusqu'aux quatre bords. Pas de bordure, pas de cadre, pas de coins arrondis, pas d'ombre portée, pas de vignettage.
À exclure : texte, lettres, chiffres, filigranes, maquettes d'appareil, badges de store, et tout logo ou mascotte d'une entreprise existante.
Le symbole doit rester reconnaissable à 60 x 60 pixels.

Prompt 3 : le symbole seul, pour l'icône adaptative et l'écran de démarrage

L'icône adaptative d'Android et l'écran de démarrage de WebViewGold fonctionnent mieux avec le symbole seul. Demandez-le dans la même conversation pour que ChatGPT réutilise les formes, et vérifiez si le résultat a une vraie transparence ou un damier peint.

Dans la même conversation, après avoir choisi l'icône maîtresse
En reprenant exactement le même symbole que dans l'icône que j'ai choisie (mêmes formes, proportions et couleurs), créez une image carrée qui montre uniquement le symbole, centré, sur un fond transparent.

Si vous ne pouvez pas produire une vraie transparence, utilisez à la place un fond magenta pur et uni (#FF00FF), une couleur qui n'apparaît nulle part dans le symbole, sans ombre ni halo. Pas de texte, pas de bordure, pas de cadre.

De l'idée aux fichiers finis

  1. Brief et concept

    Lancez le prompt 1 avec vos vraies couleurs et votre vrai public. Choisissez un concept assez simple pour être dessiné de mémoire.

  2. Générez et choisissez une icône maîtresse

    Lancez le prompt 2, comparez les variantes en taille vignette (dézoomez votre écran) et téléchargez la gagnante au format PNG.

  3. Vérifiez le fichier

    Carré ? Au moins 1024 px ? Fond uni jusqu'à chaque bord ? Sur Mac, sips -g pixelWidth -g pixelHeight -g hasAlpha master.png répond aux trois questions ; n'importe quel éditeur d'images aussi.

  4. Créez la version avec le symbole seul

    Lancez le prompt 3. Si le résultat revient sur fond magenta, supprimez le fond dans un éditeur (Alpha instantané d'Aperçu, Photoshop, Figma, Canva) et exportez un PNG avec transparence.

  5. Générez les tailles

    Lancez le script ci-dessous, utilisez un générateur d'icônes, ou importez simplement l'icône maîtresse de 1024 px dans le Cloud Builder, qui crée pour vous toutes les tailles iOS et Android.

  6. Placez les fichiers

    iOS : remplacez les images du set AppIcon. Android : remplacez une par une les trois PNG de chaque dossier mipmap, en gardant les noms et les dossiers. Ensuite, l'écran de démarrage : remplacez splash.gif, définissez la couleur de l'écran de démarrage et, sur iOS, donnez la même couleur au fond du storyboard LaunchScreen pour éviter un flash blanc au lancement.

  7. Vérifiez sur de vrais appareils

    Écran d'accueil, Spotlight et Réglages sur iOS (ainsi que les modes sombre et teinté sur iOS 18 et versions ultérieures), et un launcher à icônes rondes sur Android. Si le symbole disparaît en petite taille, corrigez l'illustration, pas le fichier.

Une image en entrée, tous les fichiers en sortie

Ce script Python 3 (il nécessite Pillow) prend l'icône maîtresse et, en option, le PNG du symbole seul. Il écrit une icône iOS opaque de 1024 px, l'icône Play de 512 px, les trois PNG de lancement pour chaque densité Android avec le symbole dans la zone de sécurité adaptative, et un splash.gif carré. Exécutez-le en local, ou importez le script et vos images dans ChatGPT et demandez-lui de l'exécuter si l'exécution de code est disponible dans votre offre.

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()

Les erreurs qui coûtent un envoi ou un examen

  • Un damier peint au lieu de la transparence. Il paraît transparent dans le chat et finit en grille grise sur l'écran d'accueil.
  • Des coins arrondis ou une ombre portée intégrés à l'image. iOS et Google Play ajoutent les leurs, et vous obtenez un double contour.
  • Des détails fins et des dégradés qui s'effacent. Les icônes sont vues à environ 60 px ; les formes plates l'emportent.
  • Un symbole qui touche les bords du premier plan Android. Les launchers ronds le coupent ; gardez-le dans la zone de sécurité.
  • Une icône différente dans le store et sur l'appareil. Générez une seule fois et dérivez chaque fichier de la même icône maîtresse.
  • Un écran de démarrage qui n'est pas carré, ou un GIF animé plus long que la durée de l'écran de démarrage, que les utilisateurs voient donc coupé.
  • L'icône par défaut de WebViewGold oubliée dans un dossier de densité parce qu'un remplacement a été manqué.

Questions fréquentes

Puis-je utiliser une icône créée avec ChatGPT dans une app commerciale ?

Les conditions d'utilisation d'OpenAI vous cèdent les droits sur les images que vous créez : l'usage commercial est donc autorisé. Cela ne garantit pas que le design soit libre de toute marque de tiers ; faites donc la vérification de similarité décrite ci-dessus.

Apple ou Google refuseront-ils une icône générée par IA ?

Aucune règle n'interdit les visuels créés par IA. Les mêmes règles s'appliquent que pour n'importe quelle icône : le bon format, aucun contenu trompeur ou contrefaisant, et une icône qui correspond à l'app.

L'image doit-elle faire exactement 1024 x 1024 pixels ?

Le fichier de l'icône iOS, oui. Si ChatGPT renvoie une autre taille, redimensionnez l'image que vous avez choisie (le script le fait) plutôt que de régénérer et d'obtenir un design différent.

Ai-je besoin de versions sombre, teintée ou Liquid Glass pour iOS ?

Elles sont facultatives. WebViewGold utilise le set AppIcon standard, et les versions actuelles d'iOS s'appuient sur cette icône. Icon Composer d'Apple permet de créer des icônes en calques avec des apparences supplémentaires si vous voulez plus de contrôle.

L'écran de démarrage peut-il être animé ?

Oui. WebViewGold accepte les GIF statiques ou animés, à condition que l'image soit carrée. Gardez l'animation courte et accordez la couleur de fond au premier écran de votre app web.

ChatGPT peut-il aussi créer mes captures d'écran pour les stores ?

Utilisez de vraies captures de l'app compilée ; des images générées des fonctionnalités donnent une image trompeuse de l'app et exposent à un refus au titre de la guideline 2.3. ChatGPT est utile pour les légendes et l'habillage graphique autour des vraies captures.

Trois façons de mettre votre app dans les stores

Même résultat, charge de travail différente de votre côté. Les trois formules incluent la garantie d'approbation et le support humain 24/7.

Faites-le vous-même

$109 par plateforme, paiement unique

La licence WebViewGold : un projet Xcode ou Android Studio prêt à l'emploi. Collez votre URL, définissez le nom et l'icône, activez les fonctionnalités, compilez et soumettez. Mises à jour gratuites à vie.

Voir les offres sur la page principale

Full Service

$698 par plateforme $798

Envoyez-nous votre URL et votre icône. Notre équipe configure, compile et livre votre app sous 72 heures, en marque blanche, projets sources inclus. Les deux plateformes pour $1,158.

Détails du Full Service Propulsé par WeSetupYourWebViewApp

Prix Soldes d'hiver valables jusqu'au 31 décembre 2026.

Prêt à publier votre app ?

Garantie d'approbation App Store & Google Play – ou remboursement sous 14 jours

Vous préférez déléguer ? Full Service : nous configurons, compilons et livrons sous 72 heures, dès $698 par plateforme. Des questions ? Chattez avec nous 24/7.

Les remboursements sont accordés aux conditions indiquées dans notre FAQ : un refus non lié au contenu par Apple et/ou Google, demandé dans les 14 jours suivant l'achat.