Cómo crear el icono de la app (y la pantalla de presentación)
El icono es lo primero que alguien ve de tu app, y casi siempre en tamaño minúsculo: en la búsqueda de la tienda, en la pantalla de inicio, en la lista de notificaciones. Un buen icono es reconocible del tamaño de una uña. Casi todo lo demás se deriva de eso.
Esta guía trata de las medidas que pide cada tienda, de los errores que hacen fallar el envío y de cómo hacer un icono en Canva o con generación de imágenes por IA.
Las medidas, tienda por tienda
| App Store | Google Play | |
|---|---|---|
| Tamaño | 1024 × 1024 px | 512 × 512 px en la ficha |
| Formato | PNG | PNG de 32 bits, hasta 1 MB |
| Transparencia | no se acepta | se acepta, pero no la uses |
| Esquinas | cuadrado completo, el sistema redondea | cuadrado completo, la tienda aplica la máscara |
| Sombra | no la dibujes | no la dibujes, la tienda aplica la suya |
La regla práctica: hazlo una vez en 1024 × 1024, con fondo relleno y esquinas rectas. De ese archivo salen todos los demás tamaños.
Los errores más frecuentes
Fondo transparente en el iPhone. Apple rechaza los iconos con transparencia. El fondo tiene que estar pintado hasta el borde.
Esquinas ya redondeadas. El sistema aplica su máscara encima de la tuya, y queda un contorno raro en las esquinas. Envía el cuadrado.
Texto pequeño. El nombre de la empresa escrito completo se vuelve una mancha a 60 píxeles. Si la marca depende del texto, usa solo la inicial o una sigla corta.
Demasiado detalle. Una foto, un degradado de cuatro colores, tres objetos. En la pantalla de inicio todo eso se vuelve ruido. Un símbolo, un color de fondo, contraste alto.
Icono igual al de la competencia. Si todas las pizzerías de la ciudad usan una porción de pizza naranja, tu porción naranja desaparece en la lista. A veces la inicial de la marca sobre el color de la marca destaca más que el dibujo obvio.
El icono adaptable de Android
En Android, el icono que aparece en el teléfono es adaptable: son dos capas, un fondo y un dibujo al frente, y cada fabricante lo recorta con una forma distinta. En un teléfono se vuelve un círculo, en otro un cuadrado de esquinas redondeadas, en otro una gota.
Lo que eso te pide:
- mantén el dibujo dentro de la zona segura, un círculo en el centro de unos dos tercios del ancho total. Lo que quede fuera puede cortarse;
- deja aire: el símbolo pegado al borde es el primero en perder un pedazo con el recorte;
- el fondo debe ser un color liso o un patrón simple, porque puede moverse un poco con las animaciones del sistema.
Una prueba rápida: dibuja un círculo del 66% del ancho en el centro de tu icono. Si el símbolo entero cabe dentro, sobrevive a cualquier recorte.
Prueba de legibilidad en 30 segundos
Antes de enviar, reduce el icono a 48 × 48 píxeles y míralo de lejos. Después, ponlo junto a capturas de la pantalla de inicio de un iPhone y de un Android con otras apps.
Si todavía reconoces la marca, está bien. Si tienes que entrecerrar los ojos, simplifica.
Cómo hacerlo en Canva
- Crea un diseño con tamaño personalizado de 1024 × 1024 px;
- Rellena todo el fondo con el color principal de la marca;
- Coloca el símbolo o la inicial en el centro, ocupando más o menos el 60% del área, para respetar la zona segura de Android;
- Usa como máximo dos colores además del fondo;
- Descárgalo en PNG. El fondo transparente es una función del plan de pago de Canva, y para el icono no quieres transparencia, así que el PNG estándar sirve.
Para el icono de Google Play, descarga el mismo archivo otra vez y redúcelo a 512 × 512, o deja que lo haga la herramienta de publicación.
Cómo hacerlo con generación de imágenes por IA
Los generadores de imágenes son buenos para encontrar una idea y malos para entregar el archivo final. El camino que funciona:
- Pide el concepto, no el icono terminado. Algo como "icono de app minimalista, un peine estilizado, trazo grueso, fondo liso color vino, sin texto, estilo flat". El "sin texto" es importante, porque las letras generadas suelen salir mal;
- Genera varias versiones y elige la más simple, no la más bonita en tamaño grande;
- Llévala a Canva y rehaz el acabado: céntrala, ajusta el color de fondo al color exacto de la marca, revisa la zona segura;
- Comprueba que no se parezca a la marca de otra empresa. Una imagen generada puede recordar demasiado a un logotipo existente, y un icono parecido al de otra app es motivo de rechazo y de problemas legales.
La pantalla de presentación
Es la imagen que aparece entre el toque en el icono y la app lista. Dura poco, pero aparece cada vez que se abre la app.
Usa la marca en el centro, sobre un color liso. Android, desde la versión 12, arma la pantalla de presentación de la misma forma: un icono centrado sobre un color de fondo. Apple recomienda que esa pantalla sea discreta y parecida a la primera pantalla de la app.
No uses una foto a pantalla completa. Cada teléfono tiene una proporción, y la foto se recorta de forma distinta en cada uno. Lo que queda en el centro de uno se vuelve borde en otro.
No pongas texto publicitario. Nadie lo lee, y en los teléfonos rápidos la pantalla desaparece antes.
Dónde entra esto en Fabapp
En Fabapp, el icono y la pantalla de presentación están en la pestaña Aplicación, en el paso Marca de la configuración de la app nativa (disponible desde el plan Builder). Lo que pide la plataforma:
- icono: PNG cuadrado de 1024 × 1024, con el fondo relleno y sin esquinas redondeadas. Si no envías ninguno, la plataforma genera uno con la inicial de la app sobre el color de tu marca;
- pantalla de presentación: PNG con la marca al centro y fondo transparente, porque el color que eliges rellena el resto de la pantalla.
Fíjate en la diferencia: el icono va con fondo, la pantalla de presentación va sin él. Es la confusión más común, y por eso conviene generar los dos archivos por separado en Canva. A partir de ahí, la plataforma genera los tamaños de cada sistema. El paso a paso está en la guía Publicar la app en las tiendas.
El resumen
- hazlo en 1024 × 1024, PNG, fondo relleno y esquinas rectas;
- Apple rechaza la transparencia; el sistema redondea las esquinas solo;
- en Android, mantén el dibujo dentro del círculo central de dos tercios;
- un símbolo, pocos colores, nada de texto pequeño, y prueba a 48 píxeles;
- la pantalla de presentación es la marca en el centro sobre un color, nunca una foto a pantalla completa.
Un pedido listo para crear el tuyo
Crea una app para un salón de belleza con tres profesionales. Cada profesional tiene horario de trabajo por día de la semana, días libres y su propia lista de servicios con duración y precio; la clienta elige el servicio, la profesional y un horario libre, y recibe confirmación por correo y un recordatorio el día anterior; la agenda impide dos citas en el mismo horario; una galería de trabajos con fotos por servicio; cada profesional entra en su cuenta y ve solo su agenda del día, marcando atendida o no asistió; cada clienta tiene una ficha con historial; y yo veo un panel con facturación por profesional y por mes y la tasa de inasistencia.
Gratis para empezar. La primera versión llega en pocos minutos y la ajustas conversando.