Como adicionar um favicon no WordPress

Na barra de guias de um navegador, cada nova página é aberta em uma aba separada. Cada aba é composta, ge­ral­mente, do título da página e de um pequeno símbolo: o favicon. Ambas as in­for­ma­ções ajudam o usuário a iden­ti­fi­car o site que está acessando e a orientar-se quando várias guias estão abertas ao mesmo tempo. Além disso, um favicon adi­ci­o­nado ao site fortalece a imagem da marca e melhora a ex­pe­ri­ên­cia do usuário. Existem três métodos de adicionar um favicon no WordPress. Descubra aqui como eles funcionam e quais são as vantagens de cada método.

Por que adicionar um favicon no WordPress?

O termo favicon é uma abre­vi­a­tura de favorite icon. O pequeno ícone é parte in­te­grante do website de uma empresa e aparece na barra de guias, na barra de favoritos, nos apli­ca­ti­vos móveis do WordPress, nos ícones de página inicial e nos re­sul­ta­dos de pesquisa de dis­po­si­ti­vos móveis. Por isso, escolher um símbolo marcante e in­con­fun­dí­vel como favicon traz muitas vantagens:

• Aumenta a seriedade e o pro­fis­si­o­na­lismo de um site.
• Ajuda o usuário a re­co­nhe­cer mais fa­cil­mente a empresa e seus serviços na internet, me­lho­rando assim a ex­pe­ri­ên­cia dos usuários.
• Tem efeito positivo sobre SEO no WordPress, me­lho­rando a clas­si­fi­ca­ção do site nos me­ca­nis­mos de busca.
• O favicon fica sempre visível, mesmo quando muitas guias estão abertas ao mesmo tempo em um navegador, enquanto os títulos das páginas ficam ocultos.

Métodos para adicionar um favicon no WordPress

Existem três métodos para adicionar um favicon no WordPress: com o Per­so­na­li­za­dor do WordPress, com a ajuda de um plugin ou ma­nu­al­mente. A seguir, vamos apre­sen­tar e detalhar cada um deles.

Método 1: Per­so­na­li­za­dor do WordPress

O método mais simples e rápido de adicionar um favicon no WordPress é dis­po­ni­bi­li­zado a partir da versão 4.3 do WordPress. Com a fer­ra­menta de favicons do WordPress, você pode fazer upload do favicon, recortá-lo como quiser e instalá-lo em poucos cliques.

O tamanho mínimo re­co­men­dado para um favicon adi­ci­o­nado por meio do Per­so­na­li­za­dor é de 512 x 512 pixels, mesmo que a imagem seja exibida no tamanho 16 x 16 pixels pela guia do navegador. Por isso, procure utilizar um favicon que seja fácil de ser re­co­nhe­cido em tamanho reduzido. Agora, vamos para o passo a passo de como adicionar um favicon no WordPress com o Per­so­na­li­za­dor.

Passo 1: Abra o Per­so­na­li­za­dor

Na barra esquerda do painel do WordPress, clique em “Aparência” > “Per­so­na­li­zar”.

Passo 2: Abra a seção “Iden­ti­dade do Site”

Uma vez que você abriu o Per­so­na­li­za­dor do WordPress, clique na seção “Iden­ti­dade do Site”.

Passo 3: Abra a seção de favicon

Nessa seção, você pode definir o título e o subtítulo do seu site. Essas in­for­ma­ções são exibidas ao lado do favicon, na guia do navegador. Na seção “Ícone do Site”, clique no botão “Se­le­ci­o­nar ícone do site” para redefinir o favicon no WordPress.

Passo 4: Selecione o favicon

Com a Bi­bli­o­teca de Mídia do WordPress aberta, selecione a imagem desejada ou faça o upload de uma nova imagem. Para fazê-lo, clique em “Upload de arquivos” e escolha o arquivo cor­res­pon­dente no seu com­pu­ta­dor. Confirme sua seleção clicando no botão “Se­le­ci­o­nar”.

Passo 5: Recorte o favicon

Em seguida, você tem a opção de recortar a imagem. Na barra do lado direito, o WordPress exibe au­to­ma­ti­ca­mente uma pré-vi­su­a­li­za­ção do favicon se­le­ci­o­nado. Caso ne­ces­sá­rio, ajuste o recorte dessa imagem e confirme a seleção com o botão “Recortar imagem”. Se o seu favicon já estiver do tamanho certo, clique em “Pular recorte”.

Concluído o recorte, o WordPress aplica o favicon adi­ci­o­nado au­to­ma­ti­ca­mente. Caso você deseje alterar ou ajustar o favicon no WordPress novamente, volte para a seção de con­fi­gu­ra­ções e repita os passos.

Método 2: Plugin de favicons

O WordPress oferece plugins especiais para (quase) todas as suas funções, inclusive para adicionar um favicon ao site. Um dos plugins gratuitos mais populares é o Favicon by Re­al­Fa­vi­con­Ge­ne­ra­tor. Ele dis­po­ni­bi­liza opções adi­ci­o­nais de con­fi­gu­ra­ção, como adaptar o favicon a di­fe­ren­tes dis­po­si­ti­vos e apli­ca­ti­vos, o que não é oferecido pelo Per­so­na­li­za­dor. Siga o passo a passo de como instalar um favicon no WordPress com esse plugin.

Passo 1: Instale o plugin

Na barra esquerda do painel do WordPress clique em “Plugins” e, logo abaixo em “Adicionar Novo”.

Busque o plugin “Favicon by Re­al­Fa­vi­con­Ge­ne­ra­tor” e, ao encontrá-lo, clique em “Instalar agora”. Concluída a ins­ta­la­ção, clique em “Ativar” e o plugin estará pronto para ser utilizado.

Passo 2: Abra as con­fi­gu­ra­ções do plugin

Quando o plugin estiver instalado, volte para o menu do WordPress e siga o caminho “Aparência” > “Favicon”. É lá que você vai con­fi­gu­rar seu favicon.

Passo 3: Selecione o favicon

Clique em “Select from the Media Library” para abrir a Bi­bli­o­teca de Mídia do WordPress e se­le­ci­o­nar a imagem do seu favicon. Ao ser adi­ci­o­nado por meio do plugin, seu favicon deve ter o tamanho mínimo de 70 x 70 pixels, porém re­co­men­da­mos adicionar uma imagem de 260 x 260 pixels ou maior, para melhores re­sul­ta­dos. Se­le­ci­o­nada a imagem, clique no botão “Generate favicon”.

Passo 4: Instalar o favicon

Depois de gerar o favicon, o plugin o re­di­re­ci­o­nará au­to­ma­ti­ca­mente para o seu próprio site. Concluído o upload da imagem, você terá a opção de seguir com algumas con­fi­gu­ra­ções opcionais. Com elas é possível ajustar o favicon para na­ve­ga­do­res de desktop, para di­fe­ren­tes tipos de smartphone, para re­sul­ta­dos de busca do Google, entre outros.

Con­cluí­das as con­fi­gu­ra­ções adi­ci­o­nais, ou caso deseje pular esse processo, clique no botão “Generate your Favicons and HTML Code”, no fim da página.

O plugin levará você de volta para o painel do WordPress e con­fir­mará o sucesso da ins­ta­la­ção do favicon no WordPress.

Método 3: Adicionar ma­nu­al­mente

Em muitos casos, existe também a pos­si­bi­li­dade de modificar con­fi­gu­ra­ções do WordPress ma­nu­al­mente. Um favicon do WordPress, por exemplo, pode ser adi­ci­o­nado por meio de um FTP (File Transfer Protocol). Para isso você precisará de um pacote de arquivos de favicon e de um código HTML. Ambos são fa­cil­mente gerados por fer­ra­men­tas online gratuitas.

Passo 1: Gere o pacote de arquivos de favicon

Abra uma fer­ra­menta online para gerar um favicon. Neste exemplo, uti­li­za­mos o Re­al­Fa­vi­con­Ge­ne­ra­tor. Clique no botão “Select your Favicon image” para fazer upload da imagem do seu favicon no WordPress.

Em seguida, o plugin oferece a pos­si­bi­li­dade de trabalhar algumas con­fi­gu­ra­ções opcionais. Com elas é possível, por exemplo, mudar o tamanho e o fundo da imagem. Faça as al­te­ra­ções desejadas, ou pule este passo. Em seguida clique no botão “Generate your Favicons and HTML code”, ao fim da página.

Em seguida, baixe o pacote de arquivos de favicon e copie o código HTML. Assim que baixar o pacote, mude o nome dele para “favicon.ico”, para que a imagem seja re­co­nhe­cida ime­di­a­ta­mente como favicon.

Passo 2: Faça upload do pacote de favicon por FTP

Por meio do FTP, acesse os dados do WordPress. Abra o diretório raiz e faça o upload do pacote do favicon neste lugar. Atenção: assegure-se que o pacote esteja salvo na mesma pasta onde o WP-Admin ou o WP-Content estiver.

Passo 3: Insira o código HTML

Concluído o segundo passo, abra o arquivo header.php e insira o código HTML do favicon na seção “Header” (Cabeçalho). Confira se o seu domínio e o caminho do favicon estão corretos.