Definir iconos y un color de tema

Artículo
04/04/2023

Los PWA instalados en Windows se pueden personalizar de la forma en que aparecen en el sistema operativo (SO). Un PWA puede definir un conjunto de iconos y un color de tema para la barra de título.

Definición de iconos

En Windows, sus iconos reconocen a los usuarios las aplicaciones. Los iconos aparecen en la barra de tareas, en el menú Inicio y en otros lugares, como la configuración del sistema.

Un PWA puede configurar qué archivos de imagen debe usar el sistema operativo para mostrar un icono en estos diversos lugares. Se pueden proporcionar varias imágenes para que el sistema operativo elija, en función del contexto.

En el archivo de manifiesto de la aplicación web, los iconos de aplicación se definen con el icons miembro :

{
    "icons": [
        {
            "src": "/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

Cada icono de la icons matriz debe incluir al menos las src propiedades y sizes . Un icono también puede tener las type propiedades y purpose .

Propiedad	Description
`src`	Ruta de acceso al archivo de imagen, que puede ser una ruta de acceso relativa desde la carpeta raíz de la aplicación o una dirección URL absoluta.
`sizes`	Una lista separada por espacios de tamaños para la que se puede usar la imagen correspondiente.
`type`	Sugerencia opcional para que el sistema operativo detecte rápidamente el tipo de imagen.
`purpose`	Una sugerencia opcional para ayudar al sistema operativo a elegir la imagen de icono correcta, en función del contexto. El valor puede ser `monochrome`, `maskable`o `any`.

Obtenga más información sobre el miembro de iconos.

Tamaños de imagen de icono

La PWA se puede mejorar en Windows proporcionando a las imágenes dimensiones específicas en el manifiesto de la aplicación web. Se recomienda elegir una de las opciones siguientes:

Nivel 1: (Compatibilidad básica con imágenes: 512x512) Esta es la imagen base desde la que se generan las imágenes que faltan.
Nivel 2: (Iconos) En este nivel, el manifiesto de la aplicación web contiene imágenes de icono para la escala de visualización predeterminada (1x). Cada una de las imágenes debe estar en formato PNG y tener el any propósito establecido. Esta es una lista de imágenes y tamaños recomendados.
- 44x44: icono de aplicación
- 71x71: icono pequeño
- 150x150 : icono medio
- 310x150: icono ancho
- 310x310: icono grande
- 50x50 : logotipo de la tienda
- 620x300: pantalla de presentación
Nivel 3: (Iconos con escalas de pantalla) En este nivel, el manifiesto de la aplicación web debe contener imágenes de icono para todos los tamaños de escala de pantalla de Windows. La escala de visualización es una configuración del usuario en Windows (los usuarios pueden cambiarla si van a Configuración>Escala de visualización>). Los iconos de manifiesto de la aplicación web deben incluir imágenes con estas dimensiones:
- 44x44: icono de aplicación
- 55x55: icono de aplicación escala de pantalla de 1,25x
- 66x66: icono de aplicación escala de pantalla de 1,5x
- 88x88: icono de aplicación escala de pantalla 2x
- 176x176: icono de aplicación escala de pantalla 4x
- 71x71: icono pequeño
- 89x89: pequeña escala de pantalla de mosaico 1,25x
- 107x107: pequeña escala de pantalla de mosaico 1,5x
- 142x142: pequeña escala de pantalla de mosaico 2x
- 284x284: pequeña escala de pantalla de mosaico 4x
- 150x150 : icono medio
- 188x188: tamaño de pantalla medio de mosaico 1,25x
- 225x225 : escala de pantalla de mosaico medio de 1,5x
- 300x300 : escala de pantalla de mosaico medio 2x
- 600x600 : escala de pantalla de mosaico medio 4x
- 310x150: icono ancho
- 388x188: escala de pantalla de mosaico ancho de 1,25x
- 465x225: escala de pantalla de mosaico ancho de 1,5x
- 620x300: escala de pantalla de mosaico ancho 2x
- 1240x600: escala de pantalla de mosaico ancho 4x
- 310x310: icono grande
- 388x388: escala de pantalla grande de mosaico 1,25x
- 465x465: escala de pantalla grande de mosaico 1,5x
- 620x620: escala de pantalla grande de mosaico 2x
- 1240x1240: escala de pantalla grande de mosaico 4x
- 50x50: icono de la tienda
- 63x63: tamaño de pantalla del icono de almacenamiento 1,25x
- 75x75: escala de pantalla del icono de almacén 1.5x
- 100x100: tamaño de pantalla del icono de almacén 2x
- 200x200: escala de pantalla del icono de almacén 4x
- 620x300: pantalla de presentación
- 775x375: pantalla de presentación escala de pantalla 1.25x
- 930x450: escala de pantalla de presentación de 1,5x
- 1240x600: pantalla de presentación escala de pantalla 2x
- 2480x1200: escala de pantalla de presentación 4x
Nivel 4 (Iconos, escalas de pantalla y tamaños de destino) En este nivel se proporcionan imágenes para iconos con escalas de pantalla e imágenes de tamaño de destino para mostrarlas en varias superficies de Windows, incluida la barra de tareas, el menú inicio, el administrador de tareas, el modificador de tareas ALT+Tab, etc. Esto proporciona la mejor experiencia para los usuarios, pero también requiere el mayor esfuerzo del desarrollador. Los iconos de manifiesto de la aplicación web deben incluir imágenes con estas dimensiones:
- 44x44: icono de aplicación
- 55x55: icono de aplicación escala de pantalla de 1,25x
- 66x66: icono de aplicación escala de pantalla de 1,5x
- 88x88: icono de aplicación escala de pantalla 2x
- 176x176: icono de aplicación escala de pantalla 4x
- 71x71: icono pequeño
- 89x89: pequeña escala de pantalla de mosaico 1,25x
- 107x107: pequeña escala de pantalla de mosaico 1,5x
- 142x142: pequeña escala de pantalla de mosaico 2x
- 284x284: pequeña escala de pantalla de mosaico 4x
- 150x150 : icono medio
- 188x188: tamaño de pantalla medio de mosaico 1,25x
- 225x225 : escala de pantalla de mosaico medio de 1,5x
- 300x300 : escala de pantalla de mosaico medio 2x
- 600x600 : escala de pantalla de mosaico medio 4x
- 310x150: icono ancho
- 388x188: escala de pantalla de mosaico ancho de 1,25x
- 465x225: escala de pantalla de mosaico ancho de 1,5x
- 620x300: escala de pantalla de mosaico ancho 2x
- 1240x600: escala de pantalla de mosaico ancho 4x
- 310x310: icono grande
- 388x388: escala de pantalla grande de mosaico 1,25x
- 465x465: escala de pantalla grande de mosaico 1,5x
- 620x620: escala de pantalla grande de mosaico 2x
- 1240x1240: escala de pantalla grande de mosaico 4x
- 50x50: icono de la tienda
- 63x63: tamaño de pantalla del icono de almacenamiento 1,25x
- 75x75: escala de pantalla del icono de almacén 1.5x
- 100x100: tamaño de pantalla del icono de almacén 2x
- 200x200: escala de pantalla del icono de almacén 4x
- 620x300: pantalla de presentación
- 775x375: pantalla de presentación escala de pantalla 1.25x
- 930x450: escala de pantalla de presentación de 1,5x
- 1240x600: pantalla de presentación escala de pantalla 2x
- 2480x1200: escala de pantalla de presentación 4x
- 16x16: tamaño de destino para la barra de tareas, menú inicio, administrador de tareas
- 20x20: tamaño de destino para la barra de tareas, menú inicio, administrador de tareas
- 24x24: tamaño de destino para la barra de tareas, menú inicio, administrador de tareas
- 30x30: tamaño de destino para la barra de tareas, menú inicio, administrador de tareas
- 32x32: tamaño de destino para la barra de tareas, menú inicio, administrador de tareas
- 36x36: tamaño de destino para la barra de tareas, el menú inicio, el administrador de tareas
- 40x40: tamaño de destino para la barra de tareas, menú inicio, administrador de tareas
- 44x44: tamaño de destino para la barra de tareas, menú inicio, administrador de tareas
- 48x48: tamaño de destino para la barra de tareas, menú inicio, administrador de tareas
- 60x60: tamaño de destino para la barra de tareas, menú inicio, administrador de tareas
- 64x64 : tamaño de destino para la barra de tareas, menú inicio, administrador de tareas
- 72x72: tamaño de destino para la barra de tareas, menú inicio, administrador de tareas
- 80x80: tamaño de destino para la barra de tareas, menú inicio, administrador de tareas
- 96x96: tamaño de destino para la barra de tareas, menú inicio, administrador de tareas
- 256x256: tamaño de destino para la barra de tareas, menú inicio, administrador de tareas

Resumen de nivel de imagen

Tenga en cuenta, por ejemplo, cómo el icono de la aplicación podría mostrar contenido diferente en función del área expuesta disponible:

Superficie pequeña: icono de aplicación (44x44) en la barra de tareas, que muestra un logotipo pequeño y abreviado:

Superficie más grande: icono medio (150x150) en el menú inicio, que muestra el logotipo completo de la aplicación:

Superficie ancha: icono ancho en el menú inicio, que muestra un icono de aplicación más articulado:

Observe cómo cambió el contenido del icono. Esto solo es posible mediante el uso de niveles más altos de compatibilidad con iconos. Se recomienda que los desarrolladores elijan niveles más altos para ofrecer la mejor experiencia a los usuarios de Windows.

Descripciones de iconos

A continuación encontrará una descripción de cada icono de aplicación y dónde se muestran en Windows.

Icono de aplicación normal que se muestra en el menú inicio, la barra de tareas o el administrador de tareas.

44x44
55x55 (escala de 1,25x)
66x66 (escala de 1,5x)
88x88 (escala de 2x)
176x176 (escala 4x)

El icono pequeño se muestra en el menú inicio cuando el usuario establece el icono de la aplicación en un tamaño pequeño.

71x71
89x89 (escala de 1,25x)
107x107 (escala de 1,5x)
142x142 (escala de 2x)
284x284 (escala 4x)

El icono de icono medio se muestra en el menú inicio cuando el usuario establece el icono de la aplicación en tamaño medio.

150x150
188x188 (escala de 1,25x)
225x225 (escala de 1,5x)
300x300 (escala de 2x)
600x600 (escala 4x)

El icono de icono ancho se muestra en el menú inicio cuando el usuario establece el icono de la aplicación en un tamaño amplio.

310x150
388x188 (escala de 1,25x)
465x225 (escala de 1,5x)
620x300 (escala de 2x)
1240x600 (escala 4x)

El icono de icono grande está en el menú inicio cuando el usuario establece el icono de la aplicación en un tamaño grande.

310x310
388x388 (escala de 1,25x)
465x465 (escala de 1,5x)
620x620 (escala de 2x)
1240x1240 (escala 4x)

El icono del logotipo de la tienda se muestra en el instalador de la aplicación, el Centro de partners de Windows, la opción "Informar de una aplicación" en la Tienda y la opción "Escribir una revisión" en la Tienda.

50x50
63x63 (escala de 1,25x)
75x75 (escala de 1,5x)
100x100 (escala de 2x)
200x200 (escala 4x)

El recurso de pantalla de presentación se muestra como la pantalla de presentación de la aplicación. Actualmente solo se admite en el paquete clásico. En el futuro, también podemos agregar compatibilidad con el paquete de aplicaciones hospedadas modernas.

620x300
775x375 (escala de 1,25x)
930x450 (escala de 1,5x)
1240x600 (escala de 2x)
2480x1200 (escala 4x)

Imágenes de tamaño de destino

Además de los tamaños de factor de escala estándar descritos anteriormente, también se recomienda crear recursos de "tamaño de destino". Llamamos a estos recursos tamaño de destino porque tienen como destino tamaños específicos, como 16 píxeles, en lugar de factores de escala específicos, como 400. Los recursos de tamaño de destino son para superficies de Windows que no usan el sistema de escalado de mesetas.

Por ejemplo, la opción Aplicaciones & características de Windows usa iconos de aplicación con tamaños específicos.

16x16 (recomendado)
20x20
24x24 (recomendado)
30x30
32x32 (recomendado)
36x36
40x40
48x48 (recomendado)
60x60
64x64
72x72
80x80
96x96
256x256 (recomendado)

Elegir un color de tema

En Windows, los PWA tienen su propia ventana de aplicación, con una barra de título que contiene el nombre de la aplicación y el sistema cierra, maximiza y minimiza los iconos.

El contenido web creado por la PWA rellena todo el área expuesta de la ventana, excepto el área de la barra de título, que se puede personalizar con un color de tema.

En la imagen siguiente se muestra el aspecto de la barra de título de una PWA cuando no se usa un color de tema y cuando se usa un color de tema que coincide con el color principal de la aplicación:

Para definir un color de tema, use el miembro del manifiesto de la theme_color aplicación web:

{
    "theme_color": "#0d4c73"
}

Las páginas web individuales también pueden definir un color de tema mediante la theme-color metaetiqueta. Cuando esta metaetiqueta está presente en la página, su color definido invalida el color que se encuentra en el manifiesto de la aplicación web.

Mostrar contenido de la aplicación en el área de la barra de título

Puede mostrar el contenido de la aplicación en el área de la barra de título mediante la característica Superposición de controles de ventana. Vea Mostrar contenido en el área de la barra de título mediante superposición de controles de ventana.

Compartir a través de