Ícones de PWA: O Que um App Instalável Precisa
Para que um navegador trate o seu site como um PWA instalável, o manifest precisa listar pelo menos um ícone PNG de 192x192 e um de 512x512. Um ícone maskable é fortemente recomendado para que o Android possa moldá-lo ao launcher, e o iOS ainda precisa de um apple-touch-icon separado porque ignora o manifest para os ícones da tela inicial. Se faltar o par 192/512, o aviso de instalação não vai aparecer.
A barreira de instalação
O Chrome e outros navegadores baseados em Chromium não vão oferecer a instalação de um PWA até que o manifest liste tanto um ícone de 192x192 quanto um de 512x512. Esse par é um requisito rígido: sem ele não há aviso de instalação, não importa o que mais o manifest contenha.
O 192 também serve ao atalho da tela inicial e o 512 alimenta a tela de abertura e as telas de alta densidade. Uma versão maskable permite que o Android recorte o ícone no formato que o launcher usar em vez de emoldurá-lo em uma caixa branca.
Ícones que um PWA precisa
| Ícone | Por que é necessário |
|---|---|
| PNG 192x192 | Requisito de instalação e atalho da tela inicial |
| PNG 512x512 | Tela de abertura e telas de alta densidade |
| Ícone maskable | Permite ao Android moldar o ícone ao launcher |
| apple-touch-icon 180x180 | Tela inicial do iOS: o manifest não a cobre |
Perguntas frequentes sobre ícones de PWA
Quais tamanhos de ícone um PWA precisa?
No mínimo, um PNG de 192x192 e um de 512x512 no manifest, idealmente com uma variante maskable, além de um apple-touch-icon de 180x180 para as telas iniciais do iOS.
Por que meu PWA não instala?
A causa mais comum é um manifest sem o ícone de 192x192 ou de 512x512: ambos são obrigatórios antes que o navegador mostre um aviso de instalação. Verifique primeiro o array icons do manifest.
Os ícones de PWA cobrem as telas iniciais do iOS?
Não. O iOS ignora os ícones do manifest para a tela inicial e usa o apple-touch-icon em vez disso, então você precisa desse arquivo também.