Cómo crear un icono de app por capas en Mac

Crea cuatro grupos editables de profundidad, ajusta el cristal, valida los destinos activados y guarda un proyecto por capas en Assets for Xcode.

10 pasosActualizada: 12 nov 2026Obtener Assets for Xcode

El resultado: El proyecto MyIcon guardado contiene cuatro grupos editables llamados Orange Plate, Purple Plate, Blue Plate y Paper Plane.
Qué necesitas: Ten Assets for Xcode instalado en un Mac.
Prepara los gráficos del icono para cuatro grupos de profundidad: una base, dos placas de colores y un símbolo en primer plano.
Dispón de una ubicación en la que puedas guardar el proyecto editable MyIcon.

Diseña un icono de app por capas sin aplanar la ilustración antes de tiempo. Esta guía sigue el diseño del avión de papel con cuatro grupos de profundidad que aparece en la primera captura de Assets for Xcode en la App Store: añade los gráficos de origen, ajusta los materiales de cristal, configura los destinos de exportación, valida el icono y guarda un documento editable.

1.Empieza con los gráficos del icono
Abre Assets for Xcode y arrastra la primera imagen de origen a la ventana de bienvenida. También encontrarás Open Project y Create New Project; en este ejemplo, arrastra el gráfico de base al área de bienvenida para iniciar el documento editable.
Ventana de bienvenida de Assets for Xcode con los botones Open Project y Create New Project.
2.Importa y nombra la placa inferior
Después de importar la primera imagen, selecciona el grupo nuevo en Layers y llámalo Orange Plate. La vista previa del icono muestra una base de naranja a rosa en su propio grupo de profundidad editable.
Icono editable con el grupo de profundidad Orange Plate y gráficos de naranja a rosa.
3.Añade la placa morada
Selecciona la raíz del lienzo, importa la segunda imagen de origen como otro grupo de profundidad y llámalo Purple Plate. Purple Plate y Orange Plate permanecen separados en Layers.
Purple Plate añadido sobre Orange Plate en la lista Layers y en la vista previa del icono.
4.Coloca encima la placa azul
Vuelve a seleccionar la raíz del lienzo, importa la tercera imagen de origen y llama al grupo Blue Plate. Comprueba en la vista previa que el gráfico azul queda por encima de las placas morada y naranja.
Blue Plate añadido como tercer grupo de profundidad editable sobre las placas morada y naranja.
5.Completa el icono del avión de papel
Importa juntos los tres componentes SVG del avión de papel como un único grupo de profundidad, llámalo Paper Plane y asigna el nombre MyIcon al documento. La lista Layers contiene ahora cuatro grupos que puedes editar por separado.
Paper Plane sobre tres placas de colores, con cuatro grupos de profundidad nombrados en MyIcon.
6.Mantén opaco el avión de papel
Selecciona Paper Plane, abre el inspector de materiales y desactiva Glass en Material (Glass). El avión del primer plano se convierte en una forma blanca y nítida, opaca en vez de cristal translúcido.
Inspector de materiales con Glass desactivado para el grupo Paper Plane seleccionado.
7.Aplica Clear Glass al grupo azul
Selecciona Blue Plate, cambia a Elevation y ajusta Recipe a Clear Glass en el inspector de materiales. Comprueba que Glass esté activado y examina cómo se superponen los grupos en profundidad.
Vista Elevation de cuatro grupos de profundidad del icono, con Clear Glass activado para Blue Plate.
8.Activa los destinos de plataforma
Activa Apple Watch y añade Android Adaptive Icon, Windows App Icon y Icon Composer a los destinos Apple existentes. Comprueba que la barra lateral y la tira de vista previa muestren los destinos que quieres validar.
Lista de destinos que incluye Apple Watch, Android Adaptive Icon, Windows App Icon e Icon Composer.
9.Valida los destinos activados
Ejecuta la validación del icono y revisa la barra de estado inferior. En el ejemplo aparecen Apple ready, Android ready y Windows ready, con todos los tamaños necesarios generados. Corrige cualquier incidencia de los destinos antes de guardar.
Estado de validación con Apple ready, Android ready y Windows ready para los destinos activados.
10.Guarda y revisa el proyecto editable
Vuelve a Design, selecciona la raíz del documento para quitar los bordes de selección y guarda el proyecto como MyIcon.braveicon. El título MyIcon, los cuatro grupos nombrados y el indicador Saved confirman que el proyecto está guardado. La exportación de archivos finales para plataformas se realiza aparte.
Icono MyIcon completo en la vista Design con cuatro grupos editables y el estado Saved.

Después del último paso

El avión sigue siendo opaco, la capa azul usa Clear Glass y los destinos activados de Apple, Android y Windows superan la validación. Guardar el proyecto no exporta los archivos finales de las plataformas.

Consejos

Mantén cada placa en su propio grupo de Layers para poder cambiarla sin aplanar el diseño.
Usa Elevation para comprobar el orden de profundidad antes de elegir una receta de cristal.
Consulta el estado de validación de todos los destinos activados antes de guardar el documento del icono.
AtenciónEsta guía guarda el proyecto de icono editable; no exporta AppIcon.appiconset ni otros archivos finales de las plataformas.
AtenciónSi algún destino no está listo tras la validación, corrige el problema antes de exportar.