O que é um Favicon (e quais tamanhos preciso)?

Um favicon (abreviação de "favorite icon") é o pequeno gráfico que os navegadores mostram ao lado do título da página na aba, na barra de favoritos, no histórico e cada vez mais nos resultados de motores de busca. O nome remonta ao Internet Explorer 5 em 1999, onde o ícone era usado puramente como identificador de favorito. Vinte e cinco anos depois, o mesmo formato de arquivo e a mesma marcação HTML ainda funcionam, mas o papel do favicon se expandiu tanto além desse propósito original que "apenas faça upload de um .ico 16x16" já não é a resposta certa.

Para que um favicon é realmente usado hoje

Navegadores e sistemas operacionais modernos puxam do conjunto de favicons para uma ampla gama de contextos, cada um com expectativas distintas de tamanho e formato:

• Abas e favoritos do navegador. Normalmente renderizado a 16x16 ou 32x32 pixels CSS, mas em telas de alta densidade o navegador puxa uma versão maior e a reduz. Um ícone diminuto e pixelado ao lado de um título nítido parece desatualizado.
• Resultados de pesquisa. O Google mostra favicons ao lado dos resultados móveis desde 2019 e no desktop desde 2023. O ícone deve ter pelo menos 48x48, múltiplos de 48 são recomendados, e o arquivo deve ser rastreável.
• Tela inicial do iOS e Android. Quando um usuário escolhe "adicionar à tela inicial", o iOS puxa o apple-touch-icon (180x180), o Android puxa ícones do web app manifest (tipicamente 192x192 e 512x512). Sem declarações explícitas, ambas as plataformas geram uma captura borrada como fallback.
• Progressive Web Apps. PWAs instalados como apps autônomos dependem do web app manifest para os ícones no lançador de apps, no alternador de tarefas e na splash screen. Tamanhos errados aqui significam um site instalável que parece quebrado.
• Abas fixadas no Safari macOS. Usa um SVG monocromático separado (mask-icon) para a aparência das abas fixadas. Um caso de nicho, mas trivial de suportar.
• Fixação de blocos no Windows. O Edge e o menu Iniciar do Windows podem fixar sites como blocos, o que requer um conjunto separado de declarações msapplication-TileImage.

A consequência pragmática: você precisa de um pequeno conjunto de arquivos (tipicamente quatro a seis), não um único .ico, e algumas tags HTML link para declará-los.

Quais formatos de arquivo importam

Três formatos são relevantes em 2026, e os dias de precisar de todos simultaneamente acabaram.

• PNG. O padrão certo. Suporte universal, sem perdas, fundos transparentes funcionam em todo lugar. Um PNG por tamanho-alvo.
• SVG. Suportado por todos os navegadores modernos para favicons. Um SVG escala para qualquer tamanho e permanece nítido em telas de alta densidade sem assets retina separados. Ressalva: favicons SVG devem ser autocontidos (sem referências externas, sem folhas de estilo externas, sem fontes embutidas) e o Safari só os suporta junto com um fallback PNG.
• ICO. O formato contêiner legado que pode conter vários tamanhos em um único arquivo. Ainda útil para um caso específico: a requisição para /favicon.ico na raiz do site, que todo navegador, leitor RSS e crawler faz implicitamente mesmo se você não fizer link para ele. Devolver um 404 é inofensivo mas gera ruído nos logs do servidor. Um pequeno .ico multi-tamanho (16x16, 32x32, 48x48 em um arquivo) silencia isso.

WebP e AVIF, embora excelentes para imagens de conteúdo, não são usados para favicons porque o suporte dos navegadores nesse papel é inconsistente. Fique com PNG e SVG.

A lista real de arquivos que você precisa em 2026

Um conjunto sólido e à prova de futuro cobre todos os contextos acima com este mínimo:

• favicon.ico — multi-tamanho (16, 32, 48), colocado na raiz do site
• favicon.svg — escalável, usado por navegadores modernos quando disponível
• favicon-96x96.png — fallback raster explícito em um tamanho médio confortável
• apple-touch-icon.png — 180x180, sem transparência (o iOS arredonda os cantos sozinho)
• web-app-manifest-192x192.png — tela inicial Android, lançador PWA
• web-app-manifest-512x512.png — splash screen PWA, contextos de bloco grande

São seis arquivos. O HTML correspondente no <head>:

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

E um site.webmanifest mínimo:

{
  "name": "Nome do Seu Site",
  "short_name": "Site",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Isso cobre abas do navegador, favoritos, resultados de pesquisa do Google, tela inicial iOS, tela inicial Android e instalação PWA. Qualquer coisa além disso é território de caso extremo.

Restrições de design para um favicon que realmente seja legível

A parte mais difícil do design de favicon não é a exportação, é fazer algo legível a 16x16. Algumas regras práticas que produzem consistentemente bons resultados:

• Simplifique sem dó. Um logo completo raramente funciona como favicon 16x16. Use um único elemento dominante: uma letra, um símbolo, uma marca abstrata. Qualquer coisa com traços finos ou detalhes delicados vira borrão.
• Forte contraste. O favicon vive em um chrome de navegador claro ou escuro que você não pode prever. Branco puro sobre transparente desaparece em temas claros; preto puro sobre transparente desaparece em temas escuros. Use um fundo sólido ou projete para ambos os modos (um SVG com media queries prefers-color-scheme funciona).
• Proporção quadrada com margem segura. Projete em uma tela quadrada mas mantenha cerca de 10% de padding das bordas. Algumas plataformas (iOS, ícones adaptativos do Android) cortam ou mascaram o ícone, e um design que vai até a borda é cortado.
• Teste no tamanho real. Olhar um ícone 16x16 com zoom de 200% é enganoso. Renderize-o a 100% ao lado de outras abas para ver como ele realmente compete por atenção.

WordPress: como o Ícone do Site funciona

O WordPress tem suporte a favicon integrado desde a versão 4.3. No admin, sob Aparência, Personalizar, Identidade do Site, há um campo "Ícone do Site" que aceita uma única imagem quadrada, mínimo 512x512. O WordPress então gera e serve automaticamente os vários tamanhos de favicon a partir dessa fonte.

A geração automática cobre favicon.ico, apple-touch-icon a 180x180 e os tamanhos PNG padrão no head HTML. Não gera um web app manifest por padrão, então a instalação PWA fará fallback para o apple-touch-icon. Para a maioria dos sites, isso é suficiente.

As limitações do Site Icon integrado: não pode servir arquivos diferentes por resolução (sem suporte a SVG além de conversão para raster) e não produz um manifest com o tamanho 512x512 maior que instalações PWA e splash screens Android preferem. Para um site onde a aparência PWA realmente importa, complementar o Site Icon com tags <link> manuais via functions.php de um child theme é o caminho mais limpo. Plugins como o RealFaviconGenerator (também um excelente gerador web se você quiser pular a exportação manual) lidam com isso de ponta a ponta.

Como verificar se seu setup de favicon funciona

1. Verificação de aba. Abra o site em uma janela anônima (para evitar favicons em cache) e confirme que o ícone aparece ao lado do título. Teste pelo menos no Chrome, Firefox e Safari.
2. Requisição à raiz. Visite /favicon.ico diretamente. Deve retornar um 200 com o ícone, não um 404. Muitos sites falham nisso mesmo quando o HTML tem um <link rel="icon"> correto.
3. Tela inicial iOS. Em um iPhone, toque no botão compartilhar no Safari e "Adicionar à Tela de Início". A visualização deve mostrar seu ícone nítido 180x180, não uma captura borrada da página.
4. Pesquisa Google. Pesquise seu site em um dispositivo móvel. O ícone deve aparecer ao lado do resultado. Se não, a URL do Google https://www.google.com/s2/favicons?domain=seusite.com mostra o que o crawler tem atualmente em cache.
5. Lighthouse. A auditoria PWA do Lighthouse no Chrome DevTools detecta entradas de manifest ausentes, tamanhos errados e outros problemas de declaração.

Problemas comuns e o que os causa

• "Meu favicon não aparece." Quase sempre é um problema de cache. Navegadores cacheiam favicons de forma muito agressiva. Limpe o cache de favicons (Chrome: visite chrome://favicon-cache, Firefox: limpe cache e dados offline) ou teste em modo anônimo.
• "Aparece no desktop mas não no celular." Geralmente um apple-touch-icon ausente ou caminho de manifest errado. Navegadores móveis priorizam seus próprios ícones específicos da plataforma em vez do <link rel="icon"> genérico.
• "A pesquisa do Google mostra um globo genérico." Ou o favicon é pequeno demais (menos de 48x48), ou o arquivo não é rastreável (bloqueado por robots.txt, atrás de autenticação, content-type errado), ou o Google simplesmente ainda não recratreou. A latência de recrawl para favicons frequentemente é de semanas.
• "O ícone da tela inicial tem uma caixa branca em volta." Imagens apple-touch-icon não devem ter transparência; o iOS não nivela fundos transparentes para sua cor de tema, deixa-os brancos. Salve com um fundo sólido que combine com sua marca.
• "O ícone parece embaçado em telas retina." Apenas o pequeno favicon.ico está sendo servido. Navegadores modernos usarão a versão SVG ou PNG 96x96 se você declarar; verifique se o HTML realmente inclui essas link tags.

O que o InspectWP verifica

A seção de favicon de um relatório do InspectWP verifica que um favicon está declarado no head HTML, que a URL /favicon.ico retorna uma resposta válida e que um apple-touch-icon está definido para suporte à tela inicial iOS. Faltar qualquer um destes é um achado de baixa severidade, mas o efeito cumulativo nas primeiras impressões (resultados de pesquisa, favoritos, tela inicial móvel) é real. Um site que parece polido em todo lugar exceto no favicon dá impressão de inacabado. A boa notícia: é uma configuração única que, bem feita, nunca mais precisa ser tocada.