O favicon é aquele pequeno ícone que fica na aba do seu navegador e identifica sua empresa. Ele pode reforçar a identidade da sua marca, a experiência do usuário e até mesmo o nível de profissionalismo do seu site.
Como costumamos dizer aqui na agência, são esses pequenos detalhes que fazem a diferença para que uma marca seja reconhecida.
Os favicons ganharam ainda mais importância depois que o Google, em suas atualizações, passou a exibi-los nos resultados das pesquisas ao lado da URL. Isso permite que os usuários reconheçam rapidamente uma empresa ao fazerem suas buscas, o que pode melhorar sua taxa de cliques (CTR).
Então, vamos descobrir como adicionar o favicon no seu site?
O que é um Favicon?
Antes de iniciarmos com a parte técnica, vamos entender um pouco mais o que é o favicon.
O favicon é um pequeno ícone gráfico que é exibido na barra de endereço do navegador, na guia do navegador e em favoritos ou marcadores. O termo “favicon” vem da combinação de “favorite” (favorito) e “icon” (ícone), ele é usado para identificar rapidamente um site em meio a várias guias ou marcadores.
Os favicons geralmente são imagens pequenas, e devem ter o formato .ico, .png ou .jpg. Eles podem ser logotipos, letras ou outros elementos que representam a identidade visual de um site. Quando você visita um site, o navegador procura automaticamente o arquivo favicon.ico na raiz do servidor e o exibe nas guias e na barra de endereço.
Quando falamos em favicons para sites, as dimensões recomendadas são de 16×16 pixels ou 32×32 pixels, já em aplicativos para IOS, são de 180×180 pixels e para apps desenvolvidos no Android, são de 192×192 pixels.
Os favicons são úteis porque tornam mais fácil para os usuários identificarem os sites quando têm várias guias abertas no seu navegador. Além disso, eles ajudam a reforçar a marca, uma vez que muitas vezes são representados com os logotipos das empresas.
Qual a importância do Favicon para SEO?
As pessoas podem não acreditar, mas o favicon também tem sua importância em SEO. De forma direta ou indireta, apesar de não ser um fator de classificação.
Sua importância em SEO está mais relacionada à experiência do usuário e à identificação da marca, ou seja, se pensarmos que hoje em dia o SEO está muito ligado na experiência do usuário, é bom levar em consideração esse pequeno ícone como parte da sua estratégia.
Vamos apresentar algumas maneiras pelas quais o favicon pode impactar o SEO:
- Reconhecimento de Marca: Ter um favicon pode ajudar os visitantes a identificarem rapidamente sua marca. Isso pode aumentar a taxa de cliques (CTR), pois geralmente os usuários clicam em resultados familiares.
- Usabilidade: Ter um favicon visível nas guias do navegador ajuda os usuários a navegar de forma eficiente quando têm várias guias abertas. Isso melhora a usabilidade, tornando seu site mais amigável, e facilita a retenção de visitantes.
- Profissionalismo e Credibilidade: Ter um favicon pode aumentar a percepção da sua marca, tornando-a mais profissional. Isso pode influenciar a forma como os visitantes interagem com seu conteúdo e produtos, o que por sua vez, afeta o desempenho do site nos mecanismos de busca.
- Marcação Open Graph: Alguns mecanismos de busca, como o Google, podem usar o favicon como parte das informações exibidas quando seu site é compartilhado em redes sociais ou nos resultados da busca. Um favicon pode melhorar a aparência dos seus links compartilhados.
Melhores ferramentas online para fazer Favicon
Existem várias ferramentas online gratuitas que você pode usar para criar um favicon para o seu site. Vamos listar as melhores ferramentas disponíveis na internet para você fazer o seu.
- Favicon.io: Favicon.io é uma ferramenta simples que permite criar favicons rapidamente. Você pode fazer o upload de uma imagem e, em seguida, criar favicons nos formatos .ico, .png e .svg. Além disso, oferece a opção de gerar favicons de várias resoluções.
- Favicon Generator and Gallery: O grande diferencial desta plataforma se comparado aos seus concorrentes, é que ela oferece uma galeria de favicons gerados por outros usuários. Você pode escolher entre várias opções de design e, em seguida, personalizar o favicon conforme suas preferências.
- Favicon.cc: Essa plataforma não é muito diferente das outras, também permite criar o seu favicon online de forma personalizada. Você pode usar suas ferramentas de desenho e edição simples para criar o seu ícone exclusivo.
- RealFaviconGenerator: Esta é uma ferramenta mais avançada que não apenas gera favicons, mas também verifica a compatibilidade deles em diferentes navegadores e dispositivos. Ele também oferece a capacidade de gerar favicons para aplicativos móveis e até mesmo para Windows 8/10.
- Canva: Embora o Canva seja conhecido como uma ferramenta de design gráfico, ele também é uma ótima opção para criar favicons. Você pode começar com um modelo em branco e criar o seu favicon usando por exemplo o logo da sua empresa, tudo isso de um jeito simples como de costume na plataforma.
Como inserir um Favicon no seu site manualmente?
Agora que você já conhece algumas ferramentas que podem auxiliar na criação de favicon. Vamos fazer o passo a passo de como aplicá-lo em seu site.
Inserindo o Favicon manualmente
- Crie a imagem do seu favicon em 16×16 pixels ou 32×32 pixels;
- Você pode usar as ferramentas que indicamos ou um editor da sua preferência (por exemplo: Photoshop)
- Salve no formato *.ICO ou *.PNG;
- Faça o upload do arquivo para seu servidor no diretório raiz;
- Agora, adicione a tag abaixo com o caminho do seu site e seu favicon;
<link rel="icon" type="image/png" sizes="32x32" href="https://website.com/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://website.com/favicon-16x16.png">Faça o teste acessando seusite.com.br/favicon.formato, por exemplo.
Você pode acelerar o processo de indexação, para isso informe que o Favicon já está no seu site usando a Inspeção de URL ou Sitemap atualizado através Google Search Console.
Sobre as diretrizes do Google referente a Favicons
- A página inicial do site deve ser rastreável;
- A página inicial e favicon não podem estar bloqueados no robots.txt;
- Evite alterar com frequência a URL do favicon;
- Seu Favicon não pode ter conteúdo inapropriado.
Como inserir um Favicon no seu site pelo WordPress?
No WordPress existem várias maneiras de adicionar um favicon. Vamos ensinar duas formas, uma manualmente que você deve incluir o ícone na raiz do seu tema e a outra usando um plugin.
Adicionando o Favicon manualmente no WordPress
- Crie a imagem com o seu favicon em 16×16 pixels ou 32x32pixels;
- Você pode usar as ferramentas que indicamos ou um editor da sua preferência (por exemplo: Photoshop)
- Salve no formato *.ICO ou *.PNG;
- Faça o upload do arquivo para raiz do seu tema, por exemplo: wp-content/themes/twentytwenty
- Agora adicione a tag abaixo no arquivo header.php com o caminho do seu favicon;
<link rel="icon" type="image/png" sizes="32x32" href="https://website.com/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://website.com/favicon-16x16.png">Adicionando o Favicon através de plugins no WordPress
Existem muitos plugins para aplicar favicon no seu site em WordPress. Por esse motivo vamos optar por usar o Favicon by RealFaviconGenerator que é um dos mais bem avaliados. Instale e ative o plugin no painel do WordPress:
- Siga até o Painel em Aparência >> Favicon;
- Clique em Selecionar da Biblioteca de Mídia para fazer upload. É recomendado pelo plugin que sua imagem tenha pelo menos 260 x 260 pixels.
- Clique em Gerar o favicon. O plugin vai levá-lo até o site RealFaviconGenerator, onde você poderá personalizar sua imagem.
- Selecione Use the original image as is (Usar a imagem original) se você quiser usar o favicon que criou anteriormente.
- Clique em Generate your Favicon and HTML code (Gerar seu Favicon e código HTML). Está feito, agora ele vai voltar para o Painel do WordPress.
Lembre-se, fazendo desta forma, você deve permanecer com esse plugin sempre ativo, pois se não o favicon será removido do seu site.
Gostou do conteúdo?
Comente e compartilhe em suas redes. Se quiser ter mais informações sobre o universo do Marketing, Marketing Digital, Publicidade, Growth e Tech, visite os outros artigos do nosso Blog.
