O favicon é o pequeno ícone que aparece em uma aba do navegador, em uma lista de favoritos e nas sugestões da barra de endereços quando alguém visita um site. Fazê-lo corretamente envolve mais do que apenas tornar uma imagem pequena. Um favicon que parece nítido requer as dimensões de pixel corretas, um design limpo e centralizado e o formato correto para o contexto em que está sendo usado. O tamanho padrão do favicon é 16x16 pixels para a exibição básica na aba do navegador, com 32x32 usado para telas de alta densidade e 48x48 incluído em pacotes completos de favicon. Um favicon mal preparado parece embaçado ou indistinto na aba, o que é um pequeno detalhe que reflete a qualidade geral de um site.
Como redimensionar uma imagem para Favicon
Para o favicon base, insira 16 tanto no campo de largura quanto no de altura e desative a caixa de seleção Manter proporção para uma saída quadrada forçada. Para uma versão de maior resolução, repita o processo com 32 em ambos os campos. Para um pacote completo de favicon, processe a mesma imagem em 16x16, 32x32 e 48x48 separadamente.
A qualidade da imagem fonte é mais importante em tamanhos de favicon do que em quase qualquer outra dimensão. Um logotipo complexo ou ilustração detalhada perde toda a forma reconhecível em 16x16. Um ícone simples e ousado com bordas limpas e detalhes mínimos se mantém muito melhor. Comece com a maior versão disponível do ícone e reduza a escala para obter o resultado mais nítido em cada tamanho. Carregue vários tamanhos de uma vez e baixe como ZIP quando terminar.
Tamanhos padrão de Favicon
16x16 pixels: o tamanho base exibido nas abas do navegador em telas de resolução padrão. 32x32 pixels: usado por telas de alta densidade e atalhos de desktop do Windows. 48x48 pixels: incluído em pacotes completos de favicon para maior compatibilidade. 180x180 pixels: o tamanho do Apple Touch Icon usado quando um site é salvo na tela inicial do iOS. 192x192 pixels: usado por dispositivos Android para ícones de aplicativos web na tela inicial. Um pacote completo de favicon normalmente inclui todos esses tamanhos gerados a partir do mesmo ícone fonte.
Formato de saída para Favicons
PNG é o formato mais amplamente suportado para implementações modernas de favicon. A maioria dos navegadores aceita arquivos favicon PNG diretamente através da tag link no cabeçalho HTML. Fundos transparentes são suportados em PNG e permitem que o favicon se posicione de forma limpa sobre a cor da aba do navegador. O formato ICO tradicional agrupa vários tamanhos em um único arquivo e ainda é usado para o arquivo favicon.ico raiz que os navegadores procuram por padrão. PNG no tamanho correto é a abordagem mais direta para a maioria dos projetos web modernos.