Ícones do Manifest: O Array icons em um Web App Manifest
Um ícone do manifest é uma entrada no array icons de um web app manifest, o arquivo JSON que descreve o seu site quando ele é instalado. Cada entrada informa um src, uma string sizes, geralmente um type e, opcionalmente, um purpose, e o navegador escolhe a correspondência mais próxima para a tela inicial, o launcher de apps, o alternador de tarefas e a tela de abertura. No mínimo, declare um PNG de 192x192 e um de 512x512.
Para que serve o array
O web app manifest é um arquivo JSON referenciado no seu head que informa ao navegador como o seu site deve se comportar quando instalado: seu nome, sua URL de início, seu modo de exibição, sua cor de tema e seus ícones. Os ícones do manifest são os usados fora da interface do navegador: o launcher, o alternador de apps, o aviso de instalação, a tela de abertura.
Ao contrário das tags de link de favicon, o array é uma lista de candidatos em vez de um conjunto de instruções. Você descreve o que cada arquivo é, e o navegador escolhe por superfície. Isso faz com que declarar mais entradas saia barato: nada é baixado até que uma superfície precise.
Um manifest mínimo
{
"name": "Example App",
"short_name": "Example",
"start_url": "/",
"display": "standalone",
"theme_color": "#0b0b0b",
"background_color": "#ffffff",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Referencie-o no head com <link rel="manifest" href="/manifest.json">. O arquivo também pode se chamar manifest.webmanifest; o que importa é a tag de link.
Campos de uma entrada de ícone
| Campo | O que faz |
|---|---|
| src | Caminho para a imagem, resolvido em relação à URL do manifest. Obrigatório. |
| sizes | Dimensões como "LARGURAxALTURA", ou várias separadas por espaço para um arquivo com múltiplos tamanhos. |
| type | Tipo MIME, ex.: image/png. Permite ao navegador pular formatos que não consegue decodificar. |
| purpose | "any" (padrão), "maskable" para ícones seguros de recortar, ou "monochrome". |
Perguntas frequentes sobre ícones do manifest
Por que 192 e 512 especificamente?
192x192 é o tamanho que o Android usa para o ícone da tela inicial em densidades de tela comuns, e 512x512 é o tamanho usado para a tela de abertura e o aviso de instalação. Juntos, eles satisfazem as verificações de instalabilidade nos navegadores baseados em Chromium.
Os ícones do manifest substituem o meu favicon?
Não. Eles cobrem apenas as superfícies de app instalado. Abas, favoritos e histórico do navegador ainda vêm das suas tags link rel="icon" e de /favicon.ico, então entregue ambos.
O iOS lê os ícones do manifest?
O Safari lê o manifest para coisas como nome e modo de exibição, mas o ícone da Tela de Início vem da tag de link apple-touch-icon. Declare os dois se quiser que o ícone fique certo no iOS e no Android.