10 melhores sites para criar um Favicon

Como criar um Favicon?

Antes de tudo, favicon é a abreviação em inglês para o termo “Ícone Favorito”. Se trata de um pequeno ícone que aparece ao lado do URL do site, ou ao lado do nome da página em uma guia do navegador quando você acessa um site. Além disso, aparece também na frente do nome de todos os sites que são adicionados à lista de favoritos.

Você sabia? O favicon foi introduzido pelo Internet Explorer em 1999, e desde lá muito pouco mudou.

Os favicons quase sempre são arquivos no formato .ICO que são colocados no diretório raiz onde o site está hospedado. Por exemplo: favicon.ico ou organizados por um CMS em um diretório de temas ou de imagens, exibidos através de um código:

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

Principais tamanhos de favicon (em px):

  • 16×16: favicon de navegador
  • 32×32: ícone do atalho da barra de tarefas
  • 57×57: padrão para a tela inicial do iOS
  • 76×76: ícone da tela inicial do iPad
  • 96×96: ícone do atalho da área de trabalho (ícone do Google TV)
  • 128×128: ícone do Chrome Webstore
  • 196×196: ícone do Android Chrome
  • 228×228: ícone do Opera Coast

Quais formatos são necessários?

  • O arquivo ICO ainda é o formato mais amplamente suportado. Ao contrário do PNG, ele pode conter múltiplas resoluções e profundidades de bits, o que é muito útil no Windows.
  • O PNG pode ser mais conveniente, pois ele não requer ferramentas especiais para ser criado, suporta a transparência alfa e nos oferece o menor tamanho de arquivo possível. Sua única desvantagem é que o Internet Explorer não o suporta (ele só aceita .ICO).

O que torna um Favicon eficaz?

Um favicon eficaz é aquele que reflete as mesmas cores do seu site ou o seu logotipo. É como a última peça de um quebra-cabeça.

Uma prática comum é diminuir o seu logotipo até o tamanho ideal usado para o favicon. Porém, alguns logotipos simplesmente não são bons para serem exibidos em tamanhos tão pequenos, portanto, se este for o seu caso, você pode optar em transmitir através de um favicon apenas algumas das características da identidade visual da sua marca, como formas e cores.

Des1gnON - 10 Sites para Criar um Favicon - Facebook Amazon

Você pode, por exemplo, pegar uma única letra do seu logotipo e transformar no favicon. É exatamente isso que faz a Amazon e o Facebook.

Dicas de como criar um favicon impressionante:

  • A imagem deve ser quadrada.
  • Torne-o relevante para a sua marca. Crie pensando na harmonia com a aparência geral de seu site.
  • Use o mesmo esquema de cores que é usado em seu site.
  • Nunca use uma imagem aleatória ou uma imagem pixelizada como favicon.
  • Mantenha o design simples: evite sombras, textura e palavras.
  • Use linhas e formas minimalistas. É a melhor maneira de criar um favicon nítido e eficaz.

+LEIA TAMBÉM: 5 Exemplos de Identidade Visual que merecem ser vistos


A importância de criar um favicon para seu Web site

Favicons são muito importantes, mais do que você pensa!

01. Branding

Todos sabemos a importância dos logótipos. É o que nos liga visualmente a um negócio específico. O que o McDonald’s seria sem os arcos dourados? Ou o Twitter sem o pequeno pássaro azul?

Des1gn ON - 10 Sites para Criar um Favicon - blog

Seja ele derivado do logotipo da sua empresa ou de uma representação visual totalmente nova, o favicon funcionará como um logotipo em miniatura. Isso ajuda os usuários da internet a lembrarem da sua marca.

02. Favicons tornam o site facilmente reconhecível

Quando um usuário da internet possui várias abas/guias abertas, o favicon facilita a distinção entre os diferentes sites. Se um site não usa um favicon, simplesmente haverá um ícone de uma folha em branco sendo exibido ao lado do nome do site.

Des1gn ON - 10 Sites para Criar um Favicon - blog2

03. Credibilidade e confiança.

Como dissemos anteriormente, se o seu site não tiver um favicon, o navegador da Web exibirá, por padrão, um ícone em forma de uma folha em branco na guia do navegador. Algo assim, parecerá descuido ou relaxamento e facilmente resultará em perda de credibilidade, especialmente quando os usuários estão comparando você com os seus concorrentes.

Um site que tem um favicon transmite profissionalismo e confiança aos usuários que o visitam.

04. Favoritos

Os favicons fazem com que os usuários economizem tempo ao permitirem que o seu site seja identificado rapidamente em uma lista de favoritos, histórico ou qualquer outro lugar onde os favicons são exibidos no navegador. Isso torna a vida do usuário mais fácil.

Se você não tem um favicon, o usuário pode até mesmo remover o seu site da lista de favoritos dele.

Lembre-se: hoje em dia as pessoas usam os sites de diversas maneiras em comparação a como usavam no passado. Alguns de nós marcam as páginas da web como favoritos, outros adicionam elas como atalhos na tela inicial de um dispositivo, usando-as como se fossem aplicativos, etc. É por isso que é importante ter um favicon; se você esquecer do favicon, o seu site não ficará legal!

Se você é um web designer e quer ter um favicon impressionante em seu site ou quer criar um favicon para os sites em que você está trabalhando, então confira a lista que preparamos com alguns dos melhores aplicativos que lhe ajudarão na tarefa de concepção do seu favicon.


Como criar um favicon

Existem algumas maneiras de criar um favicon:

  • Desenhar do zero usando editores gráficos profissionais, como o Photoshop, Illustrator ou Inkscape.
  • Usar um site com um gerador de favicon online.

Abaixo está uma lista com os melhores serviços online que você pode encontrar para criar o seu favicon perfeito e em questão de minutos!

Logaster

O Logaster é um serviço online que pode ajudá-lo a criar não apenas o favicon para o seu site, mas também o logotipo. Significa que você pode criar tudo em um só lugar dentro de alguns minutos.

Com base em seu logotipo, a ferramenta irá gerar dezenas de belos favicons prontos para usar. A pré-visualização permite que você veja como o seu favicon irá ficar no seu site.

Além disso, você pode editar o ícone: alterar a cor, a fonte e o ícone.

Des1gn ON - 10 Sites para Criar um Favicon

Após escolher o seu favicon, você pode salvá-lo e fazer o download. Você receberá arquivos .ico e .png em tamanhos diferentes (16×16, 32×32, 96×96, 192×192), além dos ícones para o Apple Touch no formato png.


Favicon & App Icon Generator

Des1gnON - 10 Sites para Criar um Favicon - Logaster - favicon generator

O que essa ferramenta faz? Muitos navegadores web modernos suportam favicons com as extensões GIF e PNG e outros formatos populares de arquivos, mas todas as versões do navegador Internet Explorer ainda necessitam que os favicons sejam salvos como arquivos .ICO.

Esta ferramenta fornece uma maneira fácil de converter qualquer arquivo com extensão GIF, PNG ou JPEG para um arquivo ICO, que também é suportado por todos os navegadores web modernos. Depois de gerar um favicon com esta ferramenta, você pode baixar o ícone. O serviço também cria ícones de aplicativos.

Infelizmente, você não pode editar ou modificar o favicon, você receberá simplesmente um pequeno ícone conforme a imagem que você enviou.


Favic-o-matic

Des1gnON - 10 Sites para Criar um Favicon - Logaster - Favic o matic

O Favic-o-matic possui duas opções diferentes para criar um favicon. Você pode enviar a sua imagem e depois convertê-la para um arquivo no formato .ico. Ou pode criar um ícone para todas as plataformas, incluindo aplicativos iOS e Android. As configurações avançadas permitem que você escolha o tamanho do seu favicon, a cor de fundo e muito mais.

Favicon.io

Des1gnON - 10 Sites para Criar um Favicon - Faviconio

Esta é uma pequena ferramenta que pode ajudá-lo a criar um favicon em poucas etapas. Tudo o que você precisa fazer é personalizar o seu ícone, escolhendo o texto, a fonte, a forma e as cores. Depois disso, é só baixar o arquivo .ico ou .png. Outra opção disponível é a conversão de uma imagem em um arquivo .ico.

Outra coisa legal é que existe uma enorme lista com emojis, que você pode copiar e colar para criar um favicon com emoji. Você definitivamente deve experimentar!


Real Favicon Generator

O serviço permite que você crie um favicon para tudo: todos os navegadores, todas as plataformas e quase todas as tecnologias. Esta ferramenta funciona através do upload de uma imagem a partir da qual será gerado o favicon.

Você pode visualizar e baixar seus arquivos. O serviço também vai gerar o código HTML necessário para inserir o favicon em seu site ou aplicativo.


X-Icon editor

Des1gnON - 10 Sites para Criar um Favicon - XIcon editor

O X-Icon Editor é um aplicativo HTML5 que permite a criação de ícones de alta resolução que deixam o seu site brilhando ao ser acessado com o navegador IE9 e versões acima.

O serviço funciona assim: você pode carregar uma imagem e baixar o favicon pronto para usar (em apenas 4 tamanhos: 16px, 24px, 32px, 64px) ou você pode desenhar um ícone a partir do zero. Há muitas opções de edição disponíveis enquanto você está desenhando. Você pode usar pincel, lápis, balde de pintura, formas, etc.

Nota: você receberá seu arquivo apenas no formato .ico.


Genfavicon

Des1gnON - 10 Sites para Criar um Favicon - Genfavicon

A ferramenta funciona de forma bastante simples. Você pode selecionar uma imagem de um computador ou uma imagem online e pode escolher o tamanho do Favicon.

Existem 5 tamanhos de ícone disponíveis. Recorte a imagem, se necessário, e baixe o seu favicon no formato .ico ou png.


Favicon.cc

Des1gnON - 10 Sites para Criar um Favicon - Faviconcc

O Favicon.cc é um criador e gerador de favicon. Você pode usá-lo para desenhar o seu favicon a partir do zero ou para importar uma imagem que será convertida em um favicon.

Esta ferramenta também permite que você crie favicons animados. Além disso, eles oferecem uma lista com os favicons criados recentemente através do sistema deles e também uma lista com os favicons mais bem avaliados para ajudá-lo a inspirar-se.

Você pode baixar seu design no formato .ico e você estará pronto para exibir o seu ícone na barra de endereços de cada navegador da Web.

Como funciona? Escolha uma cor, clique nos quadrados e pinte o ícone, baixe quando terminar. É isso aí!


Prodraw

Des1gnON - 10 Sites para Criar um Favicon - Prodraw

O Prodraw possui um gerador de favicon gratuito que suporta o envio de imagem em formato JPG, PNG, GIF, BMP, TIF e TIFF. Escolha a sua imagem em seu computador e o Prodraw irá convertê-lo em um arquivo .ico.

Os tamanhos de saída variam desde o menor tamanho do ícone 16x16px até o tamanho do ícone do Windows Vista de 128x128px e tudo o que entre eles. Você pode baixar o arquivo .ico e enviá-lo para o seu site.


Favikon

Des1gnON - 10 Sites para Criar um Favicon - Favikon

A ferramenta mais simples de toda essa lista. Basta carregar uma imagem, recortá-la e baixar o seu favicon no formato ico ou png. Não há outras opções de edição fora a de recortar, mas se tudo o que você precisa fazer é converter uma imagem para um arquivo .ico, esta ferramenta gratuita e fácil de usar servirá muito bem.

Você também não consegue escolher o tamanho, você receberá o favicon no tamanho menor, que é o padrão.


Conclusão

Como você pode ver, o objetivo principal dessas ferramentas é criar favicon. A única diferença é o caminho para a criação.

Todos possuem um estilo próprio. Portanto, basta você encontrar a que melhor lhe sirva de acordo com o seu gosto e objetivos.

FATO: Um favicon é uma parte pequena do site e por isso, geralmente não prestamos muita atenção nele. Mas a verdade é que ele é uma parte fundamental do nosso site, tanto da perspectiva da interface do usuário, como do ponto de vista da marca comercial.

Agora é sua chance de criar um favicon agora com uma das ferramentas acima, para então fazer com que o seu site se destaque da multidão.

Share

10 melhores sites para criar um Favicon

Discussion

Leave A Reply

Your email address will not be published. Required fields are marked *