Compositor de iconos de Apple: cómo usarlo

Apple ahora incluye un Icon Composer moderno para crear iconos de aplicaciones preparados para Liquid Glass, junto con los catálogos de recursos de Xcode, iconutil para macOS .icns, y la aplicación SF Symbols para glifos dentro de la aplicación. Mapearemos toda la cadena de herramientas, mostraremos flujos de trabajo rápidos y señalaremos los errores comunes de App Store Connect.

¿Para quién es esto?

Desarrolladores y diseñadores que necesitan:

1) conjuntos de AppIcon listos para producción para plataformas Apple,
2) iconos .icns para aplicaciones y herramientas de Mac, y
3) recursos de símbolos que se alinean con el lenguaje de diseño de San Francisco y Apple a través de SF Symbols. Si estás configurando un flujo de trabajo de diseño a código (Figma/Sketch → Xcode), esto te ahorrará horas.

Para kits de interfaz de usuario, consulta el kit de interfaz de usuario de iOS/iPadOS de Apple para Figma y la cobertura de MacObserver. (Mac Observer)

TL;DR: ¿Qué herramienta cuándo?

• Icon Composer (gratis, Apple): Crea iconos de aplicaciones compatibles con Liquid Glass; exporta directamente a conjuntos AppIcon. Lo mejor para iconos de iOS/iPadOS/watchOS/tvOS/visionOS que envías con tu aplicación.
• Catálogos de recursos de Xcode (gratis): Donde vive tu AppIcon.appiconset; Xcode valida tamaños, nombres y compilaciones. Consulta los documentos del catálogo de recursos de Apple.
• iconutil (CLI gratuita): Convierte una carpeta .iconset → .icns para aplicaciones/herramientas de macOS. El uso oficial está en la documentación de Apple.
• Aplicación SF Symbols (gratis, Apple): Símbolos alineados con el sistema (no iconos de aplicaciones) con funciones de animación/degradado en SF Symbols 7, ideal para barras de pestañas, barras de herramientas e interfaz de usuario de estado.

Inicio rápido (más común): icono de aplicación iOS/iPadOS en 10 minutos

1. Diseña la base: Crea un PNG cuadrado de 1024×1024 (sin alfa), teniendo en cuenta los reflejos de Liquid Glass. Si necesitas las últimas referencias visuales de Apple, obtén los recursos de diseño de Apple y el resumen de actualizaciones de diseño de iOS 26 de MacObserver.
   
2. Abre Icon Composer: Inicia un nuevo proyecto de iOS/iPadOS, coloca tu imagen de 1024, ajusta la profundidad/iluminación si estás utilizando los ajustes preestablecidos de Liquid Glass y exporta un conjunto AppIcon. (Icon Composer se dirige al enmascaramiento moderno/radios de esquina utilizados en el dispositivo).
   
3. Añade a Xcode: En Xcode, selecciona tu catálogo de recursos (Images.xcassets) → + → Iconos de aplicación y estante superior (o específico de la plataforma). Arrastra las imágenes exportadas a los contenedores correctos. La guía de Apple “Configurar el icono de tu aplicación” muestra el flujo exacto.
   
4. Verifica la configuración de compilación: Asegúrate de que ASSETCATALOG_COMPILER_APPICON_NAME apunte a tu conjunto (p. ej., AppIcon). Consulta la referencia de la configuración de compilación.
   
5. Archiva y valida: Envía a TestFlight/App Store. Si App Store Connect se queja de un icono de marketing de 1024 px faltante o de un espacio específico, soluciónalo en tu conjunto AppIcon; los mensajes de validación comunes están documentados en los foros de Apple.

¿Quieres información general sobre la dirección del icono de Apple y por qué se ven diferentes en este ciclo? Consulta la cobertura del rediseño de iconos de MacObserver y el tintado de “matemáticas inteligentes” para el modo oscuro para comprender cómo la óptica del sistema afecta a tu icono. (Mac Observer)

Iconos de aplicaciones de macOS (.icns) de la manera correcta (compositor de iconos → iconutil)

1. Crea una carpeta .iconset: Dentro de MyApp.iconset, incluye PNG con estos tamaños (1× y 2×): 16, 32, 128, 256, 512 (macOS escalará más allá).
2. Genera el .icns:

iconutil -c icns -o MyApp.icns MyApp.iconset

Los documentos de alta resolución de Apple muestran tanto la línea única como la inversa (icns → iconset) para la depuración.

3) Añade a la aplicación: En tu destino de macOS, establece el icono de la aplicación en MyApp.icns (o colócalo en el paquete de la aplicación y haz referencia desde Info). Xcode también puede generar .icns automáticamente desde un conjunto AppIcon si prefieres quedarte solo con la GUI.

Consejo: Si tu .icns se ve borroso, comprueba que los PNG de origen no estén aumentados; utiliza vectores dibujados de forma nativa. (Bonus: sips puede cambiar el tamaño por lotes durante las compilaciones).

Especificidades de watchOS, visionOS, tvOS (lo que realmente cambia)

• Las ranuras difieren según la plataforma: Xcode mostrará los tamaños y apariencias requeridos de la plataforma. Cíñete a los catálogos de recursos; mantienen las máscaras y las rondas correctas por clase de dispositivo.
  
• El icono de marketing es universal: Aún necesitas un PNG 1024×1024 en el conjunto AppIcon para los envíos; si falta, bloqueará las cargas. Las notas de validación de Apple lo señalan.
  
• Intención de diseño: visionOS/tvOS favorecen la claridad a escalas y distancias mayores; los iconos de watchOS necesitan un alto contraste en tamaños pequeños. Para obtener kits de diseño y patrones de plataforma actualizados, consulta los recursos de diseño de Apple y las piezas de diseño de visionOS/iOS de MacObserver.

Símbolos SF vs. iconos de aplicaciones (no los mezcles)

• Los iconos de aplicaciones identifican tu aplicación en la pantalla de inicio, la biblioteca de aplicaciones, Spotlight y la tienda.
• Los símbolos SF son glifos dentro de la aplicación que se alinean con San Francisco, se escalan con Dynamic Type y (a partir de la v7) admiten animaciones de dibujo y degradados. Utiliza la aplicación SF Symbols para navegar, exportar SVG o crear conjuntos de imágenes de símbolos en Xcode. Consulta el HIG para SF Symbols de Apple y la sesión WWDC25 “Novedades en SF Symbols 7”.

Iconos alternativos y temas (iOS/macOS)

• iOS/iPadOS: Añade conjuntos AppIcon adicionales en tu catálogo de recursos e implementa setAlternateIconName en tiempo de ejecución. Valida que el icono primario permanezca completo; los errores de App Store Connect a menudo significan un tamaño faltante en el conjunto principal. Los hilos del foro de Apple muestran mensajes de error típicos.
• macOS: Puedes enviar alternativas, pero la mayoría de las aplicaciones de Mac se quedan con un solo .icns para la coherencia con Spotlight/Quick Look.

Automatización: exportaciones con un solo clic (compatibles con CI)

• De vectores a todos los tamaños: Mantén un solo maestro vectorial (Figma/Sketch). Exporta 1024×1024, luego deja que Icon Composer produzca conjuntos de plataforma. Para las compilaciones de macOS, haz que CI ejecute iconutil en un .iconset registrado. (Apple Developer)
• Puerta de calidad: Añade un script para fallar la compilación si alguna ranura de AppIcon está vacía o si falta el icono de marketing de 1024; esto evita los rechazos de App Store Connect más adelante. Las notas de validación de Apple en los foros enumeran el texto de error exacto. (Apple Developer)

Solución de problemas (soluciones rápidas)

• “Falta el icono de marketing de 1024×1024”. Añade la imagen de 1024 al contenedor Cualquier apariencia de tu conjunto AppIcon. Vuelve a archivar. (Apple Developer)
• Los iconos se ven borrosos en Mac. Reconstruye tu .iconset con PNG verdaderos de 1×/2×; regenera .icns con iconutil. (Apple Developer)
• Icono incorrecto en tiempo de ejecución. Confirma que ASSETCATALOG_COMPILER_APPICON_NAME coincida con el nombre de tu conjunto AppIcon. (Apple Developer)
• Kits de diseño desactualizados. Vuelve a descargar los recursos de diseño y los símbolos SF de Apple; MacObserver realiza un seguimiento de cuándo Apple actualiza estos paquetes. (Apple Developer)

Preguntas frecuentes

¿Está el Icon Composer de Apple reemplazando a los generadores de terceros? Para la mayoría de los equipos, sí. Entiende las máscaras, los radios y Liquid Glass actuales, por lo que las exportaciones aterrizan correctamente en Xcode. Aún puedes crear a mano con Photoshop/Affinity y simplemente usar Icon Composer/Xcode para empaquetar. (Apple Developer)
¿Todavía necesito .icns en macOS? Sí, tu paquete lleva un solo .icns (o Xcode lo genera a partir de tu conjunto AppIcon). iconutil sigue siendo el convertidor canónico. (Apple Developer)
¿Dónde obtengo símbolos/glifos oficiales? La aplicación SF Symbols. Es gratuita y se actualiza (v7) con animaciones/degradados; MacObserver cubre con frecuencia estas actualizaciones. (Apple Developer)

Lectura relacionada (MacObserver)

• Apple lanza recursos de diseño actualizados para iOS 26, iPadOS 26 y macOS Tahoe 26: qué cambió para diseñadores y desarrolladores. (Mac Observer)
• Apple lanza un kit de interfaz de usuario de iOS e iPadOS actualizado para Figma: ideal para el encuadre de iconos y la coherencia de la cuadrícula antes de exportar a Icon Composer. (Mac Observer)
• La dirección del icono de Apple hacia iOS 19: contexto sobre formas, contraste y el movimiento hacia Liquid Glass. (Mac Observer)

Resumen (lista de verificación para copiar/pegar)

1. Diseña la obra de arte base de 1024×1024 →
2. Utiliza Icon Composer para generar conjuntos de plataforma →
3. Añade a Images.xcassets en Xcode; establece ASSETCATALOG_COMPILER_APPICON_NAME →
4. Para Mac, crea .iconset y ejecuta iconutil -c icns →
5. Valida (busca el requisito del icono de marketing de 1024 px) →
6. Envía.

Si quieres, puedo adaptar una plantilla lista para el equipo (configuración de exportación de Figma + ajustes preestablecidos de Icon Composer + esqueleto de catálogo de recursos de Xcode) que coincida con tus plataformas y configuración de CI.