Como criar um favicon a partir de qualquer imagem (grátis, no seu navegador)

Aquela pequena imagem ao lado do título de uma página na aba do seu navegador tem um nome: o favicon. Ela também aparece nos favoritos, nas listas de histórico e na tela inicial quando alguém salva o seu site. Um site sem favicon parece inacabado, marcado por um ícone genérico de documento em branco em vez da sua própria marca. A boa notícia é que criar um leva um minuto, e você pode fazer isso inteiramente no seu navegador. Este guia explica o que é um favicon, o que faz um bom favicon e como transformar qualquer imagem em um favicon adequado com o Gerador de Favicon gratuito.

O que um favicon realmente é

Um favicon é o pequeno ícone que um navegador exibe para representar o seu site. Você o vê na aba, na barra de favoritos, no histórico de buscas e na lista de atalhos salvos em um celular. É uma das menores partes de um site e, ainda assim, faz um trabalho de verdade: ajuda as pessoas a identificar a sua aba em uma fileira de vinte e torna um favorito reconhecível na hora.

Tecnicamente, um favicon é apenas uma pequena imagem quadrada que o navegador carrega junto com a página. Os tamanhos são minúsculos, muitas vezes 16 por 16 ou 32 por 32 pixels para a aba, com versões maiores usadas para favoritos e atalhos da tela inicial. Como é exibido tão pequeno, as regras para projetá-lo são diferentes das de projetar um logotipo completo.

O que faz um bom favicon

O maior erro é usar um logotipo detalhado que fica ótimo em um cartão de visita e vira um borrão a 16 pixels. Um favicon precisa ser lido num relance, em um tamanho menor que uma unha. Tenha estes princípios em mente:

• Mantenha-o simples. Uma forma, uma letra ou um símbolo marcante. Linhas finas e texto pequeno desaparecem no tamanho de um favicon.
• Torne-o reconhecível. Ele deve se conectar à sua marca, muitas vezes uma única inicial ou o elemento central do seu logotipo.
• Comece quadrado. Favicons são quadrados, então uma imagem de origem quadrada evita cortes e esticamentos estranhos.
• Use contraste forte. Ele precisa se destacar tanto nos temas claros quanto nos escuros do navegador.

Se a sua marca for um logotipo de texto, extraia apenas a primeira letra ou a parte do ícone. Tentar encaixar um nome inteiro em 16 pixels nunca funciona.

Prepare primeiro a sua imagem de origem

Um favicon limpo começa com uma origem limpa. Se a sua imagem for retangular ou o motivo estiver deslocado para um lado, corte-a primeiro em um quadrado justo com o Cortador de Imagens para que a parte importante fique centralizada. Se o arquivo for enorme, uma passagem rápida pelo Redimensionador de Imagens o reduz a um tamanho razoável antes da conversão. E se a sua imagem estiver em um formato que o gerador não aceita, o Conversor de Formato de Imagem a converterá para um PNG padrão em segundos.

Dedicar um momento à origem compensa. Uma imagem centralizada, quadrada e de alto contraste se torna um favicon nítido, enquanto uma desequilibrada ou borrada continua desequilibrada e borrada faça o que fizer depois.

Como fazer o favicon

Assim que a sua origem estiver com a aparência certa, o Gerador de Favicon faz o resto. Ele funciona inteiramente no seu navegador, então a imagem que você escolher nunca sai do seu dispositivo e nunca é enviada para um servidor.

1. Abra a ferramenta e selecione a imagem quadrada que você preparou.
2. Deixe que ela gere o favicon a partir da sua imagem.
3. Baixe o resultado e adicione-o ao seu site.

Esse é todo o trabalho. Não há conta para criar nem marca-d’água no resultado.

Colocando no seu site

Depois de baixar, coloque o arquivo do favicon na pasta raiz ou de recursos do seu site e faça referência a ele no cabeçalho da página. A maioria dos construtores de sites e frameworks tem um lugar dedicado para um favicon, então talvez você só precise soltar o arquivo e apontar uma configuração para ele. Uma vez no ar, um recarregamento forçado mostra o novo ícone na sua aba. Os navegadores armazenam favicons em cache de forma agressiva, então se você não vir a mudança de imediato, limpe o cache ou abra a página em uma janela privada.

A versão curta

Um favicon é o pequeno ícone quadrado que representa o seu site nas abas e nos favoritos, e todo site se beneficia de ter um. Projete para tamanhos minúsculos: simples, reconhecível, quadrado e de alto contraste. Limpe primeiro a sua origem com um corte ou redimensionamento, depois transforme-a em um ícone finalizado com o Gerador de Favicon gratuito, tudo no seu navegador e tudo privado.