Tamaños y zonas seguras de iconos de app: generamos 74 archivos con dos iconos
Es fácil pensar que un icono de app está terminado cuando la versión de 1024 px se ve bien. En la práctica también aparece a 29 px en Ajustes y a 20 px en las notificaciones, y Android lo recorta en círculos, cuadrados redondeados y otras formas según el dispositivo. Para esta guía pasamos dos iconos muy distintos por el generador de iconos de este sitio, obtuvimos 74 archivos de cada uno y comprobamos cómo se ven en cada tamaño y qué falla en los iconos adaptativos de Android.
Resumen
- Solo el icono sencillo se reconocía en tamaños pequeños. El detallado se emborronaba desde 58 px y a 29 px no se sabía qué era.
- No pongas texto, como el nombre de la app, dentro del icono. No se leía ni a 120 px.
- En los iconos adaptativos de Android, usar una ilustración con fondo propio como primer plano deja un borde cuadrado dentro de la forma. Separa el símbolo sobre fondo transparente y define la capa de fondo aparte.
- A iOS dale un icono cuadrado; no redondees las esquinas tú. Lo hace el sistema.
Qué tamaño se usa dónde
| Plataforma | Tamaños principales (px) | Dónde se usa |
|---|---|---|
| iOS | 1024 / 180·120 / 87·58·29 / 60·40·20 | App Store / pantalla de inicio / Ajustes / notificaciones, Spotlight |
| macOS | 16–1024 (1x, 2x) | Dock, Finder, vistas de lista |
| watchOS | 48–234 | Notificaciones, lanzador, Quick Look |
| Icono clásico de Android | 36·48·72·96·144·192 | Lanzador ldpi–xxxhdpi (mipmap) |
| Primer plano adaptativo de Android | 108·162·216·324·432 | Lienzo de 108 dp recortado a la forma del dispositivo |
| Google Play | 512 | Ficha de la tienda |
Son los preajustes del generador. Los huecos que necesitas dependen de la versión mínima y los dispositivos de tu proyecto, así que revisa los avisos de iconos que faltan en Xcode y Android Studio.
Cómo lo probamos
Creamos dos originales de 1024×1024 con un modelo de imagen GPT: (1) un icono sencillo con un avión de papel blanco sobre un degradado naranja; (2) uno detallado con una cartera, un gráfico de barras, monedas, un calendario y el texto fino “Daily Budget Planner”. Ambos pasaron por la función real del generador. Entorno: Chromium 152 en Windows, septiembre de 2026.
| Original | Archivos | Tamaño total | Tamaño ZIP | Archivo de 120 px | Archivo de 29 px |
|---|---|---|---|---|---|
| Sencillo | 74 | 5,71 MiB | 5,73 MiB | 17,9 KiB | 1,5 KiB |
| Detallado | 74 | 6,96 MiB | 6,97 MiB | 25,3 KiB | 2,0 KiB |
La generación tardó menos de un segundo en un PC con ambos. PNG ya está comprimido, así que el ZIP casi no reduce el tamaño; la mayor parte corresponde al original de 1024 px y a los tamaños grandes de macOS.
Resultado 1 — Qué icono sobrevive a los tamaños pequeños
El icono sencillo seguía pareciendo un avión de papel a 20 px. En el detallado, el texto no se leía ni a 120 px, la cartera y el calendario se fundían en una mancha a 58 px, y la versión de 29 px ampliada solo mostraba manchas azules y verdes. Un icono de Ajustes de 29 px es en la práctica un mosaico de 29×29, así que las líneas finas y las letras pequeñas se mezclan en uno o dos píxeles y desaparecen.
La comprobación más rápida es reducir la ilustración de 1024 px al tamaño de una uña en la pantalla del móvil. Busca un solo símbolo, trazos gruesos y buen contraste con el fondo; deja los detalles para las capturas de la tienda.
Resultado 2 — El borde cuadrado en los iconos adaptativos
Los iconos adaptativos de Android 8.0+ tienen una capa de primer plano y otra de fondo de 108×108 dp; el dispositivo solo muestra los 72 dp centrales, recortados en círculo, cuadrado redondeado u otra forma. Para que el logotipo no se corte, debe quedar dentro del círculo central de 66 dp. Este generador coloca el original en los 66 dp centrales del lienzo de 108 dp, un 61,1% aproximadamente (264 px en el archivo de 432 px).
El problema aparece cuando el original tiene un fondo pintado. Como en la fila de arriba, todo el cuadrado pasa a ser el primer plano y las máscaras squircle o de cuadrado redondeado revelan un borde cuadrado interior. Como en la fila de abajo, da al generador un PNG transparente solo con el símbolo y define la capa de fondo con un color o una imagen aparte en el XML adaptive-icon: así se ve limpio en cualquier forma.
No calcules con “66%”. 66 dp son un 61,1% de 108 dp, así que ajustar el logotipo al 66% central lo hace mayor que la zona segura.
Qué revisar en los iconos de Apple
Los iconos de app de iOS y watchOS no admiten transparencia, así que este generador rellena las zonas transparentes con el color de fondo elegido (blanco por defecto). Si usas un logotipo transparente, prueba con el color de tu marca. Si el original ya tiene esquinas redondeadas, el sistema vuelve a redondearlas y el color de fondo asoma en las esquinas: usa un cuadrado sin redondear.
La carpeta Xcode/AppIcon.appiconset del ZIP incluye los PNG y Contents.json y rellena los huecos al añadirla a los Assets del proyecto. Varios targets, extensiones de Watch y los nuevos iconos por capas de Apple (Icon Composer) no se configuran solos, así que revisa los avisos tras compilar.
Pasos
- Prepara un original cuadrado de al menos 1024×1024. Las imágenes rectangulares se recortan desde el centro.
- Para los iconos adaptativos de Android, prepara aparte un PNG transparente solo con el símbolo.
- Comprueba en las vistas previas que el icono se reconoce a 29 px y 40 px.
- Descarga el ZIP: añade AppIcon.appiconset a Xcode y las carpetas mipmap y los primeros planos adaptativos a Android Studio.
- Revisa la pantalla de inicio, Ajustes y las notificaciones en un dispositivo o emulador.
Errores frecuentes
- Ampliar un original pequeño: un icono de 1024 px hecho a partir de 512 px se ve borroso. El generador avisa de ello.
- Escribir el nombre de la app en el icono: el nombre ya aparece debajo.
- Llevar el logotipo hasta los bordes: los iconos adaptativos cortarán sus extremos.
- Revisar un icono blanco solo sobre blanco: míralo también en modo oscuro y sobre fondos de color.
Funcionamiento y límites de la herramienta
Todo se procesa en el navegador y el original nunca se sube. El resultado son PNG estáticos y un AppIcon.appiconset clásico. No se generan iconos temáticos monocromos de Android, iconos blancos de notificación ni las variantes oscuras y tintadas de Apple; añádelos en tus herramientas de desarrollo si los necesitas. Tener el conjunto de PNG no equivale a superar la revisión de la tienda.