Favicon não aparece ou não atualiza? 9 causas e soluções
As nove causas que quebram favicons, e a solução exata para cada uma. Nove em cada dez vezes é cache, então comece por aí e desça pela tabela.
<link rel="icon" href="/favicon.ico?v=2" sizes="any">Mudar a URL é o que faz o navegador buscar um arquivo novo. Editar o ICO no lugar não é suficiente.
Causas e soluções
| Causa | Por que quebra | Solução |
|---|---|---|
| 1. Cache do navegador ou do CDN | Navegadores fazem cache de favicons mais agressivamente que quase qualquer outro recurso, e um CDN na frente adiciona uma segunda camada. | Force um refresh (Cmd+Shift+R / Ctrl+F5) e acrescente uma query string de versão para que a própria URL mude. |
| 2. Caminho de arquivo errado | Um caminho relativo é resolvido a partir da página atual, não da raiz. | Use uma barra inicial, /favicon.ico, e confirme que o arquivo de fato carrega naquela URL em uma nova aba. |
| 3. Tags link faltando ou mal formadas | Nenhum link de ícone, um erro de digitação em rel="icon", ou tags fora do <head> impedem o navegador de encontrar o arquivo. | Valide o markup no seu layout compartilhado. |
| 4. Formato ou tamanho errado | Um favicon pequeno demais, o MIME type errado ou um .ico corrompido podem falhar em renderizar silenciosamente. | Reexporte em um tamanho e formato suportados, e sirva-o com o content type correto. Compare ICO x PNG e confira os tamanhos de favicon necessários. |
| 5. Apple touch icon não atualiza | O iOS ignora o favicon.ico e usa o apple-touch-icon. Se ele estiver faltando ou desatualizado, a tela inicial mostra a coisa errada. | Corrija o link do apple-touch-icon, depois remova e readicione a página à tela inicial. |
| 6. Problemas com o ícone do manifest | No Android e em PWAs instalados, o ícone vem do manifest.json. Um caminho ruim ou tamanho errado ali quebra os ícones da tela inicial e da splash. | Corrija os caminhos e tamanhos de ícone no manifest.json, depois reinstale o app. |
| 7. A saída do build remove suas tags | Alguns frameworks reescrevem o head do documento, então tags link escritas à mão não sobrevivem ao build. | Siga o guia da sua stack: Next.js, React, WordPress ou Shopify. |
| 8. Um tema ou CMS injeta seu próprio ícone | Um tema pode definir seu próprio ícone de site, que sobrepõe o que você adicionou no markup. | Defina o ícone pela configuração de ícone de site da própria plataforma, e não no template. |
| 9. Um cache de build serve um arquivo desatualizado | O cache do build ou da plataforma continua entregando o ícone antigo mesmo depois de você fazer o redeploy. | Limpe o cache do build/plataforma, faça o redeploy e verifique de novo. |
Onde procurar em seguida
Formato ou tamanho suspeitos? Compare ICO x PNG no glossário e confira os tamanhos de favicon necessários. Problema no iOS? Leia o verbete sobre apple-touch-icon. Problema no manifest? Leia o que é manifest.json.
As causas 7 a 9 são as específicas de plataforma: alguns frameworks e CMSs sobrescrevem ou fazem cache do favicon de formas que o HTML puro não faz. A saída do build pode remover suas tags, um tema pode injetar seu próprio ícone, ou um cache de build pode servir um arquivo desatualizado. Os guias de Next.js, React, WordPress e Shopify cobrem, cada um, sua própria versão disso.
Como limpar um favicon em cache
- 1
Acrescente uma query string de versão
Mude o href do link para /favicon.ico?v=2 para que o navegador busque um arquivo novo.
- 2
Force um refresh na página
Use Cmd+Shift+R (macOS) ou Ctrl+F5 (Windows) para contornar o cache.
- 3
Limpe qualquer cache de CDN
Se houver um CDN na frente do seu site, invalide o caminho do favicon para que os nós de borda sirvam o arquivo novo.
Limpou o cache e continua igual?
| O que você vê | O que geralmente significa | Próximo passo |
|---|---|---|
| 404: favicon não encontrado | O navegador pediu /favicon.ico e o servidor não tinha nada ali. Comum logo após um build de framework que nunca copiou o arquivo para a saída. | Abra /favicon.ico diretamente. Se der 404, o arquivo não está no deploy. Isso é um problema de build ou de caminho, não de cache, então mexer no cache nunca vai ajudar. |
| O ícone antigo ainda carrega na URL direta | Abrir /favicon.ico mostra a imagem ANTIGA, ou seja, o próprio arquivo está desatualizado. Nenhum refresh forçado vai movê-lo. | Uma etapa de build ou um CDN está entregando um arquivo antigo. Limpe o cache da plataforma/CDN, faça o redeploy e depois reabra a URL direta antes de checar a aba. |
| Arquivo certo na URL, ícone errado na aba | A URL direta está correta, mas a aba continua errada. Uma segunda tag link (de um tema, de um plugin ou o padrão do framework) está passando à frente da sua. | Veja o código-fonte e conte as tags rel="icon". O navegador pega a última que entende, então remova a perdedora em vez de adicionar uma terceira. |
| OK em um navegador, faltando em outro | Cada navegador, e cada perfil do Chrome, mantém seu próprio armazenamento de favicon, e alguns seguram uma entrada desatualizada por dias. | Confirme em uma janela anônima nova ou em um perfil limpo antes de decidir que o site é o culpado. |
Percorra essa tabela de cima para baixo. Cada linha elimina uma camada, então você para de adivinhar sobre o cache e começa a ler o que o servidor realmente retorna.
Tamanhos que os casos com falha exigem
Confirme a solução com um scan
Adivinhar é lento. Rode um scan automatizado que busca seu site no ar, lista cada tag de favicon que encontra e sinaliza as que estão faltando ou quebradas, para você saber que a solução realmente pegou.
Quer testar manualmente em navegadores e dispositivos também? Veja como testar e verificar seu favicon.
Perguntas frequentes
Por que meu favicon não aparece?
As causas mais comuns são cache agressivo do navegador, um caminho de arquivo errado ou relativo, e tags <link> faltando ou mal formadas no <head>. Force um refresh, confirme que /favicon.ico resolve diretamente e cheque suas tags.
Como forço meu favicon a atualizar?
Acrescente uma query string de versão à URL do ícone, por exemplo /favicon.ico?v=2. Isso faz o navegador tratá-lo como um arquivo novo. Depois force um refresh ou limpe o cache do site.
Por que meu favicon aparece no desktop mas não no iPhone?
O iOS usa o apple-touch-icon, não o favicon.ico. Se aquele link de PNG 180×180 estiver faltando, o iOS recorre a um screenshot. Adicione um link apple-touch-icon e readicione a página à tela inicial.
Quanto tempo leva para um favicon atualizar na busca do Google?
O Google atualiza favicons quando recrawleia seu site, o que pode levar de dias a semanas. Garanta que o ícone tenha pelo menos 48×48, seja referenciado com uma tag rel=icon válida e esteja acessível ao Googlebot.
Por que aparece favicon não encontrado, ou retorna 404?
O navegador pediu o ícone pelo caminho e o servidor não tinha nada ali. Abra /favicon.ico diretamente em uma nova aba: se der 404, o arquivo nunca foi para o deploy naquela URL, geralmente um build de framework que não o copiou para a saída, ou um caminho errado na tag link. Corrija onde o arquivo cai, não o cache.
Meu favicon está faltando: onde o arquivo deveria realmente estar?
Para o clássico ícone de aba, um arquivo real na raiz do site para que /favicon.ico resolva. Frameworks mudam como ele chega lá: o Next.js lê app/favicon.ico, o Vite e a maioria dos SPAs copiam public/ para a raiz, e o WordPress ou o Shopify o servem por uma configuração de ícone de site em vez de um arquivo. Se a tag aponta para um lugar onde o build nunca gravou um arquivo, o ícone está 'faltando' mesmo que sua fonte pareça correta.
Tentei limpar o cache e continua igual. E agora?
Pare de limpar caches e leia o que o servidor retorna. Abra /favicon.ico diretamente: um 404 significa um problema de build ou de caminho, uma imagem antiga significa um arquivo de build ou CDN desatualizado, e o arquivo correto com o ícone errado na aba significa que uma segunda tag link está vencendo. Cada resultado aponta para uma solução diferente. Veja a tabela de escalonamento acima.