O Que É um Favicon?

A Origem do Favicon

O favicon foi originalmente introduzido pela Microsoft em 1995 como parte da primeira versão do Internet Explorer. O então chamado ‘ícone de Favoritos’ era um pequeno arquivo de imagem de 16×16 pixels exibido ao lado do título de um site na lista de favoritos do navegador. Desde sua introdução inicial, o favicon tornou-se um ativo inestimável para reconhecimento e branding de sites.

Onde os Favicons Aparecem

Os favicons são importantes porque fornecem reconhecimento visual e branding para páginas da web. Os favicons aparecem mais comumente na aba do navegador, na barra de endereços do site, nos favoritos e em dispositivos móveis. Eles também podem aparecer nos resultados de pesquisa, ajudando a fazer com que um site se destaque em relação à concorrência.

Como Criar um Favicon

Criando um Favicon com um Gerador Online

Usar um gerador de favicon online é a maneira mais fácil de criar um favicon. Tudo o que precisas fazer é carregar a tua imagem, e ele irá gerar os arquivos corretos para ti. Este é provavelmente o método mais rápido de criar um favicon.

Criando um Favicon com Código HTML & CSS

Se você se sente confortável codificando em HTML e CSS, então esta pode ser uma opção para você. Você pode criar um favicon usando código como <link rel=”shortcut icon” type=”image/x-icon” href=”myfavicon.ico”> e adicionando os tamanhos corretos de imagens PNG aos arquivos de sua página web.

Criando um Favicon do Zero

A maneira mais difícil de criar um favicon, mas também a mais gratificante, é criá-lo do zero. Os programas mais populares usados para design são Photoshop ou Illustrator. Ao criar um do zero, certifique-se de que ele ficará bom em diferentes tamanhos e resoluções para que seja exibido corretamente em todos os dispositivos.

Formatos de Arquivo Favicon

Ao criar um favicon, o primeiro passo é decidir sobre o formato do arquivo. Os formatos de arquivo mais comuns e amplamente utilizados são .png, .gif e .ico. Cada um desses formatos possui seus próprios benefícios e desvantagens únicos.

Favicons em PNG

Arquivos PNG são excelentes para criar favicons que possuem imagens de alta qualidade com fundo transparente. Eles também suportam profundidade de cor de 8 bits, o que pode ajudar a criar efeitos interessantes no design do seu ícone. No entanto, arquivos PNG tendem a ser maiores que outros formatos e podem demorar mais para carregar em páginas da web.

Favicons em GIF

Arquivos GIF são uma ótima escolha se você está procurando por uma imagem facilmente comprimida que ainda seja bem visível em tamanhos pequenos. Os GIFs também têm a vantagem de poderem ser animados, permitindo que você crie favicons dinâmicos que capturarão a atenção dos visitantes quando eles visitarem seu site.

Favicons ICO

O formato ICO é usado principalmente para aplicações Windows, mas também pode ser usado para criar favicons de páginas web. Eles geralmente oferecem melhor compressão do que os arquivos PNG ou GIF e são melhores quando você deseja produzir múltiplos tamanhos de uma imagem a partir de uma única fonte (comumente conhecido como “escalamento”).

Tamanhos de Favicon

O tamanho do seu favicon variará dependendo do dispositivo e da densidade de exibição. Para smartphones, você deve criar uma imagem quadrada que tenha pelo menos 144 x 144 pixels; para tablets, 192 x 192 pixels é um bom tamanho.

Você também deve considerar monitores de alta resolução, como os displays Retina, onde uma imagem maior (pelo menos 512 x 512) pode ser necessária. Para computadores com monitores de mesa, uma imagem de 16×16 ou 32×32 pixels geralmente é suficiente.