Construcción del icono de la aplicación de Windows

Una vez que haya diseñado el icono de la aplicación, debe crear los propios archivos de icono. Dado que Windows admite varios temas, resoluciones de visualización y factores de escala, debe proporcionar varias versiones del icono para asegurarse de que tiene el mejor aspecto posible en todos los dispositivos y en cualquier tamaño.

Tamaños de icono (WPF, UWP, WinUI)

Windows mostrará el icono de la aplicación en una variedad de tamaños en función de dónde se muestre el icono y de la configuración de escalado de la pantalla del usuario. En la tabla siguiente se enumeran todos los tamaños posibles que Windows puede usar para mostrar el icono.

Tamaños de icono (Win32)

Los archivos ICO de Windows han estado presentes durante mucho tiempo. Los tamaños estándar que se usan, son un subconjunto del conjunto completo anterior.

Escalado de iconos

Cuando Windows muestre el icono de la aplicación, buscará una coincidencia exacta en primer lugar. Si no hay ninguna coincidencia exacta, buscará el siguiente tamaño superior y lo reducirá verticalmente. Incluir más tamaños de icono con la aplicación significa que Windows tendrá más a menudo una coincidencia perfecta de píxeles y reducirá la cantidad de escalado que se aplicará a los iconos escalados.

Factor de escala de Windows 11	100 %	125%	150%	200%	250 %	300 %	400%
Menú contextual, barra de título, bandeja del sistema	16 píxeles	20 píxeles	24 píxeles	32 píxeles	40px	48 píxeles	64 píxeles
Barra de tareas, resultados de la búsqueda, Iniciar toda la lista de aplicaciones	24 píxeles	30 píxeles	36 píxeles	48 píxeles	60 píxeles	72 píxeles	96 píxeles
Anclajes de inicio	32 píxeles	40px	48 píxeles	64 píxeles	80 píxeles	96 píxeles	256 píxeles

Nota:

Las aplicaciones deben tener, como mínimo, un tamaño de: 16x16, 24x24, 32x32, 48x48 y 256x256. Esto cubre los tamaños de icono más comunes y, al proporcionar un icono de 256 px, garantiza que Windows solo reduzca verticalmente el icono y no lo escale nunca verticalmente.

Fondos transparentes

Los iconos se ven mejor con un fondo transparente. Si la personalización de marca de la aplicación requiere que el icono se ilustre en un fondo, también funcionará bien. Sin embargo, tendrá que volver a implementar algunas funcionalidades de creación de temáticas que los iconos transparentes obtienen de forma gratuita. Por ejemplo, puede proporcionar una versión del icono de la aplicación ilustrada en dos fondos diferentes: uno que sea más adecuado para un tema claro y el otro para un tema oscuro.

Lista completa de iconos y variaciones

Windows usa diferentes recursos de icono en distintos contextos de UI. El uso ha cambiado un poco entre Windows 10 y Windows 11.

Las listas siguientes definen los nombres de archivo específicos en los que Windows debe guardar cada icono correspondiente.

Icono de aplicación

En Windows 10 y 11, el icono AppList es el icono principal de la aplicación. Se usará en varios lugares, como la barra de tareas, los anclajes de inicio, la lista de todas las aplicaciones y la lista de resultados de la búsqueda. Windows 11 selecciona un icono adecuado para la lista de todas las aplicaciones en función del factor de escala actual, pero Windows 10 usa iconos específicos definidos explícitamente si los proporciona.

Se requieren archivos independientes para las tres variaciones de tema (valor predeterminado, tema claro, tema oscuro), incluso si el icono es el mismo. Si no proporciona estos archivos, el icono aparecerá en una placa de icono del sistema para garantizar una relación de contraste mínima.

Tamaño de destino de la lista de aplicaciones (obligatorio)

• AppList.targetsize-16.png
• AppList.targetsize-20.png
• AppList.targetsize-24.png
• AppList.targetsize-30.png
• AppList.targetsize-32.png
• AppList.targetsize-36.png
• AppList.targetsize-40.png
• AppList.targetsize-48.png
• AppList.targetsize-60.png
• AppList.targetsize-64.png
• AppList.targetsize-72.png
• AppList.targetsize-80.png
• AppList.targetsize-96.png
• AppList.targetsize-256.png

Tema oscuro (obligatorio)

• AppList.targetsize-16_altform-unplated.png
• AppList.targetsize-20_altform-unplated.png
• AppList.targetsize-24_altform-unplated.png
• AppList.targetsize-30_altform-unplated.png
• AppList.targetsize-32_altform-unplated.png
• AppList.targetsize-36_altform-unplated.png
• AppList.targetsize-40_altform-unplated.png
• AppList.targetsize-48_altform-unplated.png
• AppList.targetsize-60_altform-unplated.png
• AppList.targetsize-64_altform-unplated.png
• AppList.targetsize-72_altform-unplated.png
• AppList.targetsize-80_altform-unplated.png
• AppList.targetsize-96_altform-unplated.png
• AppList.targetsize-256_altform-unplated.png

Tema claro (obligatorio)

• AppList.targetsize-16_altform-lightunplated.png
• AppList.targetsize-20_altform-lightunplated.png
• AppList.targetsize-24_altform-lightunplated.png
• AppList.targetsize-30_altform-lightunplated.png
• AppList.targetsize-32_altform-lightunplated.png
• AppList.targetsize-36_altform-lightunplated.png
• AppList.targetsize-40_altform-lightunplated.png
• AppList.targetsize-48_altform-lightunplated.png
• AppList.targetsize-60_altform-lightunplated.png
• AppList.targetsize-64_altform-lightunplated.png
• AppList.targetsize-72_altform-lightunplated.png
• AppList.targetsize-80_altform-lightunplated.png
• AppList.targetsize-96_altform-lightunplated.png
• AppList.targetsize-256_altform-lightunplated.png

Escala de lista de aplicaciones (Windows 10) (opcional)

• AppList.scale-100.png
• AppList.scale-125.png
• AppList.scale-150.png
• AppList.scale-200.png
• AppList.scale-400.png

Tema claro (Windows 10) (opcional)

• AppList.scale-100_altform-colorful_theme-light.png
• AppList.scale-125_altform-colorful_theme-light.png
• AppList.scale-150_altform-colorful_theme-light.png
• AppList.scale-200_altform-colorful_theme-light.png
• AppList.scale-400_altform-colorful_theme-light.png

Nota:

Si no incluye los recursos de targetsize-*-altform-unplated encima del icono, se escalará a un tamaño menor y se agregará una placa trasera no deseada detrás del icono en la barra de tareas y el inicio.

Mosaicos

Windows 10 admite cuatro tamaños de mosaico: pequeño, mediano, ancho y grande.

Tema predeterminado u oscuro (parcialmente necesario)

• SmallTile.scale-100.png
• SmallTile.scale-125.png
• SmallTile.scale-150.png
• SmallTile.scale-200.png
• SmallTile.scale-400.png

• MedTile.scale-100.png
• MedTile.scale-125.png
• MedTile.scale-150.png
• MedTile.scale-200.png
• MedTile.scale-400.png

• WideTile.scale-100.png
• WideTile.scale-125.png
• WideTile.scale-150.png
• WideTile.scale-200.png
• WideTile.scale-400.png

• LargeTile.scale-100.png
• LargeTile.scale-125.png
• LargeTile.scale-150.png
• LargeTile.scale-200.png
• LargeTile.scale-400.png

Tema claro (opcional)

• SmallTile.scale-100_altform-colorful_theme-light.png
• SmallTile.scale-125_altform-colorful_theme-light.png
• SmallTile.scale-150_altform-colorful_theme-light.png
• SmallTile.scale-200_altform-colorful_theme-light.png
• SmallTile.scale-400_altform-colorful_theme-light.png

• MedTile.scale-100_altform-colorful_theme-light.png
• MedTile.scale-125_altform-colorful_theme-light.png
• MedTile.scale-150_altform-colorful_theme-light.png
• MedTile.scale-200_altform-colorful_theme-light.png
• MedTile.scale-400_altform-colorful_theme-light.png

• WideTile.scale-100_altform-colorful_theme-light.png
• WideTile.scale-125_altform-colorful_theme-light.png
• WideTile.scale-150_altform-colorful_theme-light.png
• WideTile.scale-200_altform-colorful_theme-light.png
• WideTile.scale-400_altform-colorful_theme-light.png

• LargeTile.scale-100_altform-colorful_theme-light.png
• LargeTile.scale-125_altform-colorful_theme-light.png
• LargeTile.scale-150_altform-colorful_theme-light.png
• LargeTile.scale-200_altform-colorful_theme-light.png 8 LargeTile.scale-400_altform-colorful_theme-light.png

Nota:

Windows 11 no usa los recursos de mosaico, pero actualmente, como mínimo, los recursos del mosaico mediano al 100 % son necesarios para publicar en Microsoft Store. Si la aplicación es compatible con Windows 10 y 11, se recomienda incluir tantos recursos de mosaico como sea posible.

Pantalla de presentación

Las pantallas de presentación también pueden ser compatibles con temas claros y oscuros, como los recursos del icono de la aplicación.

Valor predeterminado

• SplashScreen.scale-100.png
• SplashScreen.scale-125.png
• SplashScreen.scale-150.png
• SplashScreen.scale-200.png
• SplashScreen.scale-400.png

Tema oscuro (opcional)

• SplashScreen.scale-100_altform-colorful_theme-dark.png
• SplashScreen.scale-125_altform-colorful_theme-dark.png
• SplashScreen.scale-150_altform-colorful_theme-dark.png
• SplashScreen.scale-200_altform-colorful_theme-dark.png
• SplashScreen.scale-400_altform-colorful_theme-dark.png

Tema claro (opcional)

• SplashScreen.scale-100_altform-colorful_theme-light.png
• SplashScreen.scale-125_altform-colorful_theme-light.png
• SplashScreen.scale-150_altform-colorful_theme-light.png
• SplashScreen.scale-200_altform-colorful_theme-light.png
• SplashScreen.scale-400_altform-colorful_theme-light.png

Logotipo de distintivo

Los iconos de insignia se usan en la pantalla de bloqueo de Windows 10 y no se requieren en la mayoría de las aplicaciones.

Windows 10 (opcional)

• BadgeLogo.scale-100.png
• BadgeLogo.scale-125.png
• BadgeLogo.scale-150.png
• BadgeLogo.scale-200.png
• BadgeLogo.scale-400.png

Logotipo del paquete (logotipo de Microsoft Store)

Estos recursos son necesarios para publicar en Microsoft Store.

Tema predeterminado u oscuro (obligatorio)

• StoreLogo.scale-100.png
• StoreLogo.scale-125.png
• StoreLogo.scale-150.png
• StoreLogo.scale-200.png
• StoreLogo.scale-400.png

Tema claro (opcional)

• StoreLogo.scale-100_altform-colorful_theme-light.png
• StoreLogo.scale-125_altform-colorful_theme-light.png
• StoreLogo.scale-150_altform-colorful_theme-light.png
• StoreLogo.scale-200_altform-colorful_theme-light.png
• StoreLogo.scale-400_altform-colorful_theme-light.png