Generador de iconos de aplicación

Funciones

• El juego completo de iOS con 12 archivos, incluido el 1024 × 1024 que exige el App Store
• Cinco densidades de mipmap de Android: 48, 72, 96, 144 y 192
• Las dos capas adaptativas: un primer plano en la zona segura más un bloque de color de fondo
• Un contenedor .icns de macOS con 8 entradas de 32 a 1024 píxeles
• Forma: cuadrado redondeado (22,37%), cuadrado o círculo
• Cuatro niveles de margen para meter hacia dentro los dibujos recargados
• Aplana sobre un color opaco para cumplir con iOS, en el color que elijas
• Cada tamaño en píxeles se codifica una vez: un archivo de 120 px cubre 40@3x y 60@2x
• No se sube nada y no hay servidor de por medio

Cómo se usa

1. Parte de una imagen cuadrada con bordes limpios (1024 px o más, mejor)
2. Arrástrala y elige las plataformas, la forma y el margen
3. Todo se produce de una vez: descarga cada archivo o usa Descargar todo
4. Arrastra los PNG al AppIcon de Xcode; sustituye el icono de una app de Mac con AppIcon.icns

Preguntas frecuentes

¿Por qué los iconos de iOS necesitan un color de fondo y no puedo redondear yo las esquinas?

El fondo es porque el App Store no acepta iconos de app con canal alfa: esa subida se rechaza de plano, no es que se vea mal. Las esquinas son el caso contrario: iOS redondea el icono al mostrarlo con su propia curva, y si ya lo has redondeado antes las dos curvas no coinciden y se transparentan las esquinas. Así que los iconos de iOS que se producen aquí son cuadrados planos que parecen inacabados, y se convierten en iconos redondeados normales al instalarse.

¿Cómo uso el archivo .icns?

Es el formato de contenedor que usa macOS para los iconos de app: un archivo con imágenes de 32 a 1024 píxeles, para que el sistema elija uno nítido en las listas y en pantallas grandes. Para sustituir el icono de una app de Mac: selecciona la .app en el Finder, pulsa ⌘ + I para abrir la información y arrastra AppIcon.icns sobre el icono pequeño de la esquina superior izquierda. En desarrollo vive en la carpeta Resources de la app, y un proyecto de Xcode acepta el .icns directamente en la casilla AppIcon.

¿Por qué la salida de Android incluye dos imágenes para los iconos adaptativos?

Un icono adaptativo es una estructura de dos capas: el primer plano (el dibujo) y el fondo (el color) se entregan por separado al sistema, que luego los recorta en círculo, cuadrado redondeado o gota según lo pida el lanzador, y puede añadir paralaje y animación. Por eso el primer plano tiene que ser transparente y mantener el dibujo dentro de la zona segura central: del lienzo de 108dp solo los 72dp centrales son visibles con garantía, y un dibujo que ocupe todo el cuadrado pierde las esquinas en una máscara circular. Por eso aquí el primer plano va reducido al 66%.

¿Se sube la imagen?

No. El escalado y la codificación usan el canvas del propio navegador, y el contenedor .icns se arma con bytes en esta máquina. La imagen se queda en la memoria del dispositivo todo el tiempo y funciona sin conexión.