O que é favicon e como criar o do seu site?

Por: Victoria Salemi

Aba de navegador com o favicon em evidência

Você sabe o que é favicon e para que ele serve? E, se já tem esse conhecimento, sabe como criar um para o seu site?

Saiba que, apesar de parecer pequeno, esse elemento de uma página na internet diz muito sobre o profissionalismo de uma empresa.

Por isso, ao longo deste artigo, você descobre o que é favicon e para que ele serve. Além disso, vamos conferir as principais ferramentas online para criar o seu e como adicioná-lo ao seu site.

Então, vamos lá?

Crie sua loja virtual e venda pela internet
Crie sua loja virtual e venda pela internet pelo seu computador

O que é favicon?

Favicon de um site, blog ou loja virtual é um pequeno ícone, símbolo ou logotipo quadrado de, normalmente, 16 × 16 pixels. Ele fica localizado à esquerda das abas dos navegadores web (como o Google Chrome ou o Firefox).

Veja um exemplo na imagem abaixo:

Captura de tela do site da Nuvemshop com seta indicando o que é o favicon na imagem

Além disso, o favicon de um site é exibido junto à barra de favoritos e nos atalhos do Google quando você abre uma nova aba no Chrome. Observe:

Captura de tela do Google mostra miniaturas de páginas favoritas com seus respectivos favicons

O nome “favicon” vem da junção das palavras da língua inglesa “favorite” (favorito) e “icon” (ícone).

Para que serve o favicon?

O favicon serve para ajudar a identificar um site visualmente. Mas, mais do que isso, ele colabora com uma série de fatores. Confira os principais:

Branding

Qualquer proprietário de site precisa criar uma imagem que deve ser exibida como um favicon para atrair os usuários. Todos nós sabemos como um logotipo conecta as pessoas visualmente com o seu negócio e como dá significado a uma marca. O favicon, então, representa o seu site.

💡 Saiba mais: O que é branding: aprenda como fazer a gestão da sua marca

Diferenciação dos concorrentes

As pessoas navegam pela internet de acordo com as suas necessidades e preferências. E o favicon as ajuda a identificar um site específico quando abrem várias guias em um navegador.

Desse modo, ao bater o olho no seu logo, quando usado como favicon, a pessoa saberá facilmente que aquela aba corresponde à do seu site.

Confiança

Se o seu site não tiver um favicon, o navegador web exibirá um ícone padrão e em branco na guia. Se a sua página for exibida assim ao lado de um site concorrente, você, provavelmente, perderá a confiança de um possível cliente.

Isso acontece porque os usuários tendem a julgar os negócios online pela construção visual, se eles transmitem uma imagem de algo profissional ou amador.

💡 Saiba mais: O que é e como definir a identidade visual da sua marca?

Crie sua loja virtual e venda pela internet
Crie sua loja virtual e venda pela internet pelo seu computador

Como criar um favicon?

Existem muitos serviços que permitem desenvolver um favicon. Alguns fornecem apenas o arquivo .ico (o formato necessário para seu ícone) gerado a partir de uma imagem que você envia para eles.

Outras ferramentas permitem que você desenhe o favicon do zero, de maneira simples. Também é possível criar um símbolo em um editor gráfico, como o Photoshop.

Contudo, a seguir, você confere como fazer um favicon online, por meio de ferramentas específicas:

Logaster

Captura de tela da ferramenta Logaster para criar um favicon

O Logaster é um serviço online para criar logos, favicons e outros elementos de identidade corporativa. Basta seguir este simples tutorial:

  1. Acesse o Logaster e clique em “Criar um favicon”;

Caso você ainda não tenha um logotipo para a sua loja online, é necessário criá-lo antes. Para isso:

  1. Escreva o nome da sua loja online, escolha o tipo de negócio, palavras-chave relacionadas a ele e ícones dos quais você gosta, além das cores da sua marca;
  2. Você receberá uma grande quantidade de opções geradas pelo Logaster, então escolha a sua preferida. Não é necessário criar o logotipo perfeito ou gastar muito tempo nele, se o seu objetivo for apenas o favicon. O logotipo serve como base e pode ser modificado posteriormente;
  3. Crie sua conta gratuita e faça o login;
  4. Clique em “Favicon” no menu à esquerda;
  5. Faça o download do modelo gerado.

O Logaster não gera apenas uma variante do ícone (como os outros serviços online), mas dezenas de belos favicons prontos para serem usados. Basta selecionar o seu design preferido.

Ok, agora o seu favicon foi criado. Após o download, você receberá arquivos .ico e .png em diferentes tamanhos.

Genfavicon

Captura de tela da ferramenta Genfavicon para criar um favicon

O Genfavicon é uma ferramenta rápida e fácil, que te permite carregar uma imagem diretamente do computador ou inseri-la através de uma url e convertê-la em um favicon. Inclusive, essa ferramenta oferece a opção de recortá-lo da forma que você quiser.

Confira como ela funciona:

  1. Visite o site Genfavicon e faça o upload da imagem que será transformada em um favicon. Dica: a imagem ficará mais profissional se refletir o logotipo do seu negócio ou, pelo menos, possuir a mesma paleta de cores do seu site;
  2. Faça as edições necessárias, recorte e visualize como o favicon vai ficar ao final. Além disso, nessa etapa, é necessário escolher o tamanho desejado;
  3. Faça o download do seu favicon em formato .ico ou em .png.;
  4. Tudo o que você precisa fazer agora é carregá-lo em seu site.

X-icon Editor

O X-Icon Editor é um aplicativo HTML5 que permite criar ícones de alta resolução para dar destaque ao seu site.

  1. Vá para o X-Icon Editor e comece a desenhar o favicon, pixel por pixel. Existem muitas ferramentas de edição disponíveis: pincéis, lápis e formas, além de ser possível alterar a transparência de cada cor escolhida e selecionar múltiplas resoluções (16, 24, 32 e 64 Pixels);
    Captura de tela da ferramenta X-Icon para criar um favicon
  2. Clique na visualização e observe como o seu ícone está ficando;
  3. Se você gostar do resultado, baixe o favicon. Você receberá um arquivo .ico.

Como colocar um favicon no meu site?

Quando o favicon estiver pronto, é hora de colocá-lo no seu site ou loja online. A forma para fazer isso, no entanto, vai depender de como seu site foi criado.

De modo geral, esse passo envolve um pouco mais de conhecimentos técnicos — a não ser que você tenha uma loja na plataforma de e-commerce da Nuvemshop. Caso você tenha uma loja Nuvem, basta seguir o tutorial abaixo:

👉 Como inserir o logo na aba do navegador?

Crie sua loja virtual
Testar 30 dias grátis

Caso não tenha uma loja Nuvemshop, para colocar o favicon no seu site, o passo a passo é o seguinte:

  1. Faça o upload do seu favicon para o diretório raiz do seu site;
  2. Edite o código-fonte que contém toda a sua página;
  3. Adicione, então, a seguinte linha de código abaixo da tag (em que “favicon.ico” é o nome do arquivo de imagem):
    <link rel=’shortcut icon’ href=’favicon.ico’ type=’image/x-icon’ />
  4. Salve o arquivo e visualize o seu site no navegador. Agora, ele terá um favicon. Confira também como aparece em navegadores diferentes e na lista de favoritos.

Resumo

Pronto! Agora você sabe o que é um favicon, como produzir e instalá-lo em sua loja online. Não perca tempo, crie um agora. Como vimos, ele facilita a identificação da sua marca e transmite uma imagem de profissionalismo à sua audiência.

Antes de encerrarmos, confira um rápido resumo sobre este conteúdo:

O que é favicon?

Favicon é um pequeno ícone, símbolo ou logotipo de, no máximo, 16 × 16 pixels. Ele fica localizado à esquerda das abas dos navegadores web. Além disso, o favicon de um site é exibido junto à barra de favoritos e nos atalhos do Google quando você abre uma nova aba no Chrome.

Para que serve o favicon?

  • Branding
  • Diferenciação da concorrência
  • Confiança

Como criar um favicon?

As principais ferramentas são:

  • Logaster
  • Genfavicon
  • X-icon Editor

Quer vender pela internet com seu site personalizado — inclusive com um favicon? Crie sua loja teste por 30 dias grátis com a Nuvemshop! É simples, rápido e sem a necessidade de conhecimentos técnicos!

Aqui você encontra:

Faça como +90 mil lojas e
crie a sua Nuvemshop

Testar 30 dias grátis
Crie a sua loja na Nuvemshop

Quer vender pela internet com profissionalismo?

Crie agora sua loja virtual com a Nuvemshop e venda de maneira profissional.

Testar 30 dias grátis

Nosso site utiliza cookies para te proporcionar uma melhor experiência. Ao acessar o site da Nuvemshop, você concorda com a nossa Política de Privacidade e Cookies