Os favicons são comummente conhecidos como aquele pequeno ícone exibido do lado do nome de um site no separador de um navegador. E, apesar de esse ser seu lugar de origem, os favicons também são usados ​​em outros sítios, como nos favoritos do navegador, nos botões da tela inicial do iOS e muito mais. Abaixo você pode ver um exemplo de um site com um favicon em comparação com um site sem:

Um exemplo de um favicon WordPress

Um exemplo de um favicon noWordPress

Nesse artigo mostraremos três formas diferentes de adicionar um favicon no WordPress ao seu site. Se já sabe o método que prefere, pode usar os links abaixo para ir direto para uma seção específica:

Como adicionar Favicon no WordPress via WordPress Customizer

A partir do WordPress 4.3, todos os sites WordPress incluem um recurso de ícone de site que facilita o upload e o corte de uma imagem para usar como favicon.

Para a maioria dos usuários, esse é o método mais simples para adicionar um ícone favicon ao WordPress. Só precisa de uma imagem com pelo menos 512×512 pixel. O WordPress fará o resto do processo.

Para começar, vá até Aparência → Customizer no seu painel WordPress:

como entrar no WordPress Customizer

como entrar no WordPress Customizer

Aí, navegue até ao separador Identidade do Site:

Como encontrar o separador Identidade do Site

Como encontrar o separador Identidade do Site

Depois, olhe a parte inferior da seção Ícone do Site e clique no botão Selecionar Imagem:

Escolhendo uma imagem como favicon

Escolhendo uma imagem como favicon

Será aberta a interface normal da biblioteca mídia WordPress. Você pode escolher uma imagem existente na sua Biblioteca Mídia WordPress ou carregar uma nova. Lembre-se: o WordPress recomenda o uso de uma imagem com pelo menos 512x512px.

Quando tiver uma imagem que você goste, clique nela e depois Selecionar no canto inferior direito:

Selecionando sua imagem de favicon

Selecionando sua imagem de favicon

Se sua imagem ainda não é um quadrado perfeito (por exemplo, 512×512 px), o WordPress lhe dará a possibilidade de cortar sua imagem na próxima tela. Use a caixa para destacar a parte da imagem que pretende usar para o seu ícone.

No lado direito da interface, pode consultar a previsualização de como ficará sua imagem recortada.

Quando estiver satisfeito, clique em Cortar Imagem para finalizar sua escolha:

Recortando sua imagem de favicon

Recortando sua imagem de favicon

E pronto! Agora só precisa clicar em Salvar & Publicar para ativar seu favicon.

Se quiser altear seu favicon no futuro, pode voltar a essa interface e clicar em Alterar Imagem:

Como alterar posteriormente a imagem do favicon

Como alterar posteriormente a imagem do favicon

Como adicionar Favicon do WordPress ao site com um plug-in

Se preferir usar um plugin para a funcionalidade nativa do ícone do site WordPress, pode usar um plugin gratuito conhecido como Favicon by RealFaviconGenerator . O plugin é tão simples de usar quanto o WordPress Customizer nativo, mas oferece opções de compatibilidade adicionais úteis para vários dispositivos e ícones de aplicativos.

Para usar, instale e ative o plugin gratuito através do seu painel WordPress:

Como instalar o plugin RealFaviconGenerator

Como instalar o plugin RealFaviconGenerator

Após ativar o plugin, entre em Aparência → Favicon para criar seu conjunto favicon.

Basta selecionar ou fazer o upload de uma imagem com pelo menos 70×70px (de preferência 260×260px):

Como adicionar um favicon ao WordPress

Como adicionar um favicon ao WordPress

Após escolher a sua imagem, clique em Gerar Favicon. Depois de clicar nesse botão, o plugin levará você para fora do site WordPress até ao site RealFaviconGenerator.

No site RealFaviconGenerator, navegue até ao rodapé e clique em Gerar Seus Favicons e Código HTML:

Gerar seus favicons

Gerar seus favicons

Após um curto período, enquanto a ferramenta funciona, o Real Favicon Generator enviará você novamente para seu painel WordPress. Seu favicon estará pronto. Na interface do plugin, pode consultar as previsualizações, que lhe permitem ver como ele fica em diferentes dispositivos:

Previsualização ao vivo dos seus favicons

Previsualização ao vivo dos seus favicons

Como Adicionar Favicon no WordPress ao Site Manualmente

Se preferir um método manual, também pode adicionar manualmente um favicon ao seu site WordPress via FTP, assim como alguns trechos de código. Se usar esse método, precisará criar sua própria imagem de favicon, pois deixará de ter ajuda do WordPress.

Como Criar uma Imagem de Favicon

Antigamente você tinha de usar um arquivo ICO específico para o seu favicon. Mas, atualmente, todos os navegadores modernos suportam o uso de arquivos ICO, PNG e GIF para o seu favicon. O JPEG é amplamente suportado (leia-se: JPG vs JPEG), mas tal não acontece em todas as versões do Internet Explorer, o que o torna pouco recomendado como favicon.

Se está familiarizado com o Photoshop, poderá usar ele para criar manualmente um favicon. Contudo, muitas vezes é mais fácil usar apenas uma ferramenta básica na cloud para criar seu conjunto de ícones de favicon a partir de uma imagem existente.

O Real Favicon Generator (a versão nuvem do plugin usado na seção anterior) é uma ótima opção porque:

  • Cria ícones de aplicativos e também favicons
  • Os ícones de favicon estão no formato PNG e ICO
  • Pode personalizar seu favicon após fazer o upload da sua imagem
  • Basta colar o código mostrado pelo plugin

Mais alguns bons geradores de favicons:

  • Favicon.cc – permite criar um favicon do zero, fazendo também o upload de uma imagem existente
  • Favicon-Generator – funciona de forma parecida com o Real Favicon Generator

Para utilizar o Real Favicon Generator, faça primeiro o upload da imagem que você deseja usar como favicon:

Como fazer o upload da imagem de origem do favicon

Como fazer o upload da imagem de origem do favicon

Na tela seguinte, pode configurar detalhes específicos sobre o seu conjunto de favicons (se assim quiser).

Quando terminar, ou se não quiser fazer alterações, só precisa navegar até ao rodapé e clicar em Gerar Seus Favicons e Código HTML:

Gerar seus favicons

Gerar seus favicons

Como Instalar o Seu Favicon no WordPress

Na página seguinte, clique no botão pacote de Favicons para baixar suas imagens favicon. Além disso, mantenha essa página aberta, já que precisará do código para adicionar os seus favicons:

Baixe o seu pacote de favicons

Baixe o seu pacote de favicons

Estabeleça uma conexão ao seu site WordPress via FTP e carregue o conteúdo do seu pacote Favicon (favicons.zip) para a pasta root do seu site WordPress:

Upload do favicon via FTP

Upload do favicon via FTP

Os arquivos devem estar na mesma pasta que suas pastas wp-admin e wp-content.

Depois, pegue o código dado pelo Real Favicon Generator:

  • Use um plugin como oInsert Headers and Footers para adicioná-lo ao cabeçalho do seu tema>
  • Cole ele diretamente na seção <head> do seu tema, editando o arquivo header.php

A melhor opção é usar o plugin Insert Headers and Footers, pois garante que você não perderá seu favicon ao alterar os temas WordPress no futuro.

Para isso, instale e ative o Insert Headers and Footers. Depois vá em Configurações → Insert Headers and Footers e cole o código na seção Scripts no Cabeçalho:

Adicionar o código do favicon ao cabeçalho do WordPress

Adicionar o código do favicon ao cabeçalho do WordPress

Salve suas alterações e pronto.

Dica 1: Favicons Exclusivos para o Multisite WordPress

Se quiser que cada site na sua rede Multisite tenha o seu próprio favicon, a forma mais simples é usar um plugin de favicons como o plugin que falámos acima. Também pode usar o plugin Heroic Favicon Generator, desde que você faça um pequeno ajuste manual no seu código.

Embora seja possível editar os arquivos do seu tema para permitir favicons exclusivos para cada site de rede, o processo é significativamente mais complicado do que usar um plugin.

Dica 2: Utilize uma Rede de Entrega de Conteúdo para Apresentar Imagens Favicon

Considerando que os três métodos acima falados armazenam suas imagens de favicon no seu servidor, pode otimizar ainda mais seu site usando uma rede de entrega de conteúdo (CDN) para apresentar suas imagens.

Ao instalar o Cloudflare ou um serviço como o KeyCDN, fará com que seus visitantes carreguem o favicon do seu CDN em vez de fazerem isso a partir do seu servidor. Se você estiver usando um plugin como o CDN Enabler, ele deverá reescrever automaticamente seu URL de favicon no WordPress para funcionar com os métodos acima.

10
Shares