Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Un diagrama, que muestra varias ubicaciones de iconos, en Windows 11.
Una vez que hayas diseñado el icono de la aplicación, debes crear los propios archivos de icono. Dado que Windows admite varios temas, resoluciones de pantalla y factores de escala, debe proporcionar varias versiones del icono para asegurarse de que tiene un aspecto excelente en todos los dispositivos, 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 la configuración de escala de visualización del usuario. En la tabla siguiente se enumeran todos los tamaños posibles que Windows pueden usar para mostrar el icono.
Tamaños de icono (Win32)
Los archivos ICO de Windows han existido durante mucho tiempo. Hay tamaños estándar que se usan, que es un subconjunto del conjunto completo anterior.
Escalado de iconos
Cuando Windows muestra el icono de la aplicación, buscará primero una coincidencia exacta de tamaño. Si no hay ninguna coincidencia exacta, buscará el siguiente tamaño superior y reducirá la escala. Incluir más tamaños de icono con la aplicación significa que Windows a menudo tendrá una coincidencia perfecta de píxeles y reducirá la cantidad de escalado aplicado 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 px | 20 px | 24px | 32px | 40px | 48px | 64px |
| Barra de tareas, resultados de búsqueda, Iniciar toda la lista de aplicaciones | 24px | 30 píxeles | 36 píxeles | 48px | 60 píxeles | 72px | 96 px |
| Anclajes de inicio | 32px | 40px | 48px | 64px | 80px | 96 px | 256px |
Nota:
Las aplicaciones deben tener, como mínimo: 16x16, 24x24, 32x32, 48x48 y 256x256. Esto cubre los tamaños de icono más comunes y, al proporcionar un icono de 256px, garantiza que Windows solo debe reducir verticalmente el icono, nunca hacia arriba.
Cómo se relacionan los tamaños de icono con el manifiesto MSIX
Si has visto el manifiesto MSIX (o AppX) de la aplicación, es posible que hayas observado entradas como Square44x44Logo y Square150x150Logo. Estos son tamaños base, no los únicos tamaños que necesita la aplicación. Windows usa factores de escala de visualización para determinar las dimensiones de píxel reales que solicita en tiempo de ejecución. El manifiesto apunta a un nombre de archivo de imagen base (por ejemplo, Square44x44Logo.png) y proporciona variantes preescaladas mediante calificadores (por ejemplo, Square44x44Logo.scale-200.png). Windows elige entonces la opción que mejor se adapta a la configuración de pantalla del usuario.
En la tabla siguiente se muestra cómo cada entrada del manifiesto se corresponde con tamaños reales en píxeles en cada factor de escala:
| Entrada del manifiesto | Tamaño base | 100 % | 125% | 150% | 200% | 250% | 300% | 400% |
|---|---|---|---|---|---|---|---|---|
| Square44x44Logo | 44 px | 44 px | 55 px | 66 px | 88 px | 110 px | 132 px | 176 px |
| Cuadrado150x150Logo | 150 px | 150 px | 188 px | 225 px | 300 px | 375 px | 450 px | 600 px |
| Ancho310x150Logo | 310×150 px | 310×150 px | 388×188 px | 465×225 px | 620×300 px | 775×375 px | 930×450 px | 1240×600 px |
| Square310x310Logo | 310 px | 310 px | 388 px | 465 px | 620 px | 775 px | 930 px | 1240 px |
| Square71x71Logo | 71 px | 71 px | 89 px | 107 px | 142 px | 178 px | 213 px | 284 px |
| Logotipo de la tienda | 50 px | 50 px | 63 px | 75 px | 100 px | 125 px | 150 px | 200 px |
El icono de lista de aplicaciones también admite variantes de tamaño de destino (enumeradas en la sección Icono de aplicación siguiente), que Windows usa para iconos de la barra de tareas, menús contextuales y otros elementos de la interfaz de usuario donde se muestra el icono sin relleno de iconos. Los recursos de tamaño de destino se especifican en dimensiones exactas de píxeles (16, 24, 32, 48, 256 y otros) en lugar de factores de escala.
Tip
No es necesario crear todos los tamaños posibles. Como mínimo, proporcione recursos a escala del 100 %, 200 % y 400 % para las entradas Square44x44Logo y Square150x150Logo, además de las variantes del tamaño de destino enumeradas en la sección Icono de aplicación. Windows elige el recurso disponible más cercano para los factores de escala intermedios (125%, 150%, 250%y 300%).
Para obtener el esquema de manifiesto completo, consulte VisualElements.
Fondos transparentes
Los iconos se ven mejor con un fondo transparente. Si el diseño de marca de tu aplicación requiere que el icono se coloque sobre un fondo, no hay problema. 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, puedes proporcionar una versión del icono de la aplicación plateada en dos fondos diferentes, uno más adecuado para un tema claro y el otro para un tema oscuro.
Lista completa de iconos y variaciones
Windows utiliza diferentes recursos de icono en distintos contextos de interfaz de usuario. El uso ha cambiado un poco entre Windows 10 y Windows 11.
Las listas siguientes definen los nombres de archivo específicos Windows espera contener 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 pins de inicio, la lista de todas las aplicaciones y la lista de resultados de 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 Light (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.
Azulejos
Windows 10 admite cuatro tamaños de mosaico: pequeño, mediano, ancho y grande.
Tema predeterminado o 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 tu aplicación es compatible con Windows 10 y 11, se recomienda incluir tantos elementos 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.
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-colorido_tema-oscuro.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
Iconos de distintivo se usan en la pantalla de bloqueo de Windows 10 y para la mayoría de las aplicaciones no son necesarios.
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 o 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
Colaborar con nosotros en GitHub
El origen de este contenido se puede encontrar en GitHub, donde también puede crear y revisar problemas y solicitudes de incorporación de cambios. Para más información, consulte nuestra guía para colaboradores.
