Favicon - Docs do MetricSpot

Q: Porque é que o meu favicon não aparece nos resultados do Google?

Três causas comuns: 1. O URL devolve 404 ou 403 — verifica com curl -I https://teusite.com/favicon.ico. 2. O ícone é demasiado pequeno (abaixo de 8×8) — gera um ICO multi-resolução a 16, 32 e 48. 3. O Google ainda não rastreou o site desde que o adicionaste — espera até uma semana, ou pede indexação no Search Console.

O que esta verificação faz

Procura no <head> por um <link rel="icon"> ou <link rel="shortcut icon"> (ou, em alternativa, um /favicon.ico na raiz do domínio) e verifica se o ficheiro referenciado carrega.

Porque é importante

Três sítios usam o teu favicon, todos virados ao utilizador:

Separadores e marcadores do navegador — identificação visual instantânea quando um utilizador tem 30 separadores abertos.
Resultados de pesquisa Google — o Google mostra favicons ao lado do nome do site nos SERPs móveis e, cada vez mais, no desktop. Sites sem favicon mostram um ícone genérico de globo, o que parece inacabado ao lado dos concorrentes.
Histórico do navegador, transferências, comutadores de apps do SO — em qualquer sítio onde o SO ou o navegador guardam em cache a identidade do teu site.

Não ter favicon é o equivalente visual de enviar uma carta sem remetente. O site continua a funcionar; só não parece sério.

Como corrigir

Envia dois ficheiros de ícone e liga-os corretamente:

1. O clássico .ico — para navegadores legados e o caminho de auto-deteção.

Coloca-o na raiz do domínio:

public/favicon.ico   (ICO multi-resolução 16×16, 32×32)

A maioria dos navegadores busca /favicon.ico automaticamente mesmo sem uma tag <link>, mas explícito é melhor.

2. Um ícone SVG — para navegadores modernos, escala para qualquer tamanho.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

O navegador escolhe o que prefere (Chrome e Firefox preferem SVG; o Safari cai para ICO).

3. Uso em PWA / ícone grande — emparelha com apple-touch-icon e o web manifest.

<link rel="apple-touch-icon" href="/apple-touch-icon.png">  <!-- 180×180 -->
<link rel="manifest" href="/site.webmanifest">

Vê as verificações do Apple touch icon e web manifest.

Bloco head completo:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Isto é tudo o que a maioria dos sites precisa.

Gerar o conjunto completo a partir de uma fonte:

O RealFaviconGenerator aceita uma imagem-fonte (idealmente SVG ou PNG 512×512) e gera toda a família de ícones e o HTML para colar. Cobre iOS, Android, tiles do Windows e instalabilidade PWA.

Astro: coloca os ficheiros em public/ e liga-os no <head> da tua layout. O Astro já configura o link rel="icon" a partir de astro:assets se o usares.

Next.js (App Router): põe favicon.ico e opcionalmente icon.svg diretamente em app/. A framework injeta automaticamente as tags <link>.

app/
  favicon.ico       # ligado automaticamente
  icon.svg          # opcional, ligado automaticamente
  apple-icon.png    # opcional, 180×180, ligado automaticamente

WordPress: Aparência → Personalizar → Identidade do Site tem um carregador de “Ícone do Site”. O WordPress gera e liga o conjunto completo automaticamente.

Notas de design:

Usa um design quadrado. Os navegadores cortam para quadrado, de qualquer forma.
Alto contraste — os favicons aparecem a 16×16 nos separadores, onde o detalhe fino desaparece.
Testa em modo escuro. Um logo sobre fundo transparente que funciona em branco pode ficar invisível em separadores escuros.

Requisitos do SERP Google:

O Google tem regras adicionais para o favicon do SERP — quadrado, pelo menos 8×8 e com URL estável. Sites que rodam o URL do favicon a cada deploy podem aparecer como globo no Google. Usa um nome de ficheiro estável e nunca lhe coloques query string.

Perguntas frequentes

Preciso de `.ico`, ou SVG chega?

Os dois, por agora. SVG é o futuro, ICO é o presente — o Safari e algumas versões antigas do Chrome ainda preferem ICO para o separador. Até 2027 mais ou menos, envia os dois.

Porque é que o meu favicon não aparece nos resultados do Google?

Três causas comuns:

O URL devolve 404 ou 403 — verifica com curl -I https://teusite.com/favicon.ico.
O ícone é demasiado pequeno (abaixo de 8×8) — gera um ICO multi-resolução a 16, 32 e 48.
O Google ainda não rastreou o site desde que o adicionaste — espera até uma semana, ou pede indexação no Search Console.

E o truque do favicon claro/escuro?

Os navegadores modernos suportam ícones SVG com media-query:

<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)" type="image/svg+xml">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)" type="image/svg+xml">

Ou embebe os dois num único SVG com uma tag <style> a usar prefers-color-scheme. Qualquer um funciona; o segundo é menos um pedido HTTP.