Saltar al contenido
WebViewGold Del vibe coding a la App Store
Español
Consigue WebViewGold

ChatGPT & Codex

Genera el icono de tu app y la pantalla de inicio con ChatGPT: prompts, reglas de las tiendas y dónde colocar los archivos en WebViewGold

La generación de imágenes de ChatGPT puede darle a una app creada con vibe coding un icono de verdad en una tarde. Eso sí, las tiendas son estrictas con el archivo: un cuadrado opaco de 1024 px para iOS, un icono de ficha de 512 px y capas adaptativas para Android, y nada que tome prestada la marca de otro. Aquí tienes los prompts, las reglas y un script que convierte una sola imagen en todos los archivos que necesita WebViewGold.

Desde $109 de pago único por plataforma, o deja que nuestro equipo lo haga todo desde $698.

  • Garantía de aprobación – o te devolvemos el dinero en 14 días
  • Sin programar
  • Pago único, actualizaciones gratuitas
  • Soporte humano 24/7
  • Hecho en Alemania desde 2014 · ISO 27001

Lo que ChatGPT hace bien aquí y lo que terminas tú

La generación de imágenes de ChatGPT resuelve bien la parte creativa: convierte un encargo de una línea en símbolos planos y contundentes, sigue las indicaciones de color y te deja iterar en lenguaje natural ("trazo más grueso, menos detalle, súbelo un poco"). También puedes subir tu logotipo actual y pedirle una versión en forma de icono.

Donde no es fiable es en la parte del archivo: las dimensiones exactas en píxeles, un canal alfa real cuando lo necesitas (a veces pinta un tablero de ajedrez en lugar de transparencia), el texto pequeño nítido y el mismo símbolo idéntico en dos generaciones. Así que trata lo que te da ChatGPT como una ilustración: elige un resultado, guárdalo y genera todos los archivos para las tiendas a partir de ese único archivo, con un editor de imágenes, el script de abajo o el Cloud Builder. La tabla completa de especificaciones está en la guía del icono de app y la pantalla de inicio; esta página cubre lo que importa en el arte hecho con IA.

Las reglas que deben cumplir tus archivos

RecursoReglaDónde va en WebViewGold
Icono de app de iOSPNG de 1024 × 1024 px, opaco (sin canal alfa), con esquinas rectas porque iOS aplica la máscara, en sRGB. Un icono con alfa se rechaza al subirlo con ITMS-90717Xcode: WebViewGold → General → App Icons and Launch Screen → App Icon Source (el conjunto AppIcon); consulta la documentación de iconos para iOS
Icono de la ficha de Google Play512 × 512 px, PNG de 32 bits, sRGB, hasta 1024 KB, un cuadrado completo sin esquinas redondeadas ni sombra (Play aplica ambas cosas). Sin textos ni insignias que sugieran rankings, ofertas o programas de PlayPlay Console → ficha de Play Store (no dentro del proyecto)
Iconos del launcher de Androidic_launcher.png, ic_launcher_round.png e ic_launcher_foreground.png en cada carpeta de densidad mipmap-*Proyecto de Android Studio; consulta la documentación de iconos para Android
Primer plano del icono adaptativoUn lienzo de 108 dp; los launchers recortan en círculos, squircles o cuadrados, así que mantén el símbolo dentro del círculo central de 66 dp, con transparencia alrededoric_launcher_foreground.png en cada carpeta mipmap
Imagen de la pantalla de inicioUn GIF cuadrado (por ejemplo de 512 o 1024 px), estático o animado; el color de fondo se define por separadoiOS: splash.gif en la carpeta principal del proyecto de Xcode y el color con splashscreencolor en Config.swift. Android: los archivos splash.gif incluidos y el color en colors.xml (documentación de la pantalla de inicio para Android)

Prompt 1: decide primero la idea con palabras

Cada generación de imagen lleva tiempo y cambia detalles. Cierra el concepto con texto y después genera.

Pégalo en ChatGPT (solo texto, todavía sin imagen)
Necesito un icono de app para [NOMBRE DE LA APP], [descripción en una frase] para [público]. Colores de marca: [#HEX, #HEX].

Propón cinco conceptos de icono. Para cada uno indica:
- el símbolo único (un objeto o una forma; sin letras, salvo que sea una inicial en negrita),
- el color de fondo,
- por qué sigue siendo reconocible a 60 x 60 píxeles,
- un riesgo (demasiado parecido a una marca conocida, demasiado detallado, demasiado genérico).

No propongas insignias de tiendas, marcos de dispositivos, eslóganes ni nada que se parezca a los logotipos o mascotas de Apple, Google, OpenAI u otras empresas. Después recomienda un concepto en dos frases.

Con una buena versión optimizada de su aplicación web, puedes tener una impresionante aplicación móvil en un par de minutos. ¡Además del servicio al cliente es muy agradable y muy útil! ¡Puedo recomendar WebViewgold :-)

Julian Koch · Cofundador de Dueldonkey · CodeCanyon

Prompt 2: el icono maestro

Pide una imagen cuadrada. Genera dos o tres variantes, elige una y descárgala enseguida; la siguiente generación no será idéntica.

Pégalo en ChatGPT para generar la imagen
Crea una imagen cuadrada (1:1) de icono de app para [NOMBRE DE LA APP] basada en el concepto [N]: [el símbolo].

Estilo: vectorial plano, formas simples y contundentes, dos o tres colores, alto contraste. Nada de fotorrealismo ni de efectos 3D brillantes.
Composición: un solo símbolo, centrado, que ocupe entre el 55 y el 60 por ciento del lienzo, con un margen uniforme en todos los lados.
Fondo: [#HEX] sólido que llegue hasta los cuatro bordes. Sin borde, sin marco, sin esquinas redondeadas, sin sombra, sin viñeteado.
No incluyas: texto, letras, números, marcas de agua, maquetas de dispositivos, insignias de tiendas ni ningún logotipo o mascota de una empresa existente.
El símbolo tiene que seguir siendo reconocible a 60 x 60 píxeles.

Prompt 3: solo el símbolo, para el icono adaptativo y la pantalla de inicio

El icono adaptativo de Android y la pantalla de inicio de WebViewGold funcionan mejor con el símbolo solo. Pídelo en la misma conversación para que ChatGPT reutilice las formas, y comprueba si el resultado tiene transparencia real o un tablero de ajedrez pintado.

En el mismo chat, después de elegir el icono maestro
Usando exactamente el mismo símbolo que en el icono que he elegido (mismas formas, proporciones y colores), crea una imagen cuadrada que muestre solo el símbolo, centrado, sobre un fondo transparente.

Si no puedes generar transparencia real, usa en su lugar un fondo plano magenta puro (#FF00FF), un color que no aparezca en ninguna parte del símbolo, sin sombras ni resplandores. Sin texto, sin borde, sin marco.

De la idea a los archivos terminados

  1. Encargo y concepto

    Ejecuta el prompt 1 con tus colores y tu público reales. Elige un concepto lo bastante simple como para dibujarlo de memoria.

  2. Genera y elige un maestro

    Ejecuta el prompt 2, compara las variantes a tamaño miniatura (aleja el zoom de la pantalla) y descarga la ganadora en PNG.

  3. Comprueba el archivo

    ¿Es cuadrado? ¿Tiene al menos 1024 px? ¿El fondo es sólido hasta todos los bordes? En un Mac, sips -g pixelWidth -g pixelHeight -g hasAlpha master.png responde a las tres preguntas; cualquier editor de imágenes también.

  4. Haz la versión solo con el símbolo

    Ejecuta el prompt 3. Si vuelve con fondo magenta, quita el fondo en un editor (Alfa instantáneo de Vista Previa, Photoshop, Figma, Canva) y exporta un PNG con transparencia.

  5. Genera los tamaños

    Ejecuta el script de abajo, usa un generador de iconos o sube solo el maestro de 1024 px al Cloud Builder, que crea por ti todos los tamaños de iOS y Android.

  6. Coloca los archivos

    iOS: sustituye las imágenes del conjunto AppIcon. Android: sustituye uno a uno los tres PNG de cada carpeta mipmap, conservando nombres y carpetas. Después, la pantalla de inicio: sustituye splash.gif, define el color de la pantalla de inicio y, en iOS, pon el mismo color de fondo en el storyboard LaunchScreen para que el arranque no dé un destello blanco.

  7. Compruébalo en dispositivos reales

    Pantalla de inicio, Spotlight y Ajustes en iOS (también los modos oscuro y tintado en iOS 18 y posteriores), y un launcher con iconos redondos en Android. Si el símbolo desaparece a tamaño pequeño, arregla la ilustración, no el archivo.

Una imagen de entrada, todos los archivos de salida

Este script de Python 3 (necesita Pillow) toma el maestro y, opcionalmente, el PNG con solo el símbolo. Genera un icono opaco de 1024 px para iOS, el icono de 512 px para Play, los tres PNG del launcher para cada densidad de Android con el símbolo dentro de la zona segura adaptativa y un splash.gif cuadrado. Ejecútalo en local, o sube el script y tus imágenes a ChatGPT y pídele que lo ejecute si tu plan incluye ejecución de código.

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

Errores que cuestan una subida o una revisión

  • Un tablero de ajedrez pintado en lugar de transparencia. En el chat parece transparente y en la pantalla de inicio aparece como una cuadrícula gris.
  • Esquinas redondeadas o una sombra incrustadas en la imagen. iOS y Google Play añaden las suyas, y acabas con un borde doble.
  • Detalles finos y degradados que se pierden. Los iconos se ven a unos 60 px; las formas planas ganan.
  • Un símbolo que toca los bordes del primer plano de Android. Los launchers redondos lo recortan; mantenlo dentro de la zona segura.
  • Un icono distinto en la tienda y en el dispositivo. Genera una vez y saca todos los archivos del mismo maestro.
  • Una pantalla de inicio que no es cuadrada, o un GIF animado más largo que el tiempo de la pantalla de inicio, de modo que los usuarios lo ven cortado.
  • El icono provisional de WebViewGold olvidado en una carpeta de densidad porque se pasó por alto una sustitución.

Preguntas frecuentes

¿Puedo usar un icono hecho con ChatGPT en una app comercial?

Las condiciones de uso de OpenAI te ceden los derechos sobre las imágenes que creas, así que el uso comercial está permitido. Eso no garantiza que el diseño esté libre de marcas de terceros, así que haz la comprobación de similitud descrita arriba.

¿Rechazarán Apple o Google un icono generado con IA?

No hay ninguna regla contra las ilustraciones hechas con IA. Se aplican las mismas reglas que a cualquier icono: el formato correcto, ningún contenido engañoso o que infrinja derechos y un icono que corresponda a la app.

¿La imagen tiene que medir exactamente 1024 x 1024 píxeles?

El archivo del icono de iOS, sí. Si ChatGPT devuelve otro tamaño, redimensiona la imagen que elegiste (el script lo hace) en lugar de volver a generarla y obtener un diseño distinto.

¿Necesito versiones oscura, tintada o Liquid Glass para iOS?

Son opcionales. WebViewGold usa el conjunto AppIcon estándar, y las versiones actuales de iOS trabajan a partir de ese icono. Icon Composer de Apple puede crear iconos por capas con aspectos adicionales si quieres más control.

¿La pantalla de inicio puede ser animada?

Sí. WebViewGold acepta GIF estáticos o animados siempre que la imagen sea cuadrada. Mantén la animación corta y haz que el color de fondo coincida con la primera pantalla de tu app web.

¿Puede ChatGPT hacer también mis capturas para la tienda?

Usa capturas reales de la app compilada; las imágenes generadas de funciones dan una imagen falsa de la app y te exponen a un rechazo por la Directriz 2.3. ChatGPT es útil para los textos y la ilustración de fondo alrededor de las capturas reales.

Tres formas de llevar tu app a las tiendas

El mismo resultado, con distinta cantidad de trabajo por tu parte. Las tres incluyen la garantía de aprobación y soporte humano 24/7.

Hazlo tú mismo

$109 por plataforma, pago único

La licencia de WebViewGold: un proyecto de Xcode o Android Studio listo para usar. Pega tu URL, define nombre e icono, activa funciones, compila y envía. Actualizaciones gratuitas para siempre.

Ver planes en la página principal

Full Service

$698 por plataforma $798

Envíanos tu URL y tu icono. Nuestro equipo configura, compila y entrega tu app en 72 horas, en marca blanca y con los proyectos fuente. Ambas plataformas por $1,158.

Detalles del Full Service Con tecnología de WeSetupYourWebViewApp

Precios de la Oferta de invierno válidos hasta el 31 de diciembre de 2026.

¿Listo para lanzar tu app?

Garantía de aprobación en App Store & Google Play – o te devolvemos el dinero en 14 días

¿Prefieres delegarlo? Full Service: configuramos, compilamos y entregamos en 72 horas, desde $698 por plataforma. ¿Preguntas? Chatea con nosotros 24/7.

Los reembolsos se conceden bajo las condiciones indicadas en nuestras FAQ: un rechazo por motivos ajenos al contenido por parte de Apple y/o Google, reclamado dentro de los 14 días posteriores a la compra.