Cor do tema e ícones do aplicativo

A tag <meta name="theme-color" content="#1f2937"> define a cor da barra de endereço do navegador em dispositivos móveis e a cor da barra de título em PWAs para computador. Ela dá à página uma aparência refinada, semelhante à de um aplicativo, sem alterar nenhum conteúdo.

Forneça cores separadas para os modos claro e escuro: <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> e uma segunda tag com a cor escura. Os navegadores escolhem a correspondente com base na preferência do usuário no OS.

A propriedade theme_color do manifesto define a cor quando o aplicativo é executado como uma PWA instalada (na barra de título da janela independente). Combine-a com a metatag de cor do tema da página para manter a consistência: ao executar no navegador ou como aplicativo instalado, a identidade visual permanece a mesma.

<link rel="icon" href="/favicon.ico"> é o clássico ícone da aba do navegador. Apesar do nome, os navegadores modernos preferem PNG ou SVG a ICO. Forneça um PNG de 32x32 por meio de <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> para obter uma renderização mais nítida.

Os navegadores modernos aceitam ícones de favorito em SVG: <link rel="icon" type="image/svg+xml" href="/icon.svg">. Eles permanecem nítidos em qualquer tamanho e ocupam pouco espaço. Use-os para logotipos vetoriais e combine-os com uma alternativa em PNG para navegadores que não oferecem suporte a ícones de favorito em SVG.

A tela inicial do iOS usa o ícone de toque da Apple: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Forneça um PNG de 180x180. O iOS não lê os ícones do manifesto web durante a instalação na tela inicial; o link do ícone de toque da Apple é obrigatório.

As instalações no Android leem os ícones da matriz de ícones do manifesto. Inclua PNGs de 192x192 (tela inicial) e 512x512 (tela de abertura e gaveta de aplicativos). Adicione uma cópia com o propósito de mascaramento para que o Android possa adaptar o ícone ao formato do ícone da tela inicial (círculo, quadrado arredondado ou quadrado).

Os ícones com mascaramento devem manter seu conteúdo principal dentro de uma zona segura central de 80%; os 20% externos podem ser recortados, dependendo do formato da máscara do dispositivo. Use ferramentas como maskable.app para visualizar o ícone sob diferentes formatos de máscara durante a criação.

Para um bloco fixado no Windows 8/10: <meta name="msapplication-TileImage" content="/tile.png"> e <meta name="msapplication-TileColor" content="#1f2937">. Hoje têm prioridade menor que os recursos de outras plataformas, mas ainda são úteis para usuários do Windows que fixam sites.

IE/Edge antigo: <meta name="msapplication-config" content="/browserconfig.xml"> aponta para um arquivo XML com ícones de blocos em vários tamanhos. Hoje isso é praticamente irrelevante; sites novos podem deixar de usar browserconfig.xml sem consequências.

Aba fixada do Safari no macOS: <link rel="mask-icon" href="/safari-icon.svg" color="#1f2937">. O SVG deve ser um ícone de uma única cor, que é substituída pelo atributo de cor. Esse recurso é usado somente nas abas fixadas do Safari no macOS.

Use realfavicongenerator.net para gerar todas as variantes de ícones a partir de uma única fonte. Teste em um dispositivo iOS real (adicione o aplicativo à Tela de Início) e no Android (instale o aplicativo pelo menu do navegador) para verificar se os ícones aparecem corretamente recortados e sem pixelização.

A cor do tema, com variantes de consulta de mídia, colore a barra de endereço; a cor do tema do manifesto colore a barra de título do aplicativo instalado. Os ícones incluem ícones de favorito (SVG + PNG), ícone de toque da Apple (iOS, 180x180), ícones do manifesto (Android, 192 + 512 + mascaramento), ícone de máscara do Safari (SVG de uma única cor) e imagem de bloco do aplicativo da Microsoft (blocos fixados do Windows). Use realfavicongenerator.net para gerar todas as variantes a partir de uma única fonte.