Favicon não aparece – Guia de solução de problemas
Você carregou um favicon, mas a guia ainda mostra um globo genérico ou um logotipo antigo. Este guia aborda as causas mais comuns — cache, caminhos errados, arquivos ausentes e tags <link> conflitantes — na ordem em que você deve verificá-las.
Os navegadores armazenam favicons em cache de forma mais agressiva do que quase qualquer outro ativo. Uma atualização completa (Ctrl+Shift+R ou Cmd+Shift+R) corrige muitos alarmes falsos. Se isso falhar, anexe uma string de consulta de versão uma vez: /favicon.ico?v=2.
Confirme se o arquivo existe no URL solicitado pelo navegador. Abra /favicon.ico diretamente em uma nova guia. Um 404 significa que o arquivo não foi implantado onde você pensa que está – comum com compilações de SPA que atendem apenas index.html.
Verifique seus <link rel="icon"> caminhos href. Caminhos absolutos (/favicon.ico) funcionam em todas as páginas; caminhos relativos (favicon.ico) quebram em rotas aninhadas como /blog/post.
Se você usar um CDN, limpe os caminhos do favicon após a implantação. Alguns CDNs armazenam em cache 404 respostas para /favicon.ico quando o arquivo estava ausente durante a primeira solicitação.
Várias tags <link rel="icon"> podem confundir navegadores mais antigos. Coloque favicon.ico primeiro e depois as variantes PNG/SVG com atributos explícitos de tipo e tamanho.
WordPress, Shopify e hosts estáticos injetam suas próprias tags. Visualize o código-fonte da página e pesquise rel="icon" — tags duplicadas ou substituídas são uma causa frequente.
Avisos de conteúdo misto HTTPS bloqueiam URLs de favicon HTTP em páginas seguras. Sirva todos os ícones por HTTPS.
Para desenvolvimento local, alguns navegadores se recusam a atualizar favicons até que você limpe os dados do site para localhost.
Como funciona
- 1
Verifique o URL do arquivo
Abra /favicon.ico em uma nova aba – espere 200, não 404.
- 2
Inspecione tags <head>
Ver fonte; confirme um link canônico favicon.ico e nenhum erro de digitação.
- 3
Busque o cache uma vez
Adicione ?v=2 ao href, implante, atualize e remova a consulta, se desejar.
Experimente agora
Teste seu favicon ao vivo
Testador de favicon ao vivoPerguntas frequentes
Por que meu favicon funciona localmente, mas não em produção?+
As compilações de produção geralmente geram saída para um subdiretório ou prefixo CDN. Verifique se o caminho implantado corresponde ao seu <link> href e se o arquivo está incluído na saída do build.
Quanto tempo até o Google atualizar meu favicon nos resultados de pesquisa?+
O Google pode levar dias a semanas após o novo rastreamento. Certifique-se de que o ícone tenha pelo menos 48×48, seja quadrado e seja acessível publicamente em um URL estável.
O Adblock ou o modo de privacidade ocultam os favicons?+
Raramente para ícones originais. Proxies favicon de terceiros podem ser bloqueados; os ícones auto-hospedados em seu domínio não são afetados.
Devo excluir o cache de favicon do navegador?+
Limpe os dados do site do seu domínio nas configurações do navegador ou teste em uma janela privada com o cache desativado.