Um favicon é o pequeno ícone que aparece nas abas do navegador, nos favoritos, nos resultados de busca e nos atalhos da tela inicial do celular — e é um dos elementos que mais silenciosamente falham em sites reais. Este guia cobre todos os métodos para encontrar e verificar o favicon de um site, o conjunto completo de dimensões que os navegadores esperam, os motivos mais comuns de um favicon não aparecer e como gerar um conjunto correto do zero.
O que é um favicon?
Um favicon (abreviação de "favourites icon", ícone de favoritos) é um pequeno arquivo de imagem que representa um site nas abas do navegador, na barra de endereços, nos favoritos, nas listas de histórico e nas páginas de resultados dos buscadores. Normalmente é uma imagem quadrada de 16×16 ou 32×32 pixels, embora navegadores modernos solicitem vários tamanhos conforme o contexto — um atalho na tela inicial do iOS precisa de uma imagem de 180×180 pixels, enquanto uma instalação PWA no Android precisa de versões de 192×192 e 512×512 pixels.
Por que favicons importam além da marca
Um favicon corretamente configurado traz três benefícios práticos além da identidade visual. Primeiro, o Google exibe favicons ao lado dos resultados de busca nas SERPs — um favicon ausente ou quebrado mostra um ícone de globo genérico, o que passa impressão pouco profissional. Segundo, navegadores móveis usam arquivos de favicon para criar atalhos na tela inicial — um site sem um ícone de toque no tamanho certo recebe uma captura de tela de baixa qualidade como atalho. Terceiro, os favicons de aba ajudam os usuários a identificar e voltar para a sua aba quando muitas estão abertas.
O formato legado favicon.ico
O formato `.ico` nasceu com o Internet Explorer em 1999 e se tornou o padrão universal porque os navegadores solicitam automaticamente `/favicon.ico` na raiz de todo domínio — sem precisar de tag link. Um arquivo `.ico` moderno é um contêiner que guarda vários tamanhos (tipicamente 16×16 e 32×32) em um único arquivo. Apesar da idade, o `favicon.ico` continua importante como alternativa universal para navegadores antigos, clientes de e-mail e ferramentas que não leem tags link do HTML.
Note
Como encontrar o favicon de um site
Há três métodos confiáveis para encontrar a URL do favicon de um site. O mais rápido resolve a maioria dos casos; os outros servem de alternativa para sites com configurações personalizadas.
Método 1: o caminho padrão /favicon.ico
Acrescente `/favicon.ico` a qualquer domínio e abra em uma aba do navegador. Por exemplo: `https://example.com/favicon.ico`. Se uma imagem de ícone aparecer na aba e renderizar na página, o arquivo existe e carrega corretamente. Se você vir uma página de erro ou uma página branca em branco, o arquivo não existe ou o servidor está mal configurado. Este método funciona para a maioria dos sites que usam o caminho convencional.
Método 2: ver o código-fonte em busca de tags link
Clique com o botão direito em qualquer página e escolha "Ver código-fonte" (ou pressione Ctrl+U no Windows, Cmd+U no Mac). Procure no HTML por `rel="icon"` ou `rel="shortcut icon"`. O valor do atributo `href` da tag `<link>` correspondente é o caminho exato do favicon. Isso encontra localizações personalizadas — sites servidos de uma CDN costumam usar URLs absolutas como `https://cdn.example.com/assets/favicon.svg` em vez do caminho raiz padrão.
Método 3: conferir o manifesto do app web
Aplicações web progressivas declaram seus ícones em um arquivo `manifest.json` vinculado via `<link rel="manifest">` no head do HTML. Abra a URL do manifesto e procure o array `icons` — cada entrada lista um caminho de imagem e seu tamanho em pixels. É assim que Android e Chrome lidam com instalações PWA, e o manifesto costuma ser o único lugar onde os caminhos PNG de 192×192 e 512×512 são declarados.
Tip
Como verificar se um favicon funciona
Verificar se um favicon está corretamente configurado exige mais do que confirmar que o arquivo existe. Um favicon pode existir e ainda assim não aparecer se o servidor devolver o tipo de conteúdo errado, se o arquivo for pequeno demais para o contexto solicitado ou se o navegador tiver uma versão em cache desatualizada.
Abra a URL do favicon diretamente em uma aba
Navegue diretamente para a URL do favicon — por exemplo, `https://seudominio.com/favicon.ico`. Se a imagem do favicon renderizar na aba e aparecer como ícone na barra de abas do navegador, o arquivo é servido corretamente. Se você vir uma página HTML ou um erro, a URL aponta para o arquivo errado ou o servidor está redirecionando a requisição.
Confira o cabeçalho de resposta Content-Type
Abra o DevTools, vá à aba Network, recarregue a página e filtre pela requisição do favicon. Clique na entrada do favicon e examine a seção Response Headers. O `Content-Type` deve ser `image/x-icon` para arquivos `.ico`, `image/png` para `.png` ou `image/svg+xml` para `.svg`. Uma resposta com `text/html` significa que o servidor está devolvendo uma página HTML — normalmente uma página 404 — em vez do arquivo de favicon real.
Verifique se as dimensões da imagem estão corretas
Baixe o arquivo de favicon e confira suas dimensões com o verificador de dimensões de imagem. Um `favicon.ico` deve conter tamanhos embutidos de pelo menos 16×16 e 32×32. Ícones de toque da Apple devem medir exatamente 180×180. Ícones do manifesto PWA devem ser 192×192 e 512×512. Um favicon com dimensão errada aparece borrado ou é silenciosamente ignorado pelo navegador naquele contexto específico.
Recarga forçada para furar o cache do favicon
Navegadores fazem cache de favicons de forma agressiva — às vezes por dias. Se você atualizou seu favicon mas o antigo continua aparecendo, pressione Ctrl+Shift+R (Windows/Linux) ou Cmd+Shift+R (Mac) para forçar a recarga e fazer o navegador buscar o ícone de novo. No Chrome, você também pode clicar com o botão direito na aba, escolher "Recarregar", ou limpar o cache do favicon via DevTools → Application → Storage → Clear Site Data.
Confirme que o favicon não está bloqueado pelo robots.txt
Se o seu favicon não aparece nos resultados da Pesquisa Google, verifique que seu `robots.txt` não desautoriza o acesso ao arquivo de favicon nem ao diretório onde ele fica. O rastreador do Google busca favicons de forma independente e respeita o `robots.txt` — uma URL de favicon bloqueada faz o globo genérico aparecer ao lado do seu site nas SERPs. Use o explicador de conflitos de regras do robots.txt para verificar que sua configuração do robots.txt não bloqueia o caminho do favicon.
Verificador de Dimensões de Imagem
Confira as dimensões em pixels de qualquer arquivo de imagem instantaneamente — confirme que seu favicon, ícone de toque e ícones PWA têm os tamanhos corretos antes de adicioná-los ao seu HTML.
Dimensões e formatos de favicon
A quantidade de arquivos de favicon que um site bem configurado precisa caiu bastante com o suporte dos navegadores modernos. Entender quais dimensões ainda são necessárias — e quais já são redundantes — permite montar um conjunto de favicons mínimo e correto.
| Arquivo de favicon | Dimensão | Usado por | Necessário? |
|---|---|---|---|
| favicon.ico | 16×16 + 32×32 | Navegadores antigos, barras de favoritos | ✓ Sim - alternativa universal |
| favicon-32x32.png | 32×32 px | Navegadores modernos (aba) | ✓ Sim - PNG principal |
| apple-touch-icon.png | 180×180 px | Favoritos da tela inicial do iOS | ✓ Sim - exigido pelo iOS |
| icon-192x192.png | 192×192 px | Instalações PWA no Android | ✓ Sim - exigido pela PWA |
| icon-512x512.png | 512×512 px | Telas de abertura da PWA | ✓ Sim - exigido pela PWA |
| favicon.svg | Escalável | Todos os navegadores modernos | ✓ Recomendado - substitui a maioria dos PNG |
| favicon-16x16.png | 16×16 px | Navegadores antigos (aba) | ✗ Opcional - o .ico cobre isso |
| mstile-150x150.png | 150×150 px | Blocos de início do Windows 8/10 | ✗ Obsoleto - ignorado pelo Windows 11+ |
| browserconfig.xml | N/D | IE 11 / sites fixados do Windows | ✗ Obsoleto - IE aposentado em 2022 |
O caso a favor dos favicons SVG
Favicons SVG são suportados por todos os navegadores principais desde 2021. Um único arquivo `favicon.svg` renderiza perfeitamente em qualquer tamanho — 16×16 numa aba, 32×32 numa barra de favoritos ou qualquer resolução intermediária em telas de alta densidade. SVG também aceita uma media query `prefers-color-scheme` dentro do próprio arquivo, permitindo ao favicon alternar automaticamente entre uma versão clara e uma escura conforme o tema do sistema. Um arquivo SVG substitui todos os PNG de favicon exceto o ícone de toque da Apple e os ícones do manifesto PWA.
Note
Problemas comuns de favicon e soluções
A maioria das falhas de favicon cai em um pequeno número de categorias previsíveis. Cada uma tem uma correção direta assim que você sabe onde olhar.
Favicon não aparece na aba do navegador
A causa mais comum é a ausência da tag `<link rel="icon">` combinada com a falta do arquivo `/favicon.ico`. Os navegadores recorrem automaticamente à requisição de `/favicon.ico`, mas se esse arquivo devolve 404, nenhum ícone aparece. Corrija adicionando o arquivo na raiz do domínio e uma tag `<link rel="icon" href="/favicon.ico">` no `<head>` do seu HTML. Para caminhos personalizados, a tag link é obrigatória — o navegador não adivinha localizações personalizadas.
Favicon aparece em branco ou como imagem quebrada
Um ícone de favicon quebrado na aba normalmente significa que o arquivo existe mas não é um formato de imagem válido. A causa mais comum é salvar um arquivo PNG com extensão `.ico` sem a conversão adequada. Use o detector de formato de imagem para confirmar o formato real do arquivo — um arquivo chamado `favicon.ico` pode ser internamente um PNG, um JPEG ou um documento HTML. A solução é gerar um `.ico` de verdade com o gerador de favicon.
Google mostra o favicon errado nos resultados de busca
O Google faz cache de favicons e os atualiza de forma independente dos rastreamentos regulares — pode levar de dias a semanas para um favicon novo aparecer nas SERPs. Para acelerar o processo: verifique que a URL do favicon é publicamente acessível (não bloqueada pelo robots.txt nem protegida por autenticação), confirme que o arquivo tem o cabeçalho Content-Type correto e solicite uma reindexação no Google Search Console. O Google exige um favicon mínimo de 48×48 pixels para exibição na SERP; imagens menores são ignoradas.
Favicon antigo persistindo depois de uma atualização
Os caches de favicon dos navegadores são persistentes e não respeitam os cabeçalhos de cache HTTP da mesma forma que os recursos comuns. Uma recarga forçada (Ctrl+Shift+R ou Cmd+Shift+R) força a maioria dos navegadores a buscar o favicon de novo. No Chrome, você pode limpar via DevTools → Application → Storage → Clear Site Data. Como estratégia de deploy, mudar o nome do arquivo de favicon ou acrescentar uma query string anti-cache ao href da tag link força todos os navegadores a buscar a versão nova imediatamente.
Warning
Gerar um conjunto de favicons completo
Criar manualmente todos os tamanhos de favicon necessários do zero é trabalhoso e sujeito a erros. A abordagem prática é partir de uma imagem de origem em alta resolução e gerar automaticamente todos os tamanhos exigidos.
Requisitos da imagem de origem
- Mínimo 512×512 pixels — é o maior tamanho exigido (tela de abertura da PWA) e serve como origem de redução para todos os tamanhos menores
- Proporção quadrada — favicons são sempre quadrados; uma origem não quadrada é cortada ou distorcida
- Fundo transparente — um PNG transparente funciona melhor que um fundo branco, que aparece como um quadrado branco nas abas em modo escuro
- Design simples — detalhes finos e linhas finas ficam empastados a 16×16 px; logotipos com traços grossos e pouca complexidade funcionam melhor em tamanhos pequenos
- Formato PNG ou SVG — ambos preservam a qualidade em qualquer tamanho; evite o JPEG, que introduz artefatos de compressão em bordas duras
Usando o gerador de favicon
Envie sua imagem de origem ao gerador de favicon e ícones de app. A ferramenta gera o conjunto padrão completo — `favicon.ico` (16×16 e 32×32), `favicon-32x32.png`, `apple-touch-icon.png` (180×180), `android-chrome-192x192.png` e `android-chrome-512x512.png` — junto com as tags link HTML exatas para colar no seu `<head>`. Toda a geração roda no seu navegador; sua imagem nunca é enviada a nenhum servidor.
Gerador de Favicon e Ícones de App
Envie uma única imagem de alta resolução e gere o conjunto completo de favicons — ICO, todos os tamanhos PNG, ícone de toque da Apple — mais as tags link HTML para copiar para o seu site.
Analisando um conjunto de favicons existente
Se você já tem um conjunto de favicons e quer saber quais arquivos são redundantes para navegadores modernos, o analisador de tamanho de bundle de favicon lista cada arquivo do seu conjunto, identifica tamanhos obsoletos (como os ícones iOS de 57×57 e 72×72 que o iOS moderno ignora) e recomenda o conjunto moderno mínimo. Reduzir um conjunto inchado de 15 arquivos para 5 reduz meaningfulmente o peso da página em cada requisição.
Boas práticas de favicon para 2026
O cenário dos favicons se estabilizou bastante. Este é o consenso atual sobre a implementação mínima correta para 2026.
O conjunto moderno mínimo de favicons
Você precisa de cinco arquivos e cinco tags link. Adicione `favicon.svg` como ícone principal (todos os navegadores modernos), `favicon.ico` como alternativa (legado e ferramentas que não parseiam HTML), `apple-touch-icon.png` em 180×180 para iOS, e `android-chrome-192x192.png` mais `android-chrome-512x512.png` referenciados no seu `manifest.json` para instalações PWA. As tags HTML dos três primeiros vão no seu `<head>`; os ícones PWA são declarados apenas no manifesto.
Favicons SVG suportam modo escuro, escalam perfeitamente em qualquer resolução e substituem todos os tamanhos PNG de que os navegadores modernos precisam. O favicon.ico existe puramente como alternativa para a cauda longa de clientes que não são navegadores.
Favicons para modo escuro
Favicons SVG podem embutir uma media query `prefers-color-scheme` para mostrar cores diferentes nos temas claro e escuro do sistema. É o único formato de favicon que suporta ícones sensíveis ao tema sem JavaScript. Um favicon SVG em modo escuro mantém sua marca legível em temas escuros de navegador, onde um ícone claro pode parecer desaparecer contra o fundo da aba.
Tip
Key takeaways
- Encontre o favicon de qualquer site acrescentando /favicon.ico ao domínio ou vendo o código-fonte e buscando rel="icon".
- Um favicon pode existir e ainda assim não aparecer se o servidor devolver o Content-Type errado, se a imagem tiver o tamanho errado ou se o navegador tiver um cache desatualizado.
- Faça recarga forçada (Ctrl+Shift+R / Cmd+Shift+R) para furar o cache de favicon do navegador ao verificar um ícone atualizado.
- O conjunto moderno mínimo de favicons é: favicon.svg, favicon.ico (alternativa legada), apple-touch-icon.png (180×180) e os PNG de 192×192 + 512×512 para PWA.
- Use o gerador de favicon e ícones de app para produzir todos os tamanhos exigidos a partir de uma única imagem de origem de 512×512.
- Favicons SVG são a melhor escolha moderna — escalam perfeitamente e suportam modo escuro via media queries CSS dentro do arquivo.
- O Google exige um favicon mínimo de 48×48 px para exibição na SERP; verifique que ele é publicamente acessível e não bloqueado pelo robots.txt.