19/10/2017

Como criar um favicon para a sua loja online

folha na luz como criar favicon para loja online

Favicon é um pequeno ícone, símbolo ou logotipo de no máximo 16×16 pixels que fica localizado à esquerda das abas dos navegadores web (por exemplo, Google Chrome ou Firefox). Confira alguns exemplos na imagem abaixo:

favicon exemplo

Um bom favicon deve ser projetado para combinar ou corresponder com o seu logotipo ou tema do seu site. Ele permite que os usuários rapidamente reconheçam a sua página entre as demais.

Por exemplo: com muitas abas abertas no navegador, através desse símbolo, o cliente encontrará mais facilmente o da sua loja online. Esse ícone também é visível nas listas de favoritos dos navegadores web e nos agregadores de feed. É possível aplicá-lo em qualquer site, desde que você tenha acesso ao diretório raiz.

A importância de um favicon

Por que o favicon é importante para o seu site? Os principais motivos são:

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.

Diferenciar-se dos concorrentes

Pessoas navegam pela internet de acordo com as suas necessidades e preferências. E, como já foi dito anteriormente, o favicon ajuda-as a destacar um site específico quando o usuário abre várias guias em um navegador.

Confiança

Esse ponto está ligado ao anterior. 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á credibilidade e a confiança de um possível cliente, pois os usuários tendem a julgar empresas e serviços online pela construção visual – se é algo profissional ou amador.

Como criar um Favicon

Agora que já temos um entendimento sobre o que é favicon e o porquê de sua loja online precisar de um, podemos começar a criar.

Existem muitos serviços que permitem desenvolver um ícone. Alguns fornecem apenas o arquivo .ico gerado de uma imagem que você envia para eles. Outros serviços permitem que você desenhe o favicon do zero, usando uma ferramenta simples.

Também é possível criar um símbolo em um editor gráfico, como o Photoshop. Contudo, gostaríamos de mostrar como criá-lo online, por meio dos sites listados abaixo:

Logaster

logaster exemplo

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 primeiramente. Mas não se preocupe, isso não levará muito tempo, nem exigirá esforço;
  2. Escreva o nome da sua loja online e escolha o tipo de negócio. Você receberá uma grande quantidade de opções geradas pelo Logaster. 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. Clique em “Criar um favicon com este logo” na página do logotipo e escolha o design.

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. Selecione o design preferido. A pré-visualização permite que você analise como o seu favicon aparecerá no site. Ainda é possível editá-lo, se necessário.

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

Genfavicon

genfavicon exemplo

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, oferece a opção de recortá-lo da forma que você quiser. Como funciona:

  1. Visite o site Genfavicon e faça upload da imagem que será transformada em um favicon. Dica: pode ser a que você quiser, porém ficará mais profissional se refletir o logotipo do seu negócio ou, pelo menos, possuir o mesmo esquema de cores do seu site;
  2. Em seguida, você poderá fazer a edição, recortar e visualizar como ela 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. Tudo o que você precisa fazer agora é carregá-lo em seu site.

X-icon Editor

xicon editor exemplo

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 poder alterar a transparência de cada cor escolhida. É possível também escolher múltiplas resoluções (16, 24, 32 e 64 pixels);
  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 instalar o favicon em seu site

Quando o favicon estiver pronto, é hora de aplicá-lo – se a sua loja online for da Nuvem Shop, basta seguir esse tutorial; se não, é só acompanhar os próximos passos:

Faça o upload do seu favicon para o diretório raiz do seu site. Edite o código-fonte que contém oda sua página.

Adicione, então, a seguinte linha de código abaixo da tag:

<link rel=’shortcut icon’ href=’favicon.ico’ type=’image/x-icon’ />

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.

Pronto! Agora você sabe o que é um favicon, como produzir e instalá-lo em sua loja online. Não perca tempo, crie um agora!


Crie sua loja virtual e venda pela internet
Crie sua loja virtual e venda pela internet

Data da última atualização: 16/03/2018


O que você achou desse conteúdo?


Liliia Trokhymchuk

Liliia é profissional de marketing na Logaster, um serviço online para a criação de logos e elementos de identidade de marca. Atualmente, está se especializando em marketing de conteúdo, blogging e branding. E é apaixonada por fotografia.


    como-criar-um-favicon-para-a-sua-loja-online