Como Corrigir o Irritante Erro 404 favicon.ico Not Found

May 31, 2026 · 4 min read

Você abre o console do navegador em uma página HTML recém-criada e já se depara com isso: Failed to load resource: the server responded with a status of 404 (Not Found) — favicon.ico. Você não referenciou nenhum favicon. Não solicitou nenhum. Mesmo assim, ele está lá, poluindo seus logs toda vez.

Veja o que está acontecendo de fato e como corrigir isso da forma correta.

Principais Conclusões

Navegadores, crawlers e ferramentas de monitoramento solicitam automaticamente /favicon.ico da raiz do seu site, mesmo sem uma referência HTML.
O erro 404 é inofensivo, mas polui os logs do servidor e obscurece problemas reais.
A correção mais confiável é colocar um arquivo favicon.ico real na raiz do seu site.
Configurações modernas também devem declarar variantes SVG, PNG e Apple Touch Icon via <link rel="icon"> no <head> do HTML.
Frameworks como Next.js gerenciam o posicionamento do favicon por meio de convenções de arquivos, mas o requisito de solicitação no nível raiz permanece o mesmo.

Por Que os Navegadores Solicitam o favicon.ico Sem Serem Instruídos

Os navegadores não esperam que seu HTML informe onde está o favicon. De acordo com o Padrão HTML do WHATWG, quando uma página não possui uma tag <link rel="icon"> explícita, os navegadores enviam automaticamente uma requisição GET para /favicon.ico na raiz do site. Isso é a descoberta implícita de favicon — um comportamento nativo do navegador, não um bug no seu código.

E não são apenas os navegadores. Leitores de RSS, pré-visualizações de links do Slack, crawlers de mecanismos de busca e ferramentas de monitoramento de disponibilidade fazem a mesma solicitação automática. Portanto, mesmo que o seu navegador respeite uma tag <link rel="icon">, outros clientes ainda podem acessar /favicon.ico diretamente.

O erro é inofensivo, mas ruidoso. Ele não vai quebrar seu site, mas polui os logs do servidor, bagunça os dashboards de monitoramento e dificulta a identificação de erros reais.

A Correção Adequada: Sirva um favicon.ico Real na Raiz do Site

A solução mais confiável é colocar um arquivo favicon.ico real na raiz do seu site, para que a solicitação automática retorne um status 200 em vez de 404.

Você pode gerar um em favicon.io ou realfavicongenerator.net. Coloque o arquivo aqui:

/favicon.ico   ← navegadores e crawlers solicitam isso automaticamente

Isso funciona independentemente de quaisquer outras declarações de favicon que você tenha no seu HTML.

Configuração Moderna de Favicon: A Declaração HTML Completa

Depois de garantir que o favicon.ico está na raiz, adicione declarações explícitas no seu <head> para os navegadores modernos. A documentação do MDN Web Docs sobre rel=“icon” recomenda o uso de rel="icon" em vez do obsoleto rel="shortcut icon".

<!-- O arquivo /favicon.ico na raiz do seu site é servido automaticamente — nenhuma tag HTML é necessária -->

<!-- Favicon PNG -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">

<!-- Favicon SVG para navegadores que o suportam -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Apple Touch Icon para favoritos na tela inicial do iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App Manifest para PWAs instaláveis -->
<link rel="manifest" href="/manifest.webmanifest">

Alguns pontos importantes a destacar:

Favicons SVG são dimensionados perfeitamente em qualquer tamanho e suportam modo escuro via CSS prefers-color-scheme dentro do próprio SVG.
Apple Touch Icon é especificamente para iOS quando um usuário salva seu site na tela inicial. É separado do seu favicon e normalmente é um PNG de 180x180.
Ícones do Web App Manifest têm uma finalidade diferente — eles definem ícones para PWAs instalados. Não substituem o seu favicon e não evitarão o 404 de /favicon.ico.

E os Frameworks?

As ferramentas específicas de cada framework lidam com parte disso automaticamente. Por exemplo, o Next.js App Router trata um arquivo favicon.ico colocado no diretório app/ como uma convenção especial de arquivo e gera os metadados corretos automaticamente. Outros frameworks têm convenções semelhantes. Consulte a documentação do seu framework. Independentemente de como o favicon está configurado, ainda é uma boa prática garantir que as requisições para /favicon.ico sejam tratadas, pois navegadores, crawlers e outros clientes podem solicitar esse caminho diretamente.

Diagnóstico Rápido: Verifique o DevTools do Navegador

Abra a aba Network no DevTools, recarregue a página e filtre por favicon. Se você vir um 404 para favicon.ico, o arquivo na raiz está ausente ou não está sendo servido corretamente. Uma resposta 200 significa que está tudo resolvido.

Conclusão

Coloque um favicon.ico real na raiz do seu site — esse único arquivo elimina o 404 automático gerado por navegadores, crawlers e ferramentas de monitoramento. Em seguida, adicione declarações explícitas com <link rel="icon"> para o favicon SVG, o fallback PNG e o Apple Touch Icon, oferecendo aos navegadores modernos o melhor formato disponível. Logs limpos, ícones corretos, sem gambiarras.

Perguntas Frequentes

Você pode filtrá-lo do seu console, mas a requisição subjacente ainda chega ao seu servidor e aparece nos logs, análises e ferramentas de monitoramento. Servir um arquivo favicon.ico real é uma correção única que resolve o problema na origem, em vez de ocultá-lo. Além disso, dá muito menos trabalho do que configurar filtros em múltiplas ferramentas.

Sim. Muitos clientes, incluindo crawlers mais antigos, leitores de RSS e bots de pré-visualização de links, ignoram as tags link do HTML e solicitam /favicon.ico diretamente da raiz do site. Sem um arquivo lá, essas requisições retornam 404. Servir tanto um favicon.ico na raiz quanto declarações modernas com link cobre todos os clientes de forma confiável.

Um arquivo ICO com múltiplas resoluções contendo versões de 16x16, 32x32 e 48x48 pixels cobre praticamente todos os casos de uso. A maioria dos geradores de favicon produz isso automaticamente. Se você precisar de apenas um tamanho, 32x32 é o padrão mais seguro, pois funciona bem nas abas do navegador e nas barras de favoritos em todas as principais plataformas.

Os navegadores armazenam favicons em cache de forma agressiva, às vezes por dias. Tente um hard refresh, limpe o cache do navegador ou teste em uma janela privada. Verifique também se o arquivo está realmente sendo servido a partir da raiz do site e se retorna uma resposta bem-sucedida. Se ele carregar corretamente, o 404 deve desaparecer assim que o cache expirar.

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.