Como Adicionar um Favicon ao Seu Site WordPress

Adicionar um favicon ao WordPress leva cerca de 30 segundos: vá em Aparência → Personalizar → Identidade do site → Ícone do site, faça upload de um PNG de 512x512 e clique em Publicar. Pronto.

Mas se isso não funcionar — ou se você quiser mais controle — continue lendo. Existem alguns detalhes que vale a pena conhecer.

O Jeito Rápido: Personalizador do WordPress

Isso funciona em qualquer site WordPress rodando a versão 4.3 ou posterior (lançada em 2015). Se você está em uma versão minimamente recente, essa opção está disponível.

Passo 1: Abra o Personalizador

• Vá em Aparência → Personalizar no painel administrativo do WordPress
• Ou clique em "Personalizar" na barra de administração enquanto visualiza seu site

Passo 2: Encontre Identidade do Site

• Clique em Identidade do site na barra lateral do Personalizador
• Role até Ícone do site

Passo 3: Faça Upload da Sua Imagem

• Clique em Selecionar ícone do site
• Faça upload de uma imagem PNG de pelo menos 512 x 512 pixels
• O WordPress gera automaticamente todos os tamanhos menores necessários (incluindo 32x32, 180x180, etc.)
• Recorte se solicitado, depois clique em Publicar

É isso. O WordPress cuida do resto — ele cria as tags <link> para favicons de navegador, ícones Apple touch e até a imagem de tile do Windows.

O Jeito via Código: Adicionando Favicon Manualmente

Às vezes, a abordagem pelo Personalizador não é suficiente. Talvez você esteja construindo um tema personalizado ou seu tema sobrescreve o comportamento padrão. Veja como adicionar via código.

Opção A: Coloque os Arquivos no Seu Tema

Faça upload dos arquivos de favicon para o diretório raiz do seu tema e adicione isso ao functions.php do tema:

function custom_favicon() {
    $favicon_url = get_stylesheet_directory_uri();
    ?>
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $favicon_url; ?>/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $favicon_url; ?>/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $favicon_url; ?>/apple-touch-icon.png">
    <?php
}
add_action('wp_head', 'custom_favicon');

Opção B: Use um Favicon SVG

Favicons SVG escalam perfeitamente e suportam modo escuro. Adicione isso ao functions.php:

function svg_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.svg';
    ?>
    <link rel="icon" type="image/svg+xml" href="<?php echo $favicon_url; ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon-32x32.png">
    <?php
}
add_action('wp_head', 'svg_favicon');

O fallback em PNG está ali para o Safari, que ainda não suporta totalmente favicons SVG.

Usando um Plugin (Se Preferir)

Vários plugins lidam com favicons, mas sinceramente? O Personalizador integrado funciona bem para a maioria dos sites. Plugins fazem sentido se você precisa de:

• Favicons diferentes por página ou post
• Testes A/B com diferentes ícones
• Multisite com favicons por site

Opções populares incluem All in One Favicon e Flavor (antigo flavicon). Mas novamente — tente o Personalizador primeiro.

Temas de Bloco do WordPress (Edição Completa do Site)

Se você está usando um tema de bloco como Twenty Twenty-Four ou Twenty Twenty-Five, o processo é um pouco diferente:

1. Vá em Aparência → Editor
2. Clique em Estilos (o ícone de meio-círculo)
3. Navegue até os estilos globais do seu site
4. A configuração do Ícone do site ainda está em Aparência → Personalizar → Identidade do site

Temas de bloco ainda usam o mesmo Personalizador para o favicon. O WordPress ainda não moveu isso para o Editor do Site.

Arquivos de Favicon Recomendados

Para cobertura completa, prepare estes arquivos:

O Personalizador do WordPress cuida da maioria desses automaticamente quando você faz upload de uma imagem de 512x512. Os arquivos SVG e ICO precisam ser adicionados manualmente se você os quiser.

Solução de Problemas: Favicon Não Aparece

Limpe Tudo

Problemas de favicon no WordPress quase sempre são relacionados a cache:

1. Cache do navegador: Atualize forçadamente com Ctrl+Shift+R (Windows) ou Cmd+Shift+R (Mac)
2. Cache do WordPress: Se você usa WP Super Cache, W3 Total Cache ou LiteSpeed Cache — limpe o cache
3. Cache do CDN: Cloudflare, Fastly ou qualquer que você use — limpe as URLs do favicon
4. Tente modo anônimo: Abre uma sessão limpa sem arquivos em cache

Verifique Conflitos de Plugins

Alguns plugins de SEO e frameworks de tema injetam suas próprias tags de favicon. Se você ver tags <link rel="icon"> duplicadas no código-fonte da página:

1. Visualize o código-fonte da página (Ctrl+U)
2. Procure por "icon" ou "favicon"
3. Se houver duplicatas, verifique qual plugin as está adicionando
4. Desative o recurso de favicon do plugin ou remova seu código manual

Problemas de Sobrescrita do Tema

Alguns temas (especialmente premium) têm suas próprias configurações de favicon que sobrescrevem o Personalizador. Verifique:

• O painel de Opções do Tema para uma configuração de favicon
• O header.php do tema para tags <link rel="icon"> codificadas diretamente
• A documentação do tema para instruções sobre favicon

Solução de Problemas: Google Mostra o Favicon Errado

O Google pode levar dias a semanas para atualizar favicons nos resultados de busca. Veja como acelerar isso:

Requisitos de Favicon do Google

O Google tem regras específicas para mostrar favicons nos resultados de busca:

• Deve ser um múltiplo de 48px (48x48, 96x96, 144x144)
• Deve ser quadrado
• Não deve ter conteúdo inapropriado ou NSFW
• Deve representar o site (não um ícone genérico)

Acelere a Atualização

1. Certifique-se de que seu favicon está publicado e acessível
2. Abra o Google Search Console
3. Use a Inspeção de URL na sua página inicial
4. Clique em Solicitar Indexação
5. Aguarde — normalmente leva de 1 a 2 semanas

Solução de Problemas: Favicon Aparece no Desktop mas Não no Mobile

Navegadores móveis são mais exigentes com formatos de favicon:

• iOS Safari: Precisa do apple-touch-icon (180x180) — o favicon normal não aparece na tela inicial
• Android Chrome: Procura pelo manifest.json com referências de ícones para a tela inicial
• PWA: Precisa de ícones de 192x192 e 512x512 definidos no manifesto do web app

Se seu site WordPress tem um manifesto de web app (alguns temas e plugins adicionam um), certifique-se de que os caminhos dos ícones nele estejam corretos.

Considerações sobre Multisite

Rodando WordPress Multisite? Cada site precisa do seu próprio favicon.

• O Personalizador é por site, então cada subsite pode ter seu próprio ícone
• As configurações no nível de rede não incluem um favicon padrão
• Se você quer um padrão para toda a rede, adicione-o via functions.php em um plugin must-use (wp-content/mu-plugins/)

Boas Práticas

• Comece grande: Faça upload de pelo menos 512x512 — o WordPress reduz, nunca amplia
• Use PNG: Fundos transparentes funcionam melhor que JPEG
• Mantenha simples: Seu favicon é minúsculo — logos complexos não ficam legíveis em 16x16
• Teste em vários navegadores: Use Favicon.im para verificar sua configuração
• Versione seu favicon: Adicione ?v=2 à URL ao atualizar para invalidar o cache

Perguntas Frequentes

Como adiciono um favicon no WordPress?

Vá em Aparência → Personalizar → Identidade do site → Ícone do site, faça upload de uma imagem PNG de 512x512 e clique em Publicar. O WordPress gera automaticamente todos os tamanhos necessários.

Qual tamanho deve ter o favicon do WordPress?

Faça upload de pelo menos 512 x 512 pixels. O WordPress criará automaticamente versões de 32x32, 180x180 e outros tamanhos. Para resultados de busca do Google, use múltiplos de 48px.

Por que meu favicon do WordPress não está aparecendo?

Geralmente é um problema de cache. Limpe o cache do navegador, o plugin de cache do WordPress e o cache do CDN. Tente uma janela anônima. Verifique também conflitos de plugins causando tags de favicon duplicadas.

Posso usar um favicon SVG no WordPress?

O WordPress não suporta upload de SVG por padrão por razões de segurança. Você pode adicionar suporte a favicon SVG manualmente via código no functions.php ou usar um plugin que habilite uploads de SVG.

Como adiciono favicons diferentes para modo claro e escuro no WordPress?

Use um favicon SVG com media queries CSS incorporadas para prefers-color-scheme. Adicione o arquivo SVG manualmente via functions.php, já que o Personalizador só aceita formatos PNG/ICO.

Referências

1. Site Icon - WordPress Developer Resources - Documentação Oficial do WordPress
2. Define a favicon to show in search results - Google Search Central
3. Favicon.im - Ferramenta de teste e validação de favicons