Ter um ícone personalizado no navegador ao abrir o seu site é uma parte importante da estratégia de branding nos meios digitais. Por isso, se você não sabe o que é favicon e como configurar, é hora de aprender como adicioná-lo às suas páginas on-line.
Continue a leitura do artigo e aprenda o que é, o tamanho correto, a importância do ícone e como gerar e fazer a configuração no seu site.
Boa leitura!
O que é um favicon?
O favicon é um pequeno ícone que fica do lado esquerdo da aba superior do navegador junto do título da página ao abrir um site na internet. O termo deriva da abreviação das palavras em inglês “favorite” e “icon”. Ou seja, significa ícone favorito.
O ícone pode variar conforme o conteúdo do site visualizado no momento, mas não é obrigatório. Por exemplo, ao abrir o Gmail, a aba tem o favicon M, do logo do produto. Ao abrir o Drive da conta, a aba do navegador ganha um ícone de triângulo.
Dessa forma, o usuário sabe em qual aba está o e-mail e em qual estão os arquivos salvos na nuvem. Fácil, não é mesmo? Porém, um site empresarial, por exemplo, precisa de um único favicon.
O ícone também aparece ao marcar uma página como favorita e ao abrir o histórico de navegação. Assim, caso a pessoa busque entre os sites visitados, consegue filtrar visualmente até encontrar a imagem correspondente a página procurada.
Outra forma de visualizar o favicon é quando o usuário digita o endereço na barra do navegador após o primeiro acesso no seu computador.
Tanto ao completar a URL quanto ao sugerir diversas páginas, que aparecem abaixo, é possível ver o favicon. Um detalhe menor, mas que destaca um site profissional.
Favicon do site da GoDaddy.
Qual o tamanho da imagem do favicon?
O tamanho da imagem do favicon é pequeno. A dimensão principal é de 16x16 píxeis, mas números múltiplos, como 32x32, 48x48, 64x64 ou 128x128, também são alternativas possíveis. Independentemente do tamanho, salvar o arquivo nos formatos .ico ou .png é obrigatório.
Em geral, o ícone é o logo da empresa dona do site, as cores ou uma imagem/letra que represente bem o branding da marca.
Por que ter um ícone é importante?
Configurar um favicon é imprescindível para estabelecer a presença digital de uma empresa na internet. Afinal, este pequeno ícone de imagem com o seu logo fará parte do campo visual dos usuários enquanto estiverem com uma página de seu site aberta.
A imagem ainda facilita a identificação dos sites, já que, mesmo se você estiver em outra aba — ou, principalmente, com várias abertas —, não precisa reabri-la para lembrar qual é o conteúdo.
Dessa forma, o visitante, após ver inúmeras vezes o favicon da sua marca, entende que, todas as vezes que o ícone aparece, se trata do seu site.
Como criar um favicon e configurá-lo no site?
Agora que já sabe o que é favicon e sua importância, chegou o momento de aprender a criar e configurar o ícone em seu site. O processo é bastante simples e tem poucos passos. Confira as nossas dicas a seguir!
1. Criar a imagem
Em uma ferramenta de edição de imagens, como o GoDaddy Studio, Photoshop ou Photopea (versão on-line e simplificada do editor profissional), comece a editar o seu ícone. Abra um arquivo em formato quadrado e utilize seu logo ou uma imagem que identifique a sua marca.
Apesar das dimensões padrões serem 16x16, você pode criar a imagem em um tamanho maior e, depois, reduzi-la o quanto for necessário. Assim, caso necessite do logo para outra finalidade, já terá a imagem pronta em dimensões maiores.
Lembre-se de aplicar o fundo transparente para que o logo apareça sozinho. Ao salvar o arquivo, exporte em .png para que a leitura da transparência seja possível.
Entretanto, caso a sua imagem, propositalmente, tenha o fundo preenchido, os formatos .jpg, .jpeg e .gif também são válidos.
2. Gerar o seu favicon
Entre em um gerador de favicons e faça o upload da imagem produzida para gerar um arquivo no formato .ico para adicionar ao site. Os sites indicados incluem essa opção.
Você pode selecionar a opção de criar um ícone em 16x16 ou obter a imagem para Web e aplicativos de celulares Android, iOS e Microsoft. Baixe o arquivo em .zip e, então, descompacte a pasta.
Algumas opções de ferramentas on-line são:
3. Adicionar a imagem ao site
Para configurar favicon dentro do seu site, é preciso abrir o painel de controle e buscar a pasta do tema para adicionar o arquivo. Depois, vá ao HTML e adicione o código correspondente ao favicon dentro da tag de Head, conforme o exemplo de código a seguir:
<link rel="shortcut icon" href="http://www.nomedosite.com/imagens/favicon.ico" type="image/x-icon">
Caso opte por fazer o pacote de favicons para diferentes plataformas, você deve adicionar os códigos de cada um para que o site consiga validar esta informação ao abrir em cada dispositivo.
Se o seu site estiver hospedado no WordPress, você pode baixar um plug-in que permite a configuração do favicon diretamente pelo painel. A maioria é gratuita e adiciona a ferramenta de edição do ícone dentro da opção de identidade do site.
Como colocar um favicon?
Para adicionar um favicon em um site WordPress, vá em Aparência > Personalizar. Em seguida, no menu da barra lateral esquerda, clique em Identidade do Site > Ícone do Site. Nesta última seção, selecione a imagem e adicione o favicon que deseja exibir. Se o tema não tiver essa configuração, instale um plugin.
Gostou de saber o que é favicon e como configurar o ícone dentro do site? Se você está criando a página oficial da sua empresa, precisa de uma ferramenta completa para personalizar cada detalhe.
Conheça o GoDaddy Studio, uma plataforma extremamente intuitiva e fácil de utilizar. Lá você encontra diversos recursos para criar conteúdos para redes sociais, artes para e-mail marketing, interface de site e, claro, o logo da marca.
Quer aprender mais sobre personalização de site? Confira a seleção de artigo a seguir:
