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.
Iconos
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
- 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
