Defina os ícones e uma cor do tema

Os PWAs instalados no Windows podem ser personalizados da maneira como aparecem no sistema operacional (SO). Um PWA pode definir um conjunto de ícones e uma cor de tema para a barra de título.

Definir ícones

No Windows, os aplicativos são reconhecíveis pelos 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 locais. Várias imagens podem ser fornecidas para o sistema operacional escolher, dependendo do contexto.

No arquivo de manifesto do aplicativo Web, os ícones de 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 and sizes . Um ícone também pode ter as type propriedades and purpose .

Saiba mais sobre o membro í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 de imagem: 512x512) Esta é a imagem base a partir da qual gerar imagens ausentes.

• Nível 2: (blocos) Nesse 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 a any finalidade definida. Aqui está uma lista de imagens e tamanhos recomendados.

  • 44x44 - ícone do aplicativo
  • 71x71 - Bloco pequeno
  • 150x150 - ladrilho médio
  • 310x150 - bloco largo
  • 310x310 - bloco grande
  • 50x50 - Logotipo da Store
  • 620x300 - tela inicial

• Nível 3: (Blocos com escalas de exibição) Nesse 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 acessando Configurações>Escala de exibição>). Os ícones de manifesto do aplicativo Web devem incluir imagens com estas dimensões:

  • 44x44 - ícone do aplicativo
  • 55x55 - ícone do aplicativo Escala de exibição de 1,25x
  • 66x66 - ícone do aplicativo Escala de exibição de 1,5x
  • 88x88 - ícone do aplicativo 2x escala de exibição
  • 176x176 - Ícone do aplicativo Escala de exibição 4x
  • 71x71 - Bloco pequeno
  • 89x89 - bloco pequeno Escala de exibição de 1,25x
  • 107x107 - bloco pequeno Escala de exibição de 1,5x
  • 142x142 - bloco pequeno 2x escala de exibição
  • 284x284 - bloco pequeno 4x escala de exibição
  • 150x150 - ladrilho médio
  • 188x188 - bloco médio 1,25x escala de exibição
  • 225x225 - bloco médio Escala de exibição de 1,5x
  • 300x300 - bloco médio 2x escala de exibição
  • 600x600 - Escala de exibição 4x de bloco médio
  • 310x150 - bloco largo
  • 388x188 - bloco largo Escala de exibição de 1,25x
  • 465x225 - bloco largo Escala de exibição de 1,5x
  • 620x300 - bloco largo 2x escala de exibição
  • 1240x600 - Escala de exibição 4x de bloco largo
  • 310x310 - bloco grande
  • 388x388 - bloco grande 1,25x escala de exibição
  • 465x465 - bloco grande Escala de exibição de 1,5x
  • 620x620 - bloco grande 2x escala de exibição
  • 1240x1240 - bloco grande 4x escala de exibição
  • 50x50 - armazenar bloco
  • 63x63 - Bloco de armazenamento Escala de exibição de 1,25x
  • 75x75 - Bloco de armazenamento Escala de exibição de 1,5x
  • 100x100 - Armazenar bloco 2x Escala de exibição
  • 200x200 - Bloco de Loja 4x Escala de Exibição
  • 620x300 - tela inicial
  • 775x375 - escala de exibição de tela inicial de 1,25x
  • 930x450 - Tela inicial Escala de exibição de 1,5x
  • 1240x600 - Tela inicial 2x Escala de exibição
  • 2480x1200 - escala de exibição de tela inicial 4x

• Nível 4 (Blocos, escalas de exibição e tamanhos de destino) Nesse nível, você fornece imagens para blocos com escalas 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, alternador de tarefas ALT+Tab e muito mais. Isso proporciona a melhor experiência para os usuários, mas também exige o maior esforço do desenvolvedor. Os ícones de manifesto do aplicativo Web devem incluir imagens com estas dimensões:

  • 44x44 - ícone do aplicativo
  • 55x55 - ícone do aplicativo Escala de exibição de 1,25x
  • 66x66 - ícone do aplicativo Escala de exibição de 1,5x
  • 88x88 - ícone do aplicativo 2x escala de exibição
  • 176x176 - Ícone do aplicativo Escala de exibição 4x
  • 71x71 - Bloco pequeno
  • 89x89 - bloco pequeno Escala de exibição de 1,25x
  • 107x107 - bloco pequeno Escala de exibição de 1,5x
  • 142x142 - bloco pequeno 2x escala de exibição
  • 284x284 - bloco pequeno 4x escala de exibição
  • 150x150 - ladrilho médio
  • 188x188 - bloco médio 1,25x escala de exibição
  • 225x225 - bloco médio Escala de exibição de 1,5x
  • 300x300 - bloco médio 2x escala de exibição
  • 600x600 - Escala de exibição 4x de bloco médio
  • 310x150 - bloco largo
  • 388x188 - bloco largo Escala de exibição de 1,25x
  • 465x225 - bloco largo Escala de exibição de 1,5x
  • 620x300 - bloco largo 2x escala de exibição
  • 1240x600 - Escala de exibição 4x de bloco largo
  • 310x310 - bloco grande
  • 388x388 - bloco grande 1,25x escala de exibição
  • 465x465 - bloco grande Escala de exibição de 1,5x
  • 620x620 - bloco grande 2x escala de exibição
  • 1240x1240 - bloco grande 4x escala de exibição
  • 50x50 - armazenar bloco
  • 63x63 - Bloco de armazenamento Escala de exibição de 1,25x
  • 75x75 - Bloco de armazenamento Escala de exibição de 1,5x
  • 100x100 - Armazenar bloco 2x Escala de exibição
  • 200x200 - Bloco de Loja 4x Escala de Exibição
  • 620x300 - tela inicial
  • 775x375 - escala de exibição de tela inicial de 1,25x
  • 930x450 - Tela inicial Escala de exibição de 1,5x
  • 1240x600 - Tela inicial 2x Escala de exibição
  • 2480x1200 - escala de exibição de tela inicial 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 de 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 de destino para barra de tarefas, menu Iniciar, gerenciador de tarefas

Resumo no nível da imagem

Considere, por exemplo, como o ícone do aplicativo pode mostrar conteúdo diferente dependendo da área da 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 Iniciar, 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 mudou. Isso só é possível com o 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 do ícone

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

O ícone de aplicativo normal que é mostrado no menu iniciar, na barra de tarefas ou no gerenciador de tarefas.

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

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

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

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

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

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

• 310 x 150
• 388 x 188 (escala de 1,25x)
• 465 x 225 (escala de 1,5x)
• 620 x 300 (escala 2x)
• 1240x600 (escala 4x)

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

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

O ícone do logotipo da loja é mostrado no instalador de aplicativos, Windows Partner Center, na opção "Denunciar um aplicativo" na Store e na opção "Escrever uma avaliação" na Store.

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

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

• 620 x 300
• 775x375 (escala de 1,25x)
• 930 x 450 (escala de 1,5x)
• 1240x600 (escala 2x)
• 2480 x 1200 (escala 4x)

Imagens dimensionadas de destino

Além dos tamanhos de fator de escala padrão descritos acima, também recomendamos a criação de ativos de "tamanho de destino". Chamamos esses ativos de target-size 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 platô de escala.

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

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

Escolher uma cor de tema

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

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

A imagem a seguir mostra a aparência da barra de título de um PWA quando não está usando uma cor de tema e ao usar uma cor de tema que corresponde à cor principal do aplicativo:

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

{
    "theme_color": "#0d4c73"
}

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

Exibir o 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 de Controles de Janela. Consulte Exibir conteúdo na área da barra de título usando a sobreposição de controles de janela.

Confira também

• Gerador de imagens PWABuilder
• Recomendações de imagem para pacotes PWA do Windows