3 maneiras fáceis de adicionar um favicon do WordPress em 2022 (Guia para iniciantes)

Pronto para aprender tudo o que você gostaria de saber sobre o seu favicon do WordPress?

Se você não estiver familiarizado, o favicon do seu site é aquele pequeno ícone que aparece na aba do seu navegador. Por exemplo, aqui está a aparência do nosso favicon em HeroThemes:

Você também verá algumas pessoas chamando os favicons de “ícone do site”. Não se preocupe - eles são a mesma coisa.

Neste post, você vai aprender:

• Por que você deve se preocupar com algo pequeno como seu favicon do WordPress
• Como criar um favicon para o seu site WordPress (e qual tamanho e formato usar)
• Como adicionar um favicon ao WordPress usando três métodos diferentes

Por que você deve se preocupar com o seu WordPress Favicon

Eu sei eu sei. Uma pequena imagem que aparece apenas na guia do navegador provavelmente não vai fazer ou quebrar seu negócio. Mas há duas razões pelas quais você deve dedicar algum tempo para criar um favicon para o WordPress.

Primeiro, o uso de um favicon ajuda no branding e faz com que seu site se destaque nos navegadores de seus visitantes. Por exemplo, quais guias chamam sua atenção na captura de tela abaixo?

É HeroThemes e Twitter, certo?

Isso é importante porque as pessoas adoram ter várias abas abertas ( não – você não é o único que acumula abas! ). Mesmo em 2009, as pessoas tinham em média mais de 3 guias, com mais entre os jovens. E embora não consiga encontrar dados mais recentes, estou disposto a apostar que a média subiu, não caiu!

Além de marcar seu site nos navegadores e destacá-lo, seu favicon também ajuda os usuários de dispositivos móveis. Se um usuário salvar seu site na tela inicial, seu favicon aparecerá como o ícone em muitos dispositivos .

Quando você considera como é fácil adicionar um favicon do WordPress, esses benefícios definitivamente valem a pena tirar alguns minutos do seu dia.

Como criar uma imagem Favicon com o tamanho e formato corretos

Antes que você possa seguir as instruções passo a passo nas próximas seções sobre como adicionar um favicon ao WordPress, você precisará… realmente ter a imagem que deseja usar para o seu favicon!

E isso significa que você precisa saber as dimensões e o formato de imagem corretos para o seu favicon.

Com a variedade de dispositivos, isso ficou mais complicado do que antes. Mas para resolver essa complexidade, também existem algumas ferramentas que pegam um favicon inicial e o formatam automaticamente para todos os diferentes dispositivos.

Então, para criar seu favicon, aqui está tudo que você precisa:

• Uma imagem quadrada. O tamanho ideal do favicon do WordPress é 512×512 px, embora algo menor como 260×260 px ainda seja aceitável. Todos os métodos que mostrarei a você redimensionarão isso conforme necessário .
• Uma imagem png , que é sua melhor aposta para a web moderna.

Para realmente criar sua imagem, você pode usar uma ferramenta como Adobe Photoshop ou GIMP. Ou você também pode usar algo como Favicon.io para gerar uma imagem de favicon a partir de texto ou emoji.

Se você tiver um logotipo de alta resolução por aí, a coisa mais fácil a fazer é pegar uma versão quadrada do seu logotipo ( é o que usamos no HeroThemes ).

Como adicionar um favicon ao WordPress (3 métodos)

Depois de ter seu arquivo de imagem, você está pronto para adicionar esse favicon ao seu site WordPress.

Abaixo, mostrarei três maneiras diferentes de adicionar seu favicon ao WordPress. Cada método é um pouco diferente , no entanto.

Para ajudar você a escolher o que é certo para seu site, aqui está um breve resumo:

• Adicione favicon com a funcionalidade principal do WordPress – isso é super simples e permite adicionar seu favicon através do WordPress Customizer. A única desvantagem é que ele não adiciona formatos de favicon para todos os dispositivos. Para a maioria dos sites, isso é totalmente bom, no entanto .
• Plugin WordPress RealFaviconGenerator – isso torna super fácil adicionar um favicon para todos os dispositivos . A única desvantagem potencial é que exige que você mantenha o plugin ativo, o que algumas pessoas podem não gostar.
• Método manual RealFaviconGenerator – em vez de usar o plugin, você pode usar o site do RealFaviconGenerator e adicionar manualmente o código. Este método elimina a necessidade de manter um plugin ativo, mas fica um pouco mais complicado porque você precisará adicionar um trecho de código ao cabeçalho do seu tema.

Se você é iniciante, recomendo seguir um dos dois primeiros métodos. Mas usuários avançados podem preferir o terceiro método.

Como adicionar um favicon ao WordPress com a funcionalidade principal

Este é realmente simples porque usa um recurso central do WordPress.

Para começar, vá para Aparência → Personalizar no painel do WordPress para acessar o WordPress Customizer:

Quando estiver no WordPress Customizer, clique na opção Site Identity :

Em seguida, encontre a seção Ícone do site e clique em Selecionar imagem para carregar sua imagem favicon:

Isso abrirá a biblioteca de mídia regular do WordPress, onde você pode enviar sua imagem como faria normalmente.

Depois de enviar sua imagem, clique no botão Selecionar :

A partir daí, o WordPress oferece a opção de cortar sua imagem de favicon, bem como visualizações ao vivo de sua imagem como navegador e aplicativo.

Ajuste para o corte adequado e clique em Cortar imagem :

E pronto! Certifique-se de clicar na opção Publicar na parte superior do WordPress Customizer e seu favicon deve estar ativo.

Como usar um plugin WordPress Favicon (abrange mais dispositivos)

Agora, mostrarei como usar um plugin de favicon do WordPress para obter o mesmo efeito.

Novamente – a diferença entre este método e o anterior é que o plugin adicionará favicons otimizados para mais dispositivos. Ele também oferece uma interface que permite personalizar a aparência do seu favicon para diferentes dispositivos.

Você poderá criar favicons personalizados para:

• iOS
• Android
• Telefone do Windows
• etc.

Você não precisa necessariamente disso – trata-se mais de cobrir casos de ponta.

Para seguir este método, você precisará instalar o plugin gratuito Favicon by RealFaviconGenerator.

Depois de ativar o plugin, vá para Aparência → Favicon . Use o botão Selecionar na Biblioteca de Mídia para carregar ou selecionar seu favicon na Biblioteca de Mídia do WordPress.

Em seguida, clique em Gerar favicon :

Depois disso, o plug-in o levará a um site externo, onde você pode ajustar a aparência do seu favicon para diferentes dispositivos.

Quando terminar de fazer esses ajustes, role para baixo e clique no botão Gerar seus Favicons e código HTML :

E depois de clicar nisso, você será levado de volta ao painel do WordPress e verá uma mensagem de sucesso, bem como uma visualização do seu favicon em diferentes dispositivos:

É isso! Você acabou. Apenas certifique-se de manter o plugin ativo – caso contrário, seus favicons desaparecerão.

Como adicionar um favicon ao WordPress manualmente usando a mesma ferramenta RealFaviconGenerator

Novamente, com o método do plugin acima, você precisará deixar o plugin ativo para continuar usando seus favicons.

Se isso for um problema para você, você também pode usar a mesma ferramenta para fazer tudo manualmente.

O resultado final é exatamente o mesmo, você só precisa fazer o upload manual das imagens via FTP e adicionar algum código à seção <head> do seu site.

Vou dividir este em passos porque é um pouco mais complicado…

Etapa 1: gere seu pacote de favicon

Para começar, acesse o site RealFaviconGenerator e clique em Selecione sua imagem favicon para fazer upload de sua imagem favicon:

Depois de enviar sua imagem, você verá a mesma interface do plug-in e poderá personalizar seu favicon para diferentes dispositivos.

Assim como com o plug-in, role para baixo e clique no botão Gerar seus Favicons e código HTML quando terminar de fazer seus ajustes:

Passo 2: Faça o upload do seu pacote Favicon para o seu site

Na próxima tela, clique no botão para baixar seu pacote Favicon :

Em seguida, você precisará extrair este pacote e enviá-lo para a pasta raiz do seu site usando FTP ( se você não tiver certeza do que é FTP, recomendo que você fique com o método de plug-in da seção anterior ).

Certifique-se de colocar todos os arquivos na pasta raiz – caso contrário, isso não funcionará.

Etapa 3: adicionar trecho de código ao <head> do seu tema

Para finalizar, você precisará adicionar o trecho de código do RealFaviconGenerator à seção <head> do seu tema WordPress:

Ou você pode adicionar o seguinte trecho de código ao arquivo functions.php em seu tema filho ( você precisa usar um tema filho ):

/* Adds the favicon code snippet from RealFaviconGenerator */
add_action('wp_head', 'add_favicon');
function add_favicon(){
?>
REPLACE THIS LINE OF TEXT WITH FAVICON CODE
<?php
};

Qualquer um dos métodos está bom!

Depois de fazer isso, está tudo pronto e seu favicon deve começar a funcionar.

Adicione seu favicon do WordPress hoje

Leva apenas alguns minutos para adicionar seu favicon e proporcionar aos visitantes uma experiência mais marcante.

E aqui está a grande coisa:

Depois de adicionar um favicon ao seu site WordPress, você nunca mais precisará pensar nisso!

Você tem alguma outra dúvida sobre como adicionar um favicon do WordPress? Deixe-nos saber nos comentários e vamos ajudar!