Os favicons são mais conhecidos como os pequenos ícones que aparecem ao lado dos nomes dos sites nas abas do navegador. No entanto, embora seja lá que eles se originaram, seu favicon do WordPress também é usado em outros lugares, como bookmarks do navegador, botões da tela inicial do iOS e muito mais.

Como tal, é uma parte importante da sua marca. Quando usado corretamente, o seu favicon ou ‘ícone do site’ pode ajudar os usuários a identificar facilmente o seu negócio. Ele pode ajudar a aumentar o reconhecimento da marca, e até mesmo melhorar a Experiência do Usuário do site (UX).

Neste artigo, discutiremos os benefícios da utilização de um favicon em um site WordPress. Depois explicaremos como criar um, e o acompanharemos através de três opções fáceis para adicioná-lo ao seu site.

Por fim, vamos encerrar com algumas dicas de favores e melhores práticas do WordPress. Vamos começar!

Os Benefícios da Utilização de um Favicon WordPress

Se você já teve muitas abas abertas ao mesmo tempo (culpado!), você provavelmente pode apreciar a utilidade de um favicon. Um favicon torna fácil para os usuários identificarem rapidamente o seu site quando têm múltiplas abas abertas em seu navegador:

O favicon Kinsta no navegador Chrome

O favicon Kinsta no navegador Chrome

Dependendo do número de abas abertas, o título do seu site pode nem sempre estar visível. Portanto, adicionar um favicon pode ajudar a melhorar o UX para seus visitantes.

Além de impulsionar o reconhecimento da marca, o uso de um favicon do WordPress também pode fazer seu site parecer mais profissional e confiável. Isso, por sua vez, pode ajudar a aumentar a confiança dos clientes.

Além disso, se alguém salvar seu site na tela inicial do seu dispositivo móvel, seu favicon aparecerá como o ícone. Usar o logotipo da sua marca ou imagens semelhantes pode ajudar a tornar o seu site mais fácil de reconhecer, e ajudar na criação de uma estética coesa.

Conheça o favicon, também conhecido como o pequeno ícone ao lado do nome de um site em uma aba do navegador. ✨ É essencial para o branding e fácil de criar com a ajuda deste guia! 😊Click to Tweet

Como Criar um Favicon WordPress

Se você já tem um favicon você está pronto para usar (a maioria das empresas usa seu logotipo ou uma variante dele), sinta-se à vontade para pular para a próxima seção. Caso contrário, vamos ver como criar sua foto de favicon.

No passado, você tinha que usar um arquivo ICO específico para o seu favicon. No entanto, hoje em dia, todos os navegadores modernos suportam o uso de arquivos ICO, PNG, e GIF para o seu favicon. JPEG também é amplamente suportado (leia-se: JPG vs JPEG), mas não em todas as versões do Internet Explorer, o que o torna menos ideal para uso em favicon.

Se você está familiarizado com o Photoshop, você pode usá-lo para criar um favicon manualmente. No entanto, muitas vezes é mais fácil usar uma ferramenta básica baseada em nuvem para criar seu conjunto de ícones de favicon a partir de uma imagem existente.

O RealFaviconGenerator (a versão baseada em nuvem do plugin que discutiremos mais tarde) é uma ótima opção porque:

Outros geradores de favores úteis são:

Para usar o RealFaviconGenerator, comece carregando a imagem que você deseja usar clicando em Selecione sua imagem Favicon:

Carregando uma imagem de fonte de favicon no RealFaviconGenerator

Carregando uma imagem de fonte de favicon no RealFaviconGenerator

Na tela seguinte, você pode configurar detalhes específicos sobre o seu conjunto de favicon (se desejar). Quando terminar, vá até o fundo e clique em Gerar seus Favicons e código HTML:

A tela de Opções do Gerador de Favicon no RealFaviconGenerator

A tela de Opções do Gerador de Favicon no RealFaviconGenerator

Na página seguinte, clique no pacote Favicon para fazer o download das imagens do seu favicon:

A tela para download do pacote Favicon

A tela para download do pacote Favicon

Certifique-se de deixar esta página aberta se você planeja adicionar manualmente o favicon ao seu site.

Dicas para criar um Favicon WordPress

Existem algumas dicas de design e formatação que vale a pena mencionar e revisar antes de criar o seu favicon. O mais importante, o tamanho recomendado para favicons é de 512×512 pixels.

Embora o seu favicon do WordPress seja um quadrado perfeito, você também pode usar uma imagem retangular e cortá-lo antes ou depois de carregá-lo para o WordPress. O WordPress vem com uma funcionalidade de recorte integrada para ícones do site se você adicioná-los através do Customizer (que nós vamos acompanhar você em breve).

Além disso, é importante notar que o seu favicon aparecerá como um quadrado de 16×16 px. Por isso, você quer escolher uma imagem que fique bem assim que ela for reduzida a essas dimensões. Embora ela aparecerá nesse tamanho, ainda deve ter uma altura e largura de pelo menos 512 px.

Finalmente, é uma idéia inteligente rever algumas das Diretrizes do Google para a criação e utilização de favicons. Isso ajudará a garantir que seu ícone seja exibido de forma otimizada nos mecanismos de busca e abas do navegador.

Como adicionar um Favicon WordPress ao seu site (3 opções fáceis)

Uma vez que você tenha seu favicon, você está pronto para adicioná-lo ao seu site WordPress. Vamos dar uma olhada em três métodos que você pode usar para fazer isso.

1. Usando o Personalizador WordPress para fazer o upload do seu Favicon

A partir do WordPress 4.3, todos os sites WordPress incluem um ícone de site que facilita o upload e o corte de uma imagem para usar como um favicon. Para a maioria dos usuários, este é o método mais simples e rápido para adicionar um ícone de favicon ao WordPress.

Tudo que você vai precisar é de uma imagem de pelo menos 512×512 pixels. O WordPress irá lidar com o resto do processo. Para começar, acesse Appearance → Personalize em seu painel do WordPress:

O menu Aparência no WordPress

O menu Aparência no WordPress

A partir daí, navegue até a aba Identidade do Site:

A opção 'Identidade do Site' no WordPress Customizer

A opção ‘Identidade do Site’ no WordPress Customizer

A seguir, olhe na parte inferior da seção Ícone do site e clique no botão Selecionar ícone do site:

O botão 'select site icon' no Customizer do WordPress

O botão ‘select site icon’ no Customizer do WordPress

A interface normal da WordPress Media Library será aberta. Você pode escolher uma imagem existente na sua Biblioteca de Mídia ou fazer o upload de uma nova imagem. Se você usou o RealFaviconGenerator para criar seu favicon, certifique-se de que o pacote que você baixou está descompactado.

Uma vez que você tenha uma imagem que você gosta, clique sobre ela e escolha Select no canto inferior direito:

Selecionando sua imagem favorita no WordPress

Selecionando sua imagem favorita no WordPress

Se sua imagem ainda não é um quadrado perfeito (por exemplo, 512×512 px), o WordPress lhe dará a chance de cortá-la na próxima tela.

Use a caixa para destacar a parte da imagem que você deseja usar para o seu ícone. Você pode ver uma prévia de como sua imagem recortada ficará no lado direito da interface.

Quando estiver satisfeito com a aparência das coisas, clique em Crop Image para finalizar a sua escolha:

Cortando sua imagem favorita no WordPress

Cortando sua imagem favorita no WordPress

É isso aí! Tudo o que você precisa fazer é selecionar Save & Publish para fazer o seu favicon vivo. Se você quiser mudar seu favicon no futuro, você pode voltar para esta interface.

2. Instalando um Plugin para Adicionar seu Favicon WordPress

Se você preferir uma solução de plugin ao invés da funcionalidade de ícones nativos do site WordPress, você pode usar um plugin gratuito popular chamado Favicon by RealFaviconGenerator (a ferramenta baseada na nuvem que discutimos anteriormente).

Este plugin é tão simples de usar quanto o WordPress Customizer nativo. Entretanto, ele oferece opções adicionais de compatibilidade para vários dispositivos e ícones de aplicativos. Para utilizá-lo, instale e ative o plugin gratuito através do seu painel do WordPress:

O plugin Favicon by RealFaviconGenerator WordPress

O plugin Favicon by RealFaviconGenerator WordPress

Uma vez ativado o plugin, vá para Appearance → Favicon para criar o seu conjunto de favicon. Tudo o que você precisa fazer é selecionar ou carregar uma imagem que seja no mínimo 70×70 px (idealmente 260×260 px):

Lutando com tempo de inatividade e problemas com o WordPress? Kinsta é a solução de hospedagem projetada com desempenho e segurança em mente! Confira nossos planos

A tela para adicionar um favicon no WordPress usando um plugin

A tela para adicionar um favicon no WordPress usando um plugin

Depois de selecionar sua imagem, clique em Gerar favicon. Quando você selecionar esse botão, o plugin o levará para fora do seu site WordPress para o site RealFaviconGenerator.

Na parte inferior do site, role para baixo para selecionar Gerar seus Favicons e código HTML (veja a seção anterior). Enquanto a ferramenta funciona, o Real Favicon Generator irá enviá-lo de volta ao seu painel do WordPress:

A tela para pré-visualizar como seu favicon do WordPress irá aparecer

A tela para pré-visualizar como seu favicon do WordPress irá aparecer

Depois disso, o seu favicon estará pronto e pronto para ir. Você pode ver previews de como ele será em diferentes dispositivos na interface do plugin.

3. Adicionando manualmente o seu Favicon via FTP

Se você preferir fazer as coisas manualmente, é possível adicionar um favicon ao seu site WordPress via File Transfer Protocol (FTP) ou File Manager se o seu host utiliza o cPanel.

Se você optar por este método, você também precisará criar sua própria imagem de favo. Você pode fazer isso seguindo os passos descritos anteriormente neste post.

Para esta demonstração estaremos usando o pacote que criamos e baixado do RealFaviconGenerator, as instruções se aplicam mesmo que você tenha usado uma ferramenta diferente para criar seu favicon.

Para adicionar manualmente um favicon do WordPress ao seu site, você precisará fazê-lo:

  1. Acesse os arquivos do seu site, seja através de um cliente FTP ou do Gerenciador de Arquivos no seu cPanel de hospedagem.
  2. Localize o diretório raiz do seu site e faça o upload do conteúdo do seu pacote de favicon (favicons.zip)

Os arquivos devem estar na mesma pasta que suas pastas wp-admin e wp-content. Em seguida, pegue o código RealFaviconGenerator fornecido anteriormente, e qualquer um dos dois:

O uso do plugin Insert Headers e Footers é ótimo porque garante que você não perderá seu favorito se você mudar os temas do WordPress pelo caminho.

Para fazer isso, instale e ative os cabeçalhos e rodapés de inserção. Então vá em Configurações → Inserir Cabeçalhos e Rodapés, e cole seu código na seção Scripts no Cabeçalho:

Adicionando código de favicon utilizando o plugin Insert Headers e Footers

Adicionando código de favicon utilizando o plugin Insert Headers e Footers

Certifique-se de salvar suas alterações. Então você está acabado!

Dicas adicionais para o uso de WordPress Favicons

Se você quer que cada site da sua rede multisite tenha um favicon único, a maneira mais fácil de conseguir isso é usar um plugin de favicon como o apresentado acima. Embora seja possível editar os arquivos do seu tema para habilitar favicons únicos para cada site da rede, o processo é significativamente mais complicado do que usar um plugin.

Você também pode considerar o uso de uma Rede de Entrega de Conteúdo (CDN) para atender às suas imagens favoritas. Os três métodos que discutimos neste post armazenam todas as imagens do seu favicon no seu servidor. Entretanto, você pode otimizar seu site ainda mais usando uma CDN para servir essas imagens.

Quando você instala o Cloudflare ou um serviço como o KeyCDN, os navegadores dos visitantes irão carregar seu favicon a partir do seu CDN ao invés do servidor do seu site. Se você estiver usando um plugin como o CDN Enabler, ele deve reescrever automaticamente a URL do seu favicon do WordPress para trabalhar com os métodos acima.

Você sabe aquele pequeno ícone ao lado do nome do seu site em uma aba do navegador? Esse é um favicon, e esse guia vai ajudá-lo a criar seu próprio 😄Click to Tweet

Resumo

Um favicon WordPress pode ajudar a aumentar o reconhecimento da sua marca e melhorar o UX para os visitantes do seu site. Felizmente, você tem várias opções para escolher, o que torna simples a adição de uma.

Os três principais métodos que você pode usar para adicionar um favicon do WordPress ao seu site são:

  1. Usando o WordPress Customizer para carregar um ícone do site.
  2. Instalando um plugin, como o Favicon da RealFaviconGenerator.
  3. Adicionar manualmente um favicon através de um cliente FTP ou do seu Gerenciador de Arquivos.

Se você gostou deste tutorial, então você vai adorar o nosso suporte. Todos os planos de hospedagem do Kinsta incluem suporte 24/7 de nossos veteranos desenvolvedores e engenheiros do WordPress. Converse com a mesma equipe que apoia nossos clientes da Fortune 500. Confira nossos planos