Favicon para WordPress

WordPress lida nativamente com a injeção de favicon por meio do recurso Site Icon, introduzido no WordPress 4.3. Quando você carrega uma imagem no Customizer, WordPress a corta automaticamente, gera variantes menores e injeta as tags `<link rel='icon'>` e `<link rel='apple-touch-icon'>` corretas em cada página. Nenhum plug-in ou alteração de código é necessário para a grande maioria dos sites.

Para acessar a configuração do ícone do site, faça login no painel de administração do WordPress e navegue até Aparência > Personalizar. Na barra lateral esquerda, clique em Identidade do site. Você verá o campo de upload do ícone do site próximo à parte inferior do painel. Clique em Selecionar imagem, carregue seu ícone, corte-o se solicitado e clique em Publicar. Seu favicon entra no ar imediatamente no próximo carregamento da página.

WordPress requer um tamanho mínimo de imagem de 512×512 pixels para o ícone do site. Carregue um PNG quadrado nessa resolução ou maior — WordPress gerará variantes menores (16×16, 32×32, 180×180) automaticamente a partir da fonte. Nunca carregue uma imagem pequena e espere que WordPress a aumente; o resultado será um ícone desfocado nas guias do navegador.

PNG é o formato recomendado para uploads de favicon WordPress. A plataforma também oferece suporte a JPEG e GIF, mas JPEG não oferece suporte a transparência e GIF oferece compactação deficiente para logotipos fotográficos. Um fundo transparente PNG garante que seu ícone pareça limpo em qualquer tema do navegador, incluindo barras de guias no modo escuro.

Se o seu tema usa o editor de site Gutenberg (edição completa do site), o caminho do ícone do site pode ser um pouco diferente. Procure em Aparência > Editor > Estilos ou use as configurações de bloqueio do logotipo do site. Alguns temas de bloco também expõem um campo de favicon no painel Configurações globais. A função WordPress subjacente é a mesma – apenas o caminho da UI do administrador muda.

Para controle avançado - por exemplo, veicular um favicon diferente no subdiretório da loja e no blog - você pode substituir o URL do ícone do site programaticamente. Adicione isto ao functions.php do seu tema ou a um plugin específico do site: `add_filter('get_site_icon_url', function($url, $size, $blog_id) { return 'https://example.com/custom-favicon.png'; }, 10, 3);`. Isso ignora totalmente o Customizer e permite exibir qualquer ícone de qualquer URL.

Alguns plug-ins de criação de páginas (Elementor, Divi, Beaver Builder) adicionam suas próprias configurações de favicon que podem entrar em conflito com WordPress Customizer. Verifique o painel de configurações do site do construtor de páginas e remova qualquer substituição de favicon e, em seguida, redefina-o por meio do WordPress Customizer nativo. Ter duas tags favicon concorrentes na mesma página pode produzir resultados inconsistentes entre navegadores.

As instalações multisite WordPress exigem que cada subsite tenha seu próprio ícone de site definido individualmente. As configurações de administração de rede não são transmitidas em cascata aos subsites. Se você deseja um favicon compartilhado em toda a rede, use a abordagem de filtro programático e conecte-se ao URL do ícone do site no nível da rede usando um plug-in obrigatório (mu-plugins).

Plugins de cache como WP Rocket, W3 Total Cache ou LiteSpeed ​​Cache podem atrasar as atualizações de favicon. Depois de alterar o ícone do site, limpe todas as camadas de cache: o cache do objeto WordPress, o cache da página, o cache do CDN e o cache do navegador. Se o ícone antigo persistir, anexe `?v=2` ao link do favicon manualmente no HTML ou espere que o TTL do cache expire.

Para verificar se WordPress está exibindo as tags favicon corretas, clique com o botão direito em seu site em um navegador, escolha Exibir código-fonte da página e pesquise `rel='icon'`. Você deverá ver uma entrada favicon.ico e uma entrada apple-touch-icon apontando para a imagem enviada. Se algum deles estiver faltando, seu tema pode estar substituindo `wp_head()` - certifique-se de que `<?php wp_head(); ?>` seja chamado no header.php do seu tema.

Plugins WordPress SEO de terceiros, como Yoast SEO e Rank Math, incluem seus próprios metadados sociais e de esquema, mas não interferem no ícone do site. No entanto, se você instalou um plug-in específico de favicon anos atrás, antes de WordPress adicionar suporte nativo, esse plug-in agora pode entrar em conflito. Desative quaisquer plug-ins de favicon herdados antes de usar a opção Customizer integrada.

Para sites hospedados em WordPress.com (em oposição a WordPress.org auto-hospedados), o caminho do favicon está em Meus Sites > Configurações > Geral > Ícone do Site. As etapas são quase idênticas ao fluxo Customizer auto-hospedado, mas a edição do tema e os plug-ins são limitados dependendo do seu plano. Carregue um PNG 512×512 e salve – WordPress.com cuida de todo o redimensionamento e injeção de tags.

Após configurar seu favicon, verifique se ele funciona corretamente usando o favicon tester inserindo o URL do seu site. Isso confirma que o ícone está acessível publicamente e aparece no caminho esperado. Verifique também best favicon size para entender quais resoluções WordPress gera e se você precisa adicionar alguma manualmente para suporte a PWA.