Voltar aos tutoriais

Por que meu favicon não aparece?

Guia de diagnóstico para quando o favicon não aparece ou aparece errado. Causas comuns e o que fazer em navegadores e plataformas diferentes.

Motivos comuns para o favicon não aparecer

Se o favicon não aparece, as causas costumam ser poucas. Entender o que impede a exibição ajuda a achar e corrigir o problema rápido. Os motivos mais frequentes:

  • Caminho de arquivo errado: O motivo mais comum é um caminho incorreto na tag link do HTML
  • Cache do navegador: Navegadores guardam favicon com agressividade; mesmo depois do conserto, o ícone antigo pode continuar aparecendo
  • Tags link ausentes no HTML: Sem as tags link certas no head do HTML, o favicon não é exibido
  • Formato ou tamanho errado: Formatos sem suporte ou dimensões incorretas impedem a exibição
  • Configuração do servidor: Tipos MIME ou ajustes de servidor errados podem bloquear o pedido do favicon
  • Mistura de HTTPS e HTTP: Conteúdo misto pode impedir o carregamento do favicon

Como corrigir o favicon que não aparece

1. Confira as tags link no HTML

O primeiro passo é garantir as tags link corretas no head do documento. Se elas faltam ou estão erradas, o favicon não aparece.

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Confira se os caminhos href batem com a localização real dos arquivos. Se o favicon não aparece, revise se os caminhos estão corretos em relação à raiz do site.

2. Limpe o cache do navegador

Navegadores cacheiam favicon com força, por isso o ícone antigo pode continuar mesmo depois do código certo. Para descartar cache:

  • Faça um hard refresh (Ctrl+Shift+R no Windows/Linux, Cmd+Shift+R no Mac)
  • Limpe o cache e os cookies do seu site
  • Abra o site em uma janela anônima/privada
  • Espere 24–48 horas para o cache expirar sozinho

Se depois disso o favicon ainda não aparecer, o problema provavelmente não é cache.

3. Confira caminhos e pastas

Verifique se os arquivos de favicon existem no lugar certo. Arquivos ausentes ou na pasta errada impedem a exibição.

Locais comuns para os arquivos:

  • Diretório raiz: /favicon.ico or /favicon.png
  • Pasta public: /public/favicon.ico (em geradores de site estático)
  • Pasta assets: /assets/favicon.ico

Se o favicon não aparece, os caminhos no HTML precisam coincidir com os arquivos no servidor.

4. Confira formato e tamanho

O favicon pode não aparecer se o formato não for suportado ou o tamanho estiver errado. Para corrigir:

  • Formato ICO: Formato tradicional, funciona em todos os navegadores (16x16 ou 32x32 pixels)
  • Formato PNG: Navegadores modernos aceitam favicon PNG (16x16, 32x32, 48x48, 96x96, 192x192, 512x512)
  • Formato SVG: Aceito em navegadores modernos; escala sem perder nitidez

Garanta arquivos bem formatados e no tamanho certo. Se ainda não aparecer, comece com ICO ou PNG padrão.

5. Confira a configuração do servidor

Servidor mal configurado também impede o favicon. Para checar:

  • Confira se os tipos MIME estão corretos para .ico, .png e .svg
  • Confira se o servidor aceita pedidos aos arquivos de favicon
  • Veja se não há redirecionamentos bloqueando esses pedidos
  • Mantenha HTTPS e HTTP consistentes (sem aviso de conteúdo misto)

Se o problema for o servidor, fale com a hospedagem ou revise os arquivos de configuração.

6. Teste em vários navegadores

Às vezes o favicon aparece em um navegador e some em outro. Para investigar:

  • Teste no Chrome, Firefox, Safari e Edge
  • Confira navegadores móveis (Safari no iOS, Chrome no celular)
  • Veja se o favicon aparece nos favoritos e no histórico
  • Teste em desktop e no celular

Se falhar só em alguns navegadores, procure requisitos ou problemas conhecidos daquele navegador.

Checklist rápido

Use esta lista para achar rápido por que o favicon não aparece:

  • As tags link estão no head
  • Os caminhos no HTML batem com os arquivos no servidor
  • Os arquivos de favicon existem e estão acessíveis
  • O formato é suportado (ICO, PNG ou SVG)
  • O cache foi limpo ou o teste foi feito em janela anônima
  • Não há erros de console ligados ao carregamento do favicon
  • Os tipos MIME do servidor estão corretos

Usar um gerador de favicon para evitar erros

Se o favicon não aparece e você não tem certeza dos formatos e tamanhos, um gerador profissional ajuda. Ferramentas como logo87.com geram os tamanhos e formatos necessários, para o ícone aparecer certo em navegadores e dispositivos.

Um bom gerador entrega:

  • Os tamanhos padrão (16x16, 32x32, 48x48, 96x96, 192x192, 512x512)
  • Vários formatos (ICO, PNG, SVG)
  • Apple touch icon para dispositivos iOS
  • Tags link HTML prontas para copiar

Isso elimina causas comuns, como formato errado, tamanho errado ou arquivo faltando.

Conclusão

Quando o favicon não aparece, o problema costuma ser caminho errado, cache, tags HTML faltando ou formato inadequado. Os passos acima ajudam a achar e corrigir isso com rapidez.

Lembre que o navegador cacheia o favicon com força: depois do conserto, o ícone novo pode demorar a aparecer. Limpe o cache ou teste em janela anônima. Se ainda assim não aparecer, revise o servidor ou fale com a hospedagem.

Um gerador profissional entrega os arquivos e formatos certos, o que reduz bastante a chance de o favicon sumir. Costuma ser o jeito mais simples de acertar a exibição em todos os navegadores e dispositivos.