Favicon não atualiza? Resolva o cache primeiro
Um favicon que não atualiza é quase sempre um cache, não um bug. Confirme primeiro que o arquivo realmente mudou, depois limpe os caches do arquivo para fora.
Cheque o arquivo antes de mexer no navegador
Favicons são armazenados em cache de forma agressiva em todas as camadas: o navegador, o seu CDN e, às vezes, um artefato de build desatualizado. Antes de culpar o navegador, descubra qual camada está servindo a imagem antiga.
Vá direto ao arquivo. Abra https://seusite.com/favicon.ico na barra de endereços e veja o que carrega. Se for o ícone antigo, o problema não é o seu navegador, o servidor ou CDN ainda está entregando o arquivo anterior. Se for o ícone novo, o arquivo foi publicado corretamente e apenas o cache do seu navegador está atrasado.
Trabalhe do arquivo para fora
- 1
Abra a URL do ícone diretamente
Carregue /favicon.ico e cada caminho de PNG na barra de endereços. Imagem antiga na URL significa um cache de servidor, build ou CDN. Imagem nova na URL significa que só o seu navegador está desatualizado, pule para os passos do navegador.
- 2
Adicione um parâmetro de versão à tag
Uma query string faz a URL parecer nova, então os caches buscam uma cópia atualizada. Aumente o número toda vez que o ícone mudar. Essa é a correção de cache de navegador mais confiável que existe.
- 3
Faça um hard refresh em uma janela privada
Uma janela privada ou anônima ignora o cache de favicon normal. Combine com um hard refresh para garantir que você está testando o arquivo publicado, não uma cópia local.
- 4
Limpe o CDN e um build desatualizado
Se a imagem antiga ainda estiver na URL, limpe os caminhos do ícone no seu CDN ou cache de borda, depois confirme que o seu build realmente copiou os arquivos novos. Um artefato de build em cache vai continuar servindo o ícone antigo até você limpá-lo e refazer o build.
O parâmetro de versão
<link rel="icon" href="/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">Aumente o ?v= toda vez que o ícone mudar. Mesmo caminho de arquivo, nova URL, então os caches do navegador e do CDN tratam como um recurso novo.
Dúvidas comuns
Por que meu favicon não atualiza depois que eu o alterei?
Um cache está servindo o arquivo antigo. Abra o /favicon.ico diretamente: imagem antiga ali aponta para um cache de CDN ou build, imagem nova ali aponta para o cache do seu navegador. Corrija a camada que está de fato desatualizada.
Como forço o navegador a recarregar o favicon?
Adicione uma query string de versão como /favicon.ico?v=2 à tag link e aumente-a a cada mudança, depois faça um hard refresh em uma janela privada. Essa é a forma mais confiável de fazer o navegador buscar uma cópia atualizada.
Quanto tempo até o favicon atualizar sozinho?
Depende dos tempos de vida do seu cache. Sem um parâmetro de versão pode levar horas ou mais, já que navegadores e CDNs seguram os ícones por muito tempo. Um parâmetro de versão faz a mudança valer no próximo carregamento.
Meu favicon atualizou em todo lugar menos na tela inicial do iOS. Por quê?
Atalhos salvos do iOS congelam o ícone no momento em que foram adicionados. Exclua o atalho e adicione a página de novo para pegar o novo apple-touch-icon.