Definir ícones e uma cor do tema

Artigo
04/04/2023

PwAs instaladas no Windows podem ser personalizadas da maneira como aparecem no sistema operacional (sistema operacional). Um PWA pode definir um conjunto de ícones e uma cor do tema para a barra de título.

Definir ícones

No Windows, os aplicativos são reconhecíveis aos usuários por seus ícones. Os ícones aparecem na barra de tarefas, no Menu Iniciar e em outros locais, como configurações do sistema.

Um PWA pode configurar quais arquivos de imagem o sistema operacional deve usar para exibir um ícone nesses vários lugares. Várias imagens podem ser fornecidas para que o sistema operacional escolha, dependendo do contexto.

No arquivo de manifesto do aplicativo Web, os ícones do aplicativo são definidos com o icons membro:

{
    "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 ícone na icons matriz deve vir com pelo menos as src propriedades e sizes . Um ícone também pode ter as type propriedades e purpose .

Propriedade	Descrição
`src`	O caminho para o arquivo de imagem, que pode ser um caminho relativo da pasta raiz do aplicativo ou uma URL absoluta.
`sizes`	Uma lista separada por espaço de tamanhos para os quais a imagem correspondente pode ser usada.
`type`	Uma dica opcional para o sistema operacional detectar rapidamente o tipo de imagem.
`purpose`	Uma dica opcional para ajudar o sistema operacional a escolher a imagem de ícone certa, dependendo do contexto. O valor pode ser `monochrome`, `maskable`ou `any`.

Saiba mais sobre o membro de ícones.

Tamanhos de imagem de ícone

Seu PWA pode ser aprimorado no Windows fornecendo as imagens com dimensões específicas no manifesto do aplicativo Web. Recomendamos escolher uma das opções abaixo:

Nível 1: (Suporte básico à imagem: 512x512) Esta é a imagem base da qual gerar imagens ausentes.
Nível 2: (Blocos) Neste nível, o manifesto do aplicativo Web contém imagens de bloco para a escala de exibição padrão (1x). Cada uma das imagens deve estar no formato PNG e ter o conjunto de any finalidades. Aqui está uma lista de imagens e tamanhos recomendados.
- 44x44 – ícone do aplicativo
- 71x71 - bloco pequeno
- 150x150 – bloco médio
- 310x150 – bloco largo
- 310x310 - bloco grande
- 50x50 – logotipo da loja
- 620x300 - tela de respingo
Nível 3: (Blocos com dimensionamentos de exibição) Neste nível, o manifesto do aplicativo Web deve conter imagens de bloco para todos os tamanhos de escala de exibição do Windows. A escala de exibição é uma configuração do usuário no Windows (os usuários podem alterá-la indo para Configurações>Dimensionar Exibição>). Os ícones do manifesto do aplicativo Web devem incluir imagens com estas dimensões:
- 44x44 – ícone do aplicativo
- 55x55 – escala de exibição do ícone do aplicativo 1,25x
- 66x66 – escala de exibição do ícone do aplicativo 1,5x
- 88x88 – escala de exibição do ícone do aplicativo 2x
- 176x176 – escala de exibição do ícone do aplicativo 4x
- 71x71 - bloco pequeno
- 89x89 – pequena escala de exibição de bloco 1.25x
- 107x107 – escala de exibição de bloco pequeno 1,5x
- 142x142 - pequena escala de exibição de bloco 2x
- 284x284 - pequena escala de exibição de bloco 4x
- 150x150 – bloco médio
- 188x188 – escala de exibição do bloco médio 1.25x
- 225x225 - escala de exibição do bloco médio 1,5x
- 300x300 – escala de exibição de bloco médio 2x
- 600x600 - escala de exibição de bloco médio 4x
- 310x150 – bloco largo
- 388x188 – escala de exibição do bloco largo 1.25x
- 465x225 - escala de exibição de bloco largo 1,5x
- 620x300 - escala de exibição de bloco largo 2x
- 1240x600 – escala de exibição de bloco largo 4x
- 310x310 - bloco grande
- 388x388 - grande escala de exibição de bloco 1.25x
- 465x465 - grande escala de exibição do bloco 1.5x
- 620x620 - grande escala de exibição de bloco 2x
- 1240x1240 - grande escala de exibição do bloco 4x
- 50x50 – bloco de armazenamento
- 63x63 – escala de exibição do bloco de armazenamento 1,25x
- 75x75 – escala de exibição do bloco de armazenamento 1,5x
- 100x100 – escala de exibição do bloco de armazenamento 2x
- 200x200 – escala de exibição do bloco de armazenamento 4x
- 620x300 - tela de respingo
- 775x375 – escala de exibição de tela de 1,25x
- 930x450 - escala de exibição de tela de respingo 1,5x
- 1240x600 - escala de exibição de tela 2x de respingo
- 2480x1200 - escala de exibição de tela de respingo 4x
Nível 4 (Blocos, dimensionamentos de exibição e tamanhos de destino) Neste nível, você fornece imagens para blocos com dimensionamentos de exibição e imagens de tamanho de destino para exibição em várias superfícies no Windows, incluindo barra de tarefas, menu iniciar, gerenciador de tarefas, comutador de tarefas ALT+Tab e muito mais. Isso fornece a melhor experiência para seus usuários, mas também requer o maior esforço do desenvolvedor. Os ícones do manifesto do aplicativo Web devem incluir imagens com estas dimensões:
- 44x44 – ícone do aplicativo
- 55x55 – escala de exibição do ícone do aplicativo 1,25x
- 66x66 – escala de exibição do ícone do aplicativo 1,5x
- 88x88 – escala de exibição do ícone do aplicativo 2x
- 176x176 – escala de exibição do ícone do aplicativo 4x
- 71x71 - bloco pequeno
- 89x89 – pequena escala de exibição de bloco 1.25x
- 107x107 – escala de exibição de bloco pequeno 1,5x
- 142x142 - pequena escala de exibição de bloco 2x
- 284x284 - pequena escala de exibição de bloco 4x
- 150x150 – bloco médio
- 188x188 – escala de exibição do bloco médio 1.25x
- 225x225 - escala de exibição do bloco médio 1,5x
- 300x300 – escala de exibição de bloco médio 2x
- 600x600 - escala de exibição de bloco médio 4x
- 310x150 – bloco largo
- 388x188 – escala de exibição do bloco largo 1.25x
- 465x225 - escala de exibição de bloco largo 1,5x
- 620x300 - escala de exibição de bloco largo 2x
- 1240x600 – escala de exibição de bloco largo 4x
- 310x310 - bloco grande
- 388x388 - grande escala de exibição de bloco 1.25x
- 465x465 - grande escala de exibição do bloco 1.5x
- 620x620 - grande escala de exibição de bloco 2x
- 1240x1240 - grande escala de exibição do bloco 4x
- 50x50 – bloco de armazenamento
- 63x63 – escala de exibição do bloco de armazenamento 1,25x
- 75x75 – escala de exibição do bloco de armazenamento 1,5x
- 100x100 – escala de exibição do bloco de armazenamento 2x
- 200x200 – escala de exibição do bloco de armazenamento 4x
- 620x300 - tela de respingo
- 775x375 – escala de exibição de tela de 1,25x
- 930x450 - escala de exibição de tela de respingo 1,5x
- 1240x600 - escala de exibição de tela 2x de respingo
- 2480x1200 - escala de exibição de tela de respingo 4x
- 16x16 – tamanho de destino para barra de tarefas, menu iniciar, gerenciador de tarefas
- 20x20 - tamanho de destino para barra de tarefas, menu iniciar, gerenciador de tarefas
- 24x24 - tamanho de destino para barra de tarefas, menu iniciar, gerenciador de tarefas
- 30x30 – tamanho do destino para barra de tarefas, menu iniciar, gerenciador de tarefas
- 32x32 - tamanho de destino para barra de tarefas, menu iniciar, gerenciador de tarefas
- 36x36 - tamanho de destino para barra de tarefas, menu iniciar, gerenciador de tarefas
- 40x40 – tamanho de destino para barra de tarefas, menu iniciar, gerenciador de tarefas
- 44x44 – tamanho de destino para barra de tarefas, menu iniciar, gerenciador de tarefas
- 48x48 – tamanho de destino para barra de tarefas, menu iniciar, gerenciador de tarefas
- 60x60 - tamanho de destino para barra de tarefas, menu iniciar, gerenciador de tarefas
- 64x64 - tamanho de destino para barra de tarefas, menu iniciar, gerenciador de tarefas
- 72x72 – tamanho de destino para barra de tarefas, menu iniciar, gerenciador de tarefas
- 80x80 - tamanho de destino para barra de tarefas, menu iniciar, gerenciador de tarefas
- 96x96 - tamanho de destino para barra de tarefas, menu iniciar, gerenciador de tarefas
- 256x256 - tamanho do destino para barra de tarefas, menu iniciar, gerenciador de tarefas

Resumo do nível da imagem

Considere, por exemplo, como o ícone do aplicativo pode mostrar conteúdo diferente dependendo da área de superfície disponível:

Superfície pequena: ícone do aplicativo (44x44) na barra de tarefas, mostrando um logotipo pequeno e abreviado:

Superfície maior: bloco médio (150x150) no menu inicial, mostrando o logotipo completo do aplicativo:

Superfície larga: bloco largo no menu iniciar, mostrando um ícone de aplicativo mais articulado:

Observe como o conteúdo do ícone foi alterado. Isso só é possível por meio do uso de níveis mais altos de suporte a ícones. Recomendamos que os desenvolvedores escolham níveis mais altos para dar a melhor experiência para seus usuários do Windows.

Descrições de ícone

Abaixo, você encontrará uma descrição de cada ícone de aplicativo e onde eles aparecem no Windows.

O ícone normal do aplicativo mostrado no menu inicial, na barra de tarefas ou no gerenciador de tarefas.

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

O bloco pequeno é mostrado no menu inicial quando o usuário define o bloco do aplicativo como de tamanho pequeno.

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

O ícone de bloco médio é mostrado no menu inicial quando o usuário define o bloco do aplicativo como de tamanho médio.

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

O ícone de bloco largo é mostrado no menu inicial quando o usuário define o bloco do aplicativo como de tamanho largo.

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

O ícone de bloco grande está no menu iniciar quando o usuário define o bloco do aplicativo como de grande tamanho.

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

O ícone do logotipo da loja é mostrado no instalador de aplicativos, no Windows Partner Center, na opção "Relatar um aplicativo" na Loja e na opção "Gravar uma revisão" na Loja.

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

O ativo de tela de respingo é mostrado como a tela de respingo do seu aplicativo. Atualmente, há suporte apenas no pacote clássico. No futuro, podemos adicionar suporte para o pacote de aplicativo hospedado moderno também.

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

Imagens de tamanho de destino

Além dos tamanhos de fator de escala padrão descritos acima, também recomendamos criar ativos de "tamanho de destino". Chamamos esses ativos de tamanho de destino porque eles visam tamanhos específicos, como 16 pixels, em vez de fatores de escala específicos, como 400. Os ativos de tamanho de destino são para superfícies do Windows que não usam o sistema de planalto de dimensionamento.

Por exemplo, a configuração Aplicativos & recursos do Windows usa ícones de aplicativo com tamanhos específicos

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

Escolher uma cor de tema

No Windows, as PWAs têm sua própria janela de aplicativo, com uma barra de título que contém o nome do aplicativo e o sistema fecha, maximiza e minimiza ícones.

O conteúdo da Web criado pela PWA preenche toda a área de superfície da janela, exceto para a área da barra de título, que pode ser personalizada com uma cor de tema.

A imagem a seguir mostra como é a barra de título de um PWA ao não usar uma cor do tema e ao usar uma cor do tema que corresponda à cor main do aplicativo:

Para definir uma cor do tema, use o membro do manifesto do theme_color aplicativo Web:

{
    "theme_color": "#0d4c73"
}

Páginas da Web individuais também podem definir uma cor do tema usando a theme-color meta tag. Quando essa meta tag está presente na página, sua cor definida substitui a cor encontrada no manifesto do aplicativo Web.

Exibir conteúdo do aplicativo na área da barra de título

Você pode exibir o conteúdo do aplicativo na área da barra de título usando o recurso Sobreposição controles de janela. Consulte Exibir conteúdo na área da barra de título usando a Sobreposição controles de janela.

Partilhar via