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:
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.
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:
- Também cria ícones de aplicativos.
- Fornece ícones de favicon em ambos os formatos PNG e ICO.
- Você pode personalizar o seu favicon após carregar sua imagem.
- Tudo o que você precisa fazer é colar no código que o plugin lhe dá.
Outros geradores de favores úteis são:
- Favicon.cc, que permite criar um favicon a partir do zero ou carregar uma imagem existente.
- Favicon Generator, que funciona de forma semelhante ao RealFaviconGenerator.
Para usar o RealFaviconGenerator, comece carregando a imagem que você deseja usar clicando em Selecione sua imagem Favicon:
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:
Na página seguinte, clique no pacote Favicon para fazer o download das imagens do seu 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:
A partir daí, navegue até a aba Identidade do Site:
A seguir, olhe na parte inferior da seção Ícone do site e clique no botão Selecionar ícone do site:
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:
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:
É 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:
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):
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:
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:
- Acesse os arquivos do seu site, seja através de um cliente FTP ou do Gerenciador de Arquivos no seu cPanel de hospedagem.
- 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:
- Use um plugin como Insert Headers e Footers para adicioná-lo ao cabeçalho do seu tema.
- Cole-o diretamente na seção < head> do seu tema, editando o arquivo header.php do seu tema.
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:
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.
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:
- Usando o WordPress Customizer para carregar um ícone do site.
- Instalando um plugin, como o Favicon da RealFaviconGenerator.
- Adicionar manualmente um favicon através de um cliente FTP ou do seu Gerenciador de Arquivos.
