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.

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 Website

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?

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.

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.

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

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.

Website Planet – Gerador de favicon

Bem fácil de usar! Tudo que você precisa fazer é enviar a uma imagem selecionada. A ferramenta converte qualquer JPEG, GIF ou PNG em um arquivo ICO, que é suportado por todos os navegadores da Web, incluindo Chrome, Firefox, Internet Explorer e Safari.

Favicon.io

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

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

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

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

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

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.