Generador de Iconos de App

Cómo generar un set de iconos de app

1. Sube un logo o icono de app más o menos cuadrado: JPG, PNG o WebP, idealmente de 1024×1024px o más.
2. Revisa la vista previa de la zona segura de Android: todo lo que está dentro del círculo claro sobrevive a la máscara de cualquier lanzador; el anillo oscurecido de fuera puede recortarse en algunos dispositivos.
3. Si algún detalle importante cae en el anillo oscurecido, cambia la imagen por otra con más margen alrededor de la marca y vuelve a subirla.
4. Pulsa Generate & Download App Icons para descargar un ZIP con los sets ios/ y android/ completos, construidos íntegramente en tu navegador.
5. Descomprímelo, arrastra ios/AppIcon.appiconset al catálogo de recursos de Xcode y copia el contenido de la carpeta android/ al directorio res/ de tu proyecto.

Todos los tamaños necesarios, de una sola pasada

Publicar una app en la App Store y en Google Play significa producir decenas de PNG de distintos tamaños a partir de una imagen maestra: iPhone y iPad necesitan varios tamaños en puntos a 1x/2x/3x para la pantalla de inicio, Spotlight y Ajustes; la propia App Store pide un icono de marketing de 1024×1024 aparte; y Android necesita un icono de lanzador clásico y una capa de primer plano de icono adaptativo en cinco cubos de densidad de pantalla distintos. Hacer cada uno a mano en un editor de imágenes, acertar con cada nombre de archivo y escribir a mano el Contents.json de Xcode es lento y fácil de equivocar: un solo tamaño o nombre mal puesto hace que Xcode caiga silenciosamente en un escalado borroso, o que tu build de CI falle por un recurso que falta.

Esta herramienta genera la lista de imágenes real que define el formato de catálogo de recursos de Apple y la tabla de densidades documentada de Android, no una aproximación. La parte de iOS reproduce exactamente el conjunto idiom/size/scale/filename de un AppIcon.appiconset real, incluido el hecho de que varios archivos distintos acaban en el mismo tamaño en píxeles (el de 20pt@2x de iPhone, el de 20pt@2x de iPad y el de 40pt@1x de iPad son todos de 40×40px de verdad) así que cada tamaño distinto se genera una vez y se reutiliza en todos los archivos que lo necesitan. La parte de Android reproduce la escala de densidades estándar mdpi/hdpi/xhdpi/xxhdpi/xxxhdpi tanto para el icono de lanzador clásico de 48dp como para el lienzo de icono adaptativo moderno de 108dp, además del ic_launcher.xml real que Android lee a partir de la API 26.

La zona segura del icono adaptativo, hecha visible

Los iconos adaptativos de Android son famosos por lo fácil que es equivocarse con ellos: tu arte de primer plano vive en un lienzo de 108dp, pero el sistema deja que cada fabricante recorte ese lienzo con la forma que use su lanzador, un círculo en un móvil, un cuadrado redondeado o una gota en otro. La propia guía de Android fija dos límites anidados sobre ese lienzo, y es muy fácil confundirlos:

• Los 18dp exteriores de cada lado están reservados para el enmascarado y para efectos de movimiento como el parallax, de modo que el área visible bajo la máscara es el interior de 72dp (72 + 18 + 18 = 108). Nada de esa franja se muestra en reposo.
• Dentro de esa área, una máscara todavía puede acercarse hasta 33dp del centro, así que la región realmente garantizada frente a cualquier forma es un círculo centrado de 66dp de diámetro, lo que deja 21dp hasta cada borde del lienzo completo de 108dp ((108 − 66) ÷ 2 = 21), no 18dp.

Si tu marca sobresale de ese círculo de 66dp, una parte desaparece en dispositivos reales, y normalmente solo lo descubrirías después de instalar tu propia app en el móvil de un amigo.

Esta herramienta dibuja ese límite exacto sobre tu imagen antes de que descargues nada: se usa la misma proporción de círculo de 66dp dentro de un lienzo de 108dp que documenta Android para oscurecer todo lo que queda fuera del círculo seguro, en vivo y sobre la página, para que detectes una marca demasiado grande mientras aún estás iterando y no después de enviar la app a la tienda.

Sin subidas, tu icono se queda en tu dispositivo

El icono de una app suele ser el primer recurso realmente público de un proyecto que aún no ha salido: una startup en modo sigiloso, el rediseño de marca de un cliente bajo NDA, un proyecto personal que no quieres anunciar todavía. Cada paso de aquí (decodificar la imagen, el recorte cuadrado, cada PNG generado, la vista previa de la zona segura y el ZIP final) ocurre en la memoria de tu propio navegador. No se sube nada, no se registra nada y no hay ninguna cuenta ni correo obligatorio entre tú y el ZIP en tu carpeta de descargas.

Usos habituales

• Producir un set de iconos completo y con los nombres correctos para una app iOS/Android nueva en un solo paso, en lugar de exportar decenas de PNG a mano.
• Comprobar si una marca ya existente sobrevive al enmascarado de los iconos adaptativos de Android antes de publicar, con la vista previa de zona segura.
• Renovar el set de iconos de una app tras un cambio de marca sin volver a derivar cada tamaño de Xcode y Android desde cero.
• Generar los recursos de icono para un framework multiplataforma (React Native, Flutter, Cordova) que lee Contents.json y las carpetas mipmap-* de Android directamente.
• Combinarla con el Generador de Favicons cuando el mismo logo también necesita un paquete de favicon web, o con Redimensionar Imagen y Recortar Imagen para tamaños puntuales que este paquete no cubre.