Ícone de PWA que não muda: manifesto, caminhos e cache

Se o ícone de uma PWA não se atualiza, confira primeiro o manifesto e as imagens que o navegador realmente recebe. Trocar o favicon da aba não substitui necessariamente o ícone de um aplicativo instalado. As declarações e caches dessas imagens podem ser diferentes.

O gerador de favicon e PWA prepara os arquivos e um manifesto inicial. Para publicá-los, alinhe os caminhos declarados com os locais onde as imagens estão disponíveis.

Separe o favicon da imagem instalada

A declaração de favicon no HTML atende à aba. As entradas do manifesto descrevem os ícones da aplicação web. Uma página pode mostrar uma imagem nova enquanto um atalho instalado mantém outra.

Anote onde o problema acontece: aba, convite para instalação, iniciador ou app já instalado. Registre também navegador e sistema operacional. Isso torna a investigação repetível e evita alterar um recurso diferente do que você precisa corrigir.

Abra o manifesto ligado à página

Inspecione o link de manifesto e abra seu URL diretamente. Ele deve retornar o JSON esperado, não uma página de login, um ciclo de redirecionamentos ou HTML genérico. Confira a resposta publicada além do arquivo no editor.

A saída atual inclui Web/site.webmanifest, android-chrome-192x192.png e android-chrome-512x512.png. O manifesto inicial usa caminhos de ícones relativos à raiz. Se publicar as imagens em outra pasta, atualize as referências para não apontar a arquivos inexistentes na raiz.

Uma aplicação em subdiretório exige atenção: um caminho iniciado por / volta à raiz da origem, em vez de partir do endereço da página.

Siga cada endereço de imagem

A referência de ícones de manifesto da MDN explica src, sizes, type e purpose. Caminhos relativos são resolvidos a partir do URL do manifesto; os iniciados por /, da raiz da origem.

Abra todas as imagens declaradas e confira suas respostas. Uma página de erro não é uma imagem mesmo que o endereço termine em .png. Um arquivo local pode faltar na publicação ou ser bloqueado pela política de imagens da página.

Compare dimensões declaradas e pixels reais. Se redimensionou a imagem depois da geração, atualize a entrada correspondente. O nome do arquivo não comprova 192 ou 512 pixels.

Declare apenas os usos preparados no desenho

A exportação atual produz ícones comuns. Ela não gera uma imagem maskable separada e testada. Acrescentar purpose: "maskable" não muda a composição ou área segura do arquivo existente.

Se precisar desse uso, prepare a arte para o recorte e teste. Mantenha o ícone comum quando apropriado. O guia de tamanhos ajuda a identificar suas saídas; consulte depois os requisitos do navegador pretendido.

Um manifesto e ícones verificados no navegador

Em 1º de outubro de 2026, o Chrome 154 abriu um site local original com o manifesto e os ícones exportados. O manifesto respondeu 200 com application/manifest+json; start_url e scope relativos resolveram para a raiz de teste. Os dois ícones responderam 200, e a decodificação confirmou 192 × 192 e 512 × 512 px. Favicon e Apple touch icon foram verificados separadamente.

Baixar o site original de teste de ícones PWA

Execute este comando na pasta extraída e abra http://localhost:8892/. Se mover os arquivos para uma subpasta, ajuste as URLs de ícones relativas à raiz.

python3 -m http.server 8892 --bind localhost

Inspecione antes de apagar dados

Abra as ferramentas de aplicação ou manifesto do navegador. Procure o manifesto interpretado, as prévias e os erros de busca. No painel de rede, confira respostas do JSON e das imagens. Isso distingue uma URL errada de uma resposta antiga em cache.

Com uma instalação descartável, remova o app de teste e instale novamente depois de conferir os recursos novos. Limpar também os dados do site pode apagar informações locais da aplicação. Prefira verificações direcionadas antes de remover dados reais de um usuário.

Um URL deliberadamente versionado facilita acompanhar publicação e cache. Atualize a referência e registre a versão instalada. Não use endereços aleatórios a cada pedido: recursos estáveis e versionados são mais fáceis de investigar e armazenar.

Teste a instalação como outro fluxo

O guia de instalabilidade de PWA da MDN descreve outros requisitos. Ícones válidos são parte do processo, mas sua exportação não torna um site instalável em todo navegador e sistema.

Use um site controlado e o navegador que deseja atender. Registre se o manifesto carregou, se as imagens foram buscadas e se a instalação mostrou a arte prevista. Um teste de computador não equivale a uma instalação em telefone.

Uma instalação real no Safari

Em 2 de outubro de 2026, o mesmo site foi adicionado à tela inicial de um simulador iPhone 17 isolado com Safari no iOS 26.5. Abrir como App da Web estava ativado. My App mostrou a arte XY original e abriu o site em um aplicativo Web separado, sem a barra de endereço do Safari. Isso verifica esse fluxo local, não a instalação no Chromium, o uso offline ou um aparelho físico.

Siga as instruções da Apple para Safari: abra o site e escolha Mais → Compartilhar → Adicionar à Tela de Início. Mantenha Abrir como App da Web ativado e toque em Adicionar. Depois abra o ícone e confira a arte e o destino. O site ainda não fornece service worker nem arte maskable específica.

Perguntas sobre ícones de PWA

Por que o favicon mudou, mas o ícone instalado não?

Confira as declarações separadas e depois a cache da instalação. O favicon pode estar correto enquanto o manifesto ainda referencia outra imagem.

Basta renomear o arquivo?

Você pode alinhar nomes, mas também precisa verificar formato e dimensões. Renomear não converte nem redimensiona os bytes.

Todos os navegadores devem mostrar o mesmo resultado?

Não. Interfaces de instalação e finalidades de ícones variam. Teste navegador e aparelho de destino.

Deixe uma verificação repetível da PWA

Confirme o manifesto, abra os endereços de imagem e confira os arquivos antes de instalar novamente uma versão de teste. Para recursos de substituição, volte ao gerador PWA.