Apenas por Tempo Limitado - Economize até 69 %

00

dias

:

15

horas

:

11

minutos

:

16

segundos

Blog do Zyro

Todos os tópicos
Blog de e-Commerce Design Dicas para Pequenas Empresas Essenciais Ideias de Negócio Insights do Zyro Inspiração Marketing Novidades do Zyro

Como Criar Um Favicon

Como Criar Um Favicon

O favicon é um detalhe que vai fazer sua empresa se destacar e chamar a atenção dos clientes – por isso você não deve deixá-lo de lado quando for criar sua marca.

E, além disso, criar um favicon é extremamente simples.

Mesmo que você possa criar seu site sem um, não existem motivos para excluir o favicon da sua lista de tarefas como empreendedor digital.

Afinal, o que é um favicon?

Os favicons são as pequenas ilustrações mostradas nas abas do navegador e listas de sites favoritos quando usamos Chrome, Mozila e Safari, por exemplo.

A palavra “favicon” é abreviação de “favorite icon”, ou seja, ícone de favoritos. Essas pequenas ilustrações também são chamadas de:

  • Ícones de atalho
  • Ícones de site
  • Ícones de bookmark

Lá em 1999, os favicons foram apresentados aos internautas no lançamento do navegador Internet Explorer 5.

As empresas geralmente usam uma versão compacta de seu logotipo como favicon, reduzida ao tamanho de 16×16 pixels.

Os favicons ajudam os usuários a encontrarem seu site mais facilmente quando estão com várias abas abertas no navegador.

É como se o usuário estivesse em um shopping procurando uma peça de roupa – as doze abas abertas no navegador são como as diferentes lojas da galeria.

O que eles conseguem ver é uma fileira de pequenos logotipos, podendo ir de um site para o outro, comparando preços e produtos.

Claro: os títulos das páginas ficam logo ao lado dos favicons e o usuário pode usá-los como guia. Mas quem tem tempo para ficar lendo as abas o tempo inteiro?

Como criar um favicon

Homem desenhando

Agora que você já sabe o que eles são, deve estar querendo aprender como criar um favicon para o seu site também.

Ter um favicon é uma das maneiras mais fáceis de chamar a atenção dos visitantes, além de fazer seu site parecer bem mais profissional também.

E, se você ainda não sabe como criar um favicon, saiba que o processo é bem simples e rápido.

Você tem duas opções: criar seu design sozinho ou usar um gerador de favicon que vai fazer todo o trabalho por você.

Saber como criar um favicon é uma habilidade preciosa, então vamos apresentar o passo-a-passo que você deve seguir se quiser criar favicons manualmente.

1. Crie uma imagem

A maioria das empresas usa seus logos como favicons também.

Mas você pode escolher qualquer imagem que represente seu site. Só mantenha em mente que:

  • O favicon precisa ser consistente com seu branding. Use a mesma paleta de cor, fontes e formas que você já usa para representar sua marca.
  • Seu favicon precisa se destacar. Seus clientes devem conseguir lembrar da imagem com facilidade.
  • Você não deve copiar nenhum ícone ou imagem que já esteja sendo usado por outro site. Não corra o risco de ser confundido com outra marca.

Você pode criar favicons usando um editor de imagens como o Photoshop ou um software online gratuito como o Canva. Se o orçamento permitir, você pode até contratar um designer gráfico profissional para gerar um favicon para você.

Se você quer que seu favicon seja marcante, profissional e eficaz, existem alguns elementos que precisam ser evitados. Lembre-se dessas regras básicas:

  • Não use fotos. O favicon precisa ser bem pequeno para caber na aba do navegador, então nenhuma foto vai ficar nítida o sufiuciente desse tamanho. Os clientes não vão conseguir entender a foto e vai ser bem difícil se lembrar do seu favicon.
  • Não use palavras. Você pode adicionar uma, duas e até três letras no seu favicon, especialmente se as letras fizerem parte do seu logo. Mas colocar uma palavra inteira? Nem pensar.
  • Sem marketing barato. Sabemos que o favicon é uma ótima oportunidade de aumentar o reconhecimento da sua marca, mas não é o lugar certo para inserir mensagens promocionais, como banners de “sale” e “novo”.

Use um arquivo do tamanho correto

As abas dos navegadores exibem favicons do tamanho 16×16 pixels, mas, no site, eles podem ser mostrados com 32×32 pixels e até mesmo 64×64 pixels.

Garanta que seu favicon tenha a melhor aparência em qualquer situação. Crie uma imagem no formato maior. Afinal, ela sempre poderá ser comprimida para caber no formato 16×16.

Use o formato certo

Antigamente, os favicons precisavem ser salvos no formato .ico, mas hoje arquivos .png também são aceitos. Você pode usar ferramentas como o faviconer.com para transformar suas imagens em .ico.

Porém, se você quiser que seu favicon apareça como ícone ficado na aba do navegador Safari, vai precisar salvar o arquivo no formato .svg.

Use o estilo correto

Vale a pena lembrar que os favicons não aparecem só na aba do navegador e na lista de sites favoritos. Ele também vai ficar visível em dispositivos sem fio e como ícone de atalhos.

Com isso em mente, crie duas versões da imagem do seu favicon: uma com plano de fundo sólido, e uma com funco transparente. Dessa forma seu favicon vai ter o visual perfeito em qualquer lugar que ele aparecer.

2. Importe a imagem para o seu site

Homem Trabalhando no Computador ao Lado de Um Cachorro

Assim que seu ícone estiver criado e pronto para ser inserido no site, o próximo passo será bem simples.

Você só precisa renomear seu arquivo .png ou .ico como “favicon” e importar o arquivo para o diretório raiz do seu site.

Se seu favicon estiver no formato .png, você provavelmente vai precisar importar diversas versões do arquivo para cobrir todos os tamanhos possíveis.

É por isso que vale a pena converter seu favicon para o formato .ico: porque os arquivos desse tipo podem conter mais de um ícone ao mesmo tempo, ou seja, você pode importar vários tamanhos da mesma imagem de uma vez só.

3. Adicione um código HTML bem simples

Você provavelmente não vai precisar adicionar nenhuma linha de código para fazer os navegadores atuais encontrarem seu favicon. A maioria deles vai detectar seu arquivo .ico ou .png automaticamente e adicioná-lo como o ícone do seu site.

Mesmo assim, vale a pena adicionar uma linha bem simples de código para garantir que seu ícone seja visível em qualquer navegador.

Para implementar o código HTML “link rel= shortcut icon” em seu site, você só precisa abrir o arquivo header.php e digitar isto aqui abaixo ou depois da tag </head>:

<link rel=“shortcut icon” type=“image/ico” href=”/favicon.ico>

Só não se esqueça se alterar o tipo de extensão se você tiver salvo sua imagem como .png ou outro formato. Para isso, é só trocar as palavras “ico” pelo tipo de arquivo que você está usando.

4. Crie favicons versáteis

Placa Com o Logo da Apple

Cada vez mais transações e compras são feitas a partir de dispositivos móveis como celulares e tablets. Por isso, aproveite para lucrar com o uso sem-fio do seu site.

Nem todas as pessoas do mundo usam aparelhos da Apple, mas você precisa criar um ícone para Apple Touch se quiser que seu favicon apareça corretamente para quem usa dispositivos dessa marca.

Os ícones para Apple Touch ilustram os links dos sites que o usuário salvou na tela inicial do celular ou do tablet.

Mas nem todo site é otimizado para ser usado no Apple Touch. Nesses casos, quando um usuário salva o link do site na tela inicial, o ícone mostrado não é o favicon, mas uma cópia pequena da landing page.

Se você quiser ter aparência mais profissional, você pode criar favicons feitos especialmente para dispositivos Apple.

Para isso, importe o arquivo do favicon no formato .png. É recomendado criar um ícone de 180×180 pixels, para garantir que ele fique bonito em telas de qualquer tamanho.

Por último, vale a pena adicionar também outro código HTML ao seu site, se referindo especificamente aos ícones para Apple Touch. O código vai ficar mais ou menos assim:

<link rel=”apple-touch-icon” sizes=180×180” href=”/apple-touch-icon-180×180.png>

Como criar um favicon de forma ainda mais fácil

Lembra que no começo deste texto falamos que existem dois jeitos de criar favicons para o seu site?

A primeira opção já é bem simples, mas a segunda é ainda mais rápida e fácil.

Você só vai precisar de usar um construtor de sites.

Criados para facilitar sua vida de todas as maneiras possíveis (pelo menos no que se refere a criar e gerenciar sites e lojas virtuais), os melhores construtores de site do mercado já vêm com um gerador de favicon.

Usando uma ferramenta como o gerador de favicon do Zyro, você terá acesso a todas as informações que precisa para criar favicons sem precisar adicionar código HTML, converter imagens ou contratar um designer para criar sseu ícone.

Vamos explicar agora o passo-a-passo que você precisa seguir para importar um favicon para seu site usando um gerador de ícones. Vamos usar a ferramenta do Zyro como exemplo.

1. Escolha um template

Você pode escolher um dos templates prontos do Zyro ou importar uma imagem do seu computador.

2. Customize até ficar tudo do seu jeito

Use todas as ferramentas que estão à sua disposição para alterar cores, imagens, layout e texto.

3. Faça o download do favicon e pronto

Pronto – já é hora de baixar o favicon como arquivo .png ou .ico e publicá-lo no seu site.

Quando for importar o favicon gerado ao seu site Zyro, você não vai precisar inserir código algum, nem converter imagens. Você só vai precisar dar alguns cliques e já vai estar tudo pronto.

Vá até o editor de sites do Zyro. Se você tiver mais de um site, escolha aquele que você quer que receba o favicon.

Selecione Configurações gerais dentro do menu Configurações. Encontre a opção Favicon e expanda para ver as opções disponíveis.

Vá até Pesquisar arquivos para encontrar a imagem que você criou com o gerador de favicon do Zyro. Clique duas vezes para fazer upload do arquivo.

Depois, confira a prévia para ver como o ícone vai aparecer nos navegadores dos seus visitantes.

Se você estiver satisfeito com o resultado, clique em Salvar alterações e seu favicon já estará inserido nas suas páginas.

Escrito por

Avatar do autor

Jeisy Monteiro

Jeisy é dedicada a pesquisar e escrever sobre como pequenos e médios negócios podem crescer na internet de forma sustentável. Ela publica sobre criação de sites, empreendedorismo digital, tecnologia e e-commerce no blog do Zyro. No tempo livre, coleciona cassettes.

Faça parte da conversa

Seu email não será publicado. É obrigatório preencher todos os campos.