favicon.ico: O Que É e Se Você Ainda Precisa de Um
favicon.ico é o arquivo de ícone que os navegadores solicitam da raiz do seu domínio em /favicon.ico quando uma página não declara nenhum ícone próprio. É um container ICO, então um único arquivo pode conter vários bitmaps de uma vez (geralmente 16x16, 32x32 e 48x48), e o cliente escolhe o tamanho que precisa. Você ainda vai querer um, porque crawlers, leitores de feed e bots de prévia de link solicitam exatamente esse caminho sem ler o seu HTML.
Uma convenção, não um padrão
O caminho /favicon.ico nunca foi especificado por ninguém; o Internet Explorer 5 o solicitava, e o resto da web seguiu. É por isso que ele funciona sem nenhuma marcação. Um navegador que não encontra nenhuma tag de link de ícone na sua página simplesmente pede esse caminho ao servidor e usa o que voltar.
O efeito colateral é que a requisição acontece quer você tenha o arquivo ou não. Se ele estiver ausente, o servidor registra um 404 para cada visitante, e qualquer ferramenta que verifique apenas esse caminho mostra um marcador em branco para o seu site.
O que há dentro de um favicon.ico típico
| Entrada | Usada para |
|---|---|
| 16x16 | Barra de endereços, listas de favoritos, entradas de histórico |
| 32x32 | Abas do navegador em telas de densidade padrão |
| 48x48 | Atalhos do Windows e abas de maior densidade |
Onde o arquivo vai
- public/
- favicon.icoaddServed at /favicon.ico
- favicon-32x32.pngPrimary tab icon
- apple-touch-icon.pngiOS Home Screen
Ele precisa ser resolvido na raiz do site, não em um subdiretório. A maioria dos frameworks mapeia um diretório public ou static para a raiz exatamente por isso; alguns, incluindo o Next.js recente, também aceitam um app/favicon.ico e configuram a tag para você.
Declarando-o explicitamente
<link rel="icon" href="/favicon.ico" sizes="any">Opcional, já que o caminho é solicitado de qualquer forma, mas vale a pena adicionar: torna o conjunto de ícones visível na marcação e permite forçar a atualização do cache com uma query string quando o ícone muda.
Perguntas frequentes sobre favicon.ico
O favicon.ico pode ser, na verdade, um PNG?
Os navegadores farejam o conteúdo em vez de confiar na extensão, então um PNG servido em /favicon.ico geralmente funciona. Ainda assim é uma má ideia. Você perde o comportamento de múltiplos tamanhos que é a única razão para usar o caminho, e consumidores mais rígidos podem rejeitá-lo.
Como paro os 404s nos meus logs?
Entregue o arquivo. Suprimir a linha de log esconde o sintoma enquanto toda ferramenta que solicita o caminho continua sem receber nada de volta.
O arquivo precisa estar na raiz?
Para a requisição automática, sim. Os clientes pedem /favicon.ico especificamente. Você pode servir um ícone de qualquer caminho se apontar para ele com uma tag de link, mas o arquivo na raiz é o que cobre os clientes que nunca analisam o seu HTML.