Você já prestou atenção àqueles pequenos ícones no topo das abas do navegador? Que tal quando você salva um atalho para um site ou página online? Essas imagens minúsculas, ou favicons, são desenhadas especialmente para esse fim.

Existe uma diferença bastante distinta entre o que faz um ícone minúsculo bom ou ruim. Você seria perdoado por pensar que as decisões de design na escala minúscula importam menos. Mas um favicon mal desenhado pode refletir mal na sua marca.

Hoje estamos olhando para o que são esses ícones, técnicas básicas de design para eles, e as especificações que você precisa seguir.

O que é um Favicon?

Simplesmente, um favicon é um ícone pequeno e transparente usado para representar um website, marca, ou negócio. Os favicons ajudam a melhorar a experiência do usuário fornecendo um marcador consistente que diz aos visitantes do site que eles estão no mesmo site que navegam graças a um visual consistente.

O termo favicon vem de “ícone favorito”. Esta terminologia data para os dias do Internet Explorer quando as páginas marcadas nos favoritos eram chamadas de “Favoritos”. O favicon foi adotado pela primeira vez pelo World Wide Web Consortium (W3C) para HTML 4.0, cerca de 2000, e começou a aparecer mais consistentemente nas janelas do navegador no ano seguinte.

Utilizar favicons para alternar rapidamente entre as abas do navegador, identificar um bookmark, ou encontrar um aplicativo ou atalho salvo no seu telefone. O identificador visual é o que a maioria das pessoas usa para associar esses links e páginas com o botão direito para acessá-los.

Tradicionalmente, os favicons usavam um formato de arquivo .ico, mas isso agora é menos problemático. Qualquer tipo de arquivo transparente funcionará na maioria dos casos; .png é frequentemente o formato escolhido.

Technical Considerations

Em tempos, todos os favicons eram quadrados super pequenos de 16 pixels. Esse já não é o caso com mais telas de retina de alta definição e ícones de atalho a considerar.

HTML 5 inclui padrões para favicons com vários tamanhos para todos os tipos de usos, desde ícones minúsculos de navegadores a ícones de estações de ancoragem de computadores até ícones de tela inicial. Você não precisa mais desse quadrado de 16 pixel.

Modernos tamanhos de favicon e uso:

• 32×32: Padrão para a maioria dos navegadores desktop (substitui 16×16)
• 128×128: Loja cromada e pequeno ícone de tela estrela do Windows 8
• 152×152: Ícone de toque do iPad
• 167×167: Ícone de toque do iPad Retina
• 180×180: Ícone do iPhone Retina
• 192×192: Recomendação de aplicação web do Google Developer
• 196×196: Ícone do ecrã inicial do Android

Best Practices

Embora pareça um ícone que é tão insignificante em termos do design geral, isso está longe de ser verdade.

Um favicon diz muito sobre a sua marca e website. Os usuários passaram a esperá-los se não conseguirem identificá-los pelo nome. Estes pequenos elementos contribuem para a experiência geral do usuário e da marca.

Como você pode tirar o máximo proveito de um favicon?

Contemple estas melhores práticas em mente:

• Um favicon deve se conectar com a identidade da sua marca, mas muitas vezes é muito pequeno para incluir um logotipo inteiro. Use um elemento identificável como a primeira letra do nome da sua marca ou uma pequena marca que você usa em conjunto com a marca.
• Pense na forma. O espaço para um favicon, por padrão, é quadrado. Se você quiser mais alguma coisa, um fundo transparente é necessário. Alguns sistemas também podem arredondar as bordas, fazendo com que outra consideração a ter em mente.
• Certifique-se de que o arquivo é pequeno, mas não muito pequeno. Carregue um tamanho de favicon que renderizará corretamente na maioria dos dispositivos, mas não vai atolar o site em geral.
• Evite palavras ou elementos complexos no design do favicon.
• Fique em uma paleta de cores simples e simplificada para o favicon. É muito pequeno para ficar louco com cores. É por isso que a maioria destes pequenos ícones usa pouco mais que um fundo e cor de primeiro plano com muito contraste entre os dois.

Técnicas de desenho

Desde que um favicon é pequeno, você pode estar inclinado a desenhá-lo por um capricho no Photoshop. Essa não é a rota recomendada para longevidade.

Build seu favicon em uma ferramenta vetorial como Illustrator ou Sketch, então exporte o design para os tamanhos necessários. Isto irá garantir que, à medida que as resoluções da tela mudam, você terá um favicon que resiste ao teste do tempo. (Tudo que você terá que fazer é reexportar em um novo tamanho.)

A regra principal do design visual para favicons é manter o design simples. Não exagere com cor, texto ou elementos de marca. Olhando os exemplos neste post, você verá que quase todos esses pequenos elementos são legíveis em 16 por 16 pixels.

Anular truques como animação; eles só atrapalham aqui.

Considerar isso um desafio de design. Pode ser muito difícil criar algo tão pequeno que seja fácil de ler.

Guardar o ficheiro como uma png transparente. É um bom hábito que garante que você não vai acabar com bordas ou bordas estranhas no favicon. (Nada parece pior do que uma borda branca recortada ao redor do ícone.)

Utilize os princípios de um bom design. Você nunca sabe quando o favicon pode ser usado para algo com um tamanho maior e mais visível. Salvar um bookmark de um site, por exemplo, pode usar uma versão grande de um favicon. O mesmo é verdade para o docking e mesmo em visualizações de resultados de motores de busca.

Even embora seja pequeno, este ícone representa a sua marca. Desenhe-o bem.

Após ter o arquivo pronto, você pode adicioná-lo ao seu site com apenas algumas linhas de código. (Muitos temas do WordPress e construtores de websites já têm um elemento de favicon incluído, portanto você nem precisa pensar neste passo.)

Após carregar o arquivo de imagem, insira o seguinte código no cabeçalho do seu website, observando que “iconpath” e “iconname” referem-se ao elemento específico do seu arquivo:

Exemplos

Os exemplos abaixo incluem alguns elementos de marca com favicons associados. (Certifique-se de clicar e mostrar aos designers algum amor em suas páginas de Dribbble.)

Prodigi.Logotipo Responsive Logotype

Sistema de Logotipo Proposto Butterscotch

Logo Favicon Display

Tec Logotipo de favo

TEC Logotipo Opção 2

Conclusão

Que favos faltam em tamanho, eles fazem as pazes na experiência do utilizador. Estes ícones servem como ferramentas de navegação para os visitantes do seu site e aqueles que tendem a deixar muitas abas do navegador abertas.

Como regra geral, um favicon é um identificador visual rápido que liga o usuário à sua presença digital. Tome cuidado com ele para garantir que é a melhor e mais precisa representação da sua marca.