Definir ícones e uma cor do tema

2025-06-26

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

Definir ícones

No Windows, as aplicações são reconhecíveis para os utilizadores pelos respetivos ícones. Os ícones são apresentados na Barra de Tarefas, no Menu Iniciar e noutros locais, como as definições do sistema.

Um PWA pode configurar os ficheiros de imagem que o sistema operativo deve utilizar para apresentar um ícone nestes vários locais. Podem ser fornecidas múltiplas imagens para o SO escolher, consoante o contexto.

No ficheiro de manifesto da aplicação Web, os ícones da aplicação 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 ser fornecido 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 ficheiro de imagem, que pode ser um caminho relativo da pasta raiz da aplicação ou um URL absoluto.
`sizes`	Uma lista separada por espaços de tamanhos para os quais a imagem correspondente pode ser utilizada.
`type`	Uma sugestão opcional para o SO detetar rapidamente o tipo de imagem.
`purpose`	Uma sugestão opcional para ajudar o SO a escolher a imagem do ícone certo, consoante o contexto. O valor pode ser `monochrome`, `maskable`ou `any`.

Saiba mais sobre o membro dos ícones.

Tamanhos de imagem do ícone

O seu PWA pode ser melhorado no Windows ao fornecer as imagens com dimensões específicas no manifesto da aplicação Web. Recomendamos que escolha uma das opções abaixo:

Nível 1: (Suporte básico da imagem: 512x512) Esta é a imagem de base a partir da qual pode gerar imagens em falta.
Nível 2: (Mosaicos) Neste nível, o manifesto da aplicação Web contém imagens de mosaico para a escala de apresentação predefinida (1x). Cada uma das imagens tem de estar no formato PNG e ter o any objetivo definido. Eis uma lista de imagens e tamanhos recomendados.
- 44x44 - ícone da aplicação
- 71x71 - mosaico pequeno
- 150x150 - mosaico médio
- 310x150 - mosaico largo
- 310x310 - mosaico grande
- 50x50 - logótipo da loja
- 620x300 - ecrã inicial
Nível 3: (Mosaicos com escalas de visualização) A este nível, o manifesto da aplicação Web deve conter imagens de mosaico para todos os tamanhos de dimensionamento de visualização do Windows. A escala de visualização é uma configuração do utilizador no Windows (os utilizadores podem alterá-la acedendo a Dimensionamento de Visualização> de Definições>). Os ícones de manifesto da sua aplicação Web devem incluir imagens com estas dimensões:
- 44x44 - ícone da aplicação
- 55x55 - ícone de aplicação 1,25x escala de ecrã
- 66x66 - ícone de aplicação 1,5x escala de visualização
- 88x88 - ícone de aplicação escala de ecrã 2x
- 176x176 - ícone de aplicação escala de ecrã 4x
- 71x71 - mosaico pequeno
- 89x89 - pequeno mosaico 1,25x escala de ecrã
- 107x107 - pequeno mosaico 1,5x escala de ecrã
- 142x142 - mosaico pequeno escala de ecrã 2x
- 284x284 - escala de apresentação de mosaico pequeno 4x
- 150x150 - mosaico médio
- 188x188 - mosaico médio 1,25x escala de ecrã
- 225x225 - escala de visualização de mosaico médio 1,5x
- 300x300 - escala de visualização de mosaico médio 2x
- 600x600 - escala de visualização de mosaico médio 4x
- 310x150 - mosaico largo
- 388x188 - mosaico largo 1,25x escala de ecrã
- 465x225 - escala de ecrã 1,5x de mosaico largo
- 620x300 - escala de ecrã 2x de mosaico largo
- 1240x600 - escala de ecrã 4x de mosaico largo
- 310x310 - mosaico grande
- 388x388 - mosaico grande 1,25x escala de ecrã
- 465x465 - mosaico grande 1,5x escala de ecrã
- 620x620 – escala de ecrã 2x de mosaico grande
- 1240x1240 - escala de ecrã 4x de mosaico grande
- 50x50 - mosaico da loja
- 63x63 - armazenar mosaico 1,25x escala de ecrã
- 75x75 - armazenar mosaico 1,5x escala de ecrã
- 100x100 – dimensionamento do ecrã 2x do mosaico do arquivo
- 200x200 – dimensionamento do ecrã 4x do mosaico do arquivo
- 620x300 - ecrã inicial
- 775x375 - escala de ecrã inicial 1,25x
- 930x450 – escala de ecrã inicial 1,5x
- 1240x600 – escala de ecrã inicial 2x
- 2480x1200 - escala de ecrã inicial 4x
Nível 4 (Mosaicos, escalas de visualização e tamanhos de destino) A este nível, fornece imagens para mosaicos com escalas de visualização e imagens de tamanho de destino para visualização em várias superfícies do Windows, incluindo a barra de tarefas, o menu Iniciar, o gestor de tarefas, o comutador de tarefas Alt+Tecla de Tabulação e muito mais. Isto fornece a melhor experiência para os seus utilizadores, mas também requer o maior esforço do programador. Os ícones de manifesto da sua aplicação Web devem incluir imagens com estas dimensões:
- 44x44 - ícone da aplicação
- 55x55 - ícone de aplicação 1,25x escala de ecrã
- 66x66 - ícone de aplicação 1,5x escala de visualização
- 88x88 - ícone de aplicação escala de ecrã 2x
- 176x176 - ícone de aplicação escala de ecrã 4x
- 71x71 - mosaico pequeno
- 89x89 - pequeno mosaico 1,25x escala de ecrã
- 107x107 - pequeno mosaico 1,5x escala de ecrã
- 142x142 - mosaico pequeno escala de ecrã 2x
- 284x284 - escala de apresentação de mosaico pequeno 4x
- 150x150 - mosaico médio
- 188x188 - mosaico médio 1,25x escala de ecrã
- 225x225 - escala de visualização de mosaico médio 1,5x
- 300x300 - escala de visualização de mosaico médio 2x
- 600x600 - escala de visualização de mosaico médio 4x
- 310x150 - mosaico largo
- 388x188 - mosaico largo 1,25x escala de ecrã
- 465x225 - escala de ecrã 1,5x de mosaico largo
- 620x300 - escala de ecrã 2x de mosaico largo
- 1240x600 - escala de ecrã 4x de mosaico largo
- 310x310 - mosaico grande
- 388x388 - mosaico grande 1,25x escala de ecrã
- 465x465 - mosaico grande 1,5x escala de ecrã
- 620x620 – escala de ecrã 2x de mosaico grande
- 1240x1240 - escala de ecrã 4x de mosaico grande
- 50x50 - mosaico da loja
- 63x63 - armazenar mosaico 1,25x escala de ecrã
- 75x75 - armazenar mosaico 1,5x escala de ecrã
- 100x100 – dimensionamento do ecrã 2x do mosaico do arquivo
- 200x200 – dimensionamento do ecrã 4x do mosaico do arquivo
- 620x300 - ecrã inicial
- 775x375 - escala de ecrã inicial 1,25x
- 930x450 – escala de ecrã inicial 1,5x
- 1240x600 – escala de ecrã inicial 2x
- 2480x1200 - escala de ecrã inicial 4x
- 16x16 - tamanho de destino para a barra de tarefas, menu Iniciar, gestor de tarefas
- 20x20 - tamanho de destino para a barra de tarefas, menu Iniciar, gestor de tarefas
- 24x24 - tamanho de destino para a barra de tarefas, menu Iniciar, gestor de tarefas
- 30x30 - tamanho de destino para a barra de tarefas, menu Iniciar, gestor de tarefas
- 32x32 - tamanho de destino para a barra de tarefas, menu Iniciar, gestor de tarefas
- 36x36 - tamanho de destino para a barra de tarefas, menu Iniciar, gestor de tarefas
- 40x40 - tamanho de destino para a barra de tarefas, menu Iniciar, gestor de tarefas
- 44x44 - tamanho de destino para a barra de tarefas, menu Iniciar, gestor de tarefas
- 48x48 - tamanho de destino para a barra de tarefas, menu Iniciar, gestor de tarefas
- 60x60 - tamanho de destino para a barra de tarefas, menu Iniciar, gestor de tarefas
- 64x64 - tamanho de destino para a barra de tarefas, menu Iniciar, gestor de tarefas
- 72x72 - tamanho de destino para a barra de tarefas, menu Iniciar, gestor de tarefas
- 80x80 - tamanho de destino para a barra de tarefas, menu Iniciar, gestor de tarefas
- 96x96 - tamanho de destino para a barra de tarefas, menu Iniciar, gestor de tarefas
- 256x256 - tamanho de destino para a barra de tarefas, menu Iniciar, gestor de tarefas

Resumo ao nível da imagem

Considere, por exemplo, como o ícone da aplicação pode mostrar conteúdos diferentes consoante a área de superfície disponível:

Superfície pequena: ícone da aplicação (44x44) na barra de tarefas, com um logótipo pequeno e abreviado:

Superfície maior: mosaico médio (150x150) no menu Iniciar, com o logótipo completo da aplicação:

Superfície larga: mosaico largo no menu Iniciar, com um ícone de aplicação mais articulado:

Repare como o conteúdo do ícone foi alterado. Isto só é possível através da utilização de níveis mais elevados de suporte de ícones. Recomendamos que os programadores escolham níveis mais elevados para proporcionar a melhor experiência aos seus utilizadores do Windows.

Descrições de ícones

Abaixo, encontrará uma descrição de cada ícone de aplicação e onde aparecem no Windows.

O ícone de aplicação normal que é apresentado no menu Iniciar, na barra de tarefas ou no gestor de tarefas.

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

O mosaico pequeno é apresentado no menu Iniciar quando o utilizador define o mosaico da sua aplicação para um tamanho pequeno.

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

O ícone de mosaico médio é apresentado no menu Iniciar quando o utilizador define o mosaico da sua aplicação para tamanho médio.

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

O ícone de mosaico largo é apresentado no menu Iniciar quando o utilizador define o mosaico da sua aplicação para um tamanho grande.

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

O ícone de mosaico grande encontra-se no menu Iniciar quando o utilizador define o mosaico da sua aplicação para um tamanho grande.

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

O ícone do logótipo da loja é apresentado no instalador de aplicações, no Centro de Parceiros do Windows, na opção "Reportar uma aplicação" na Loja e na opção "Escrever uma revisão" na Loja.

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

O elemento de ecrã inicial é apresentado como o ecrã inicial da sua aplicação. Atualmente suportado apenas no pacote clássico. No futuro, poderemos também adicionar suporte para o pacote de aplicações alojados moderno.

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

Imagens de tamanho de destino

Além dos tamanhos de fatores de escala padrão descritos acima, também recomendamos a criação de recursos de "tamanho de destino". Chamamos a estes recursos o tamanho de destino porque visam tamanhos específicos, como 16 píxeis, em vez de fatores de escala específicos, como 400. Os recursos de tamanho de destino destinam-se a superfícies do Windows que não utilizam o sistema planalto de dimensionamento.

Por exemplo, a definição Aplicações & funcionalidades do Windows utiliza ícones de aplicações 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 do tema

No Windows, as PWAs têm a sua própria janela de aplicação, com uma barra de título que contém o nome da aplicação e o sistema fecham, maximizam e minimizam os ícones.

O conteúdo 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 seguinte mostra o aspeto da barra de título de um PWA quando não está a utilizar uma cor do tema e quando utiliza uma cor do tema que corresponde à cor main da aplicação:

Para definir uma cor do tema, utilize o membro do manifesto da aplicação theme_color Web:

{
    "theme_color": "#0d4c73"
}

As páginas Web individuais também podem definir uma cor do tema através da theme-color meta tag. Quando esta meta tag está presente na página, a cor definida substitui a cor encontrada no manifesto da aplicação Web.

Apresentar conteúdo da aplicação na área da barra de título

Pode apresentar o conteúdo da sua aplicação na área da barra de título com a funcionalidade Sobreposição de Controlos de Janela. Veja Apresentar conteúdo na área da barra de título com a Sobreposição de Controlos de Janela.

Compartilhar via