Guia de favicon e ICO: tamanhos, formatos e HTML que funcionam

Onde um favicon realmente aparece

O lugar óbvio é a aba do navegador, que normalmente tem 16 pixels quadrados e vira 32 pixels do dispositivo em uma tela de alta densidade. O mesmo ícone aparece em favoritos, histórico, grupos de abas e na lista de sugestões da barra de endereços. O Windows o desenha em atalhos e pré-visualizações da barra de tarefas, os celulares o usam na tela inicial, e os buscadores às vezes o mostram ao lado de um resultado.

Como cada superfície pede um tamanho diferente, uma única imagem enorme reduzida pelo navegador não basta. Um ícone de 256 pixels comprimido para 16 perde o detalhe que o tornava reconhecível, então o arquivo precisa de quadros pequenos feitos sob medida em vez de um único original redimensionado na hora.

As abas fixadas do Safari são a exceção: elas tingem o ícone com uma cor só, então um logotipo multicolorido detalhado pode virar um borrão cinza. Se as abas fixadas importarem, adicione um favicon SVG que desenhe com currentColor para a forma ser mascarada com limpeza, e mantenha o ICO para todo o resto.

Como o contêiner ICO funciona

Um arquivo ICO é um pequeno diretório seguido de uma ou mais imagens. Cada entrada registra as dimensões do quadro, a profundidade de cor e o deslocamento, e um consumidor como um navegador ou o Explorador de Arquivos do Windows escolhe o quadro mais próximo do tamanho de que precisa. Arquivos ICO modernos guardam quadros comprimidos como PNG, e é por isso que um ícone de seis tamanhos continua razoavelmente pequeno.

Vale conhecer as limitações do formato. Ele chega no máximo a 256 pixels por quadro, está preso a convenções antigas do Windows, e o macOS e as ferramentas de design o tratam como cidadão de segunda classe. O ICO continua valioso porque é um único arquivo que cobre abas, favoritos e atalhos sem nenhum HTML, e os navegadores pedem /favicon.ico automaticamente mesmo quando não existe tag link.

PNG, SVG e as tags link

Ícones PNG são declarados explicitamente no head da página, por exemplo um elemento link com rel icon, type image/png e sizes 32x32. Você pode listar vários tamanhos e os navegadores escolhem um. O PNG suporta transparência e é fácil de gerar, mas não carrega contêiner multiuso, então você precisa de um arquivo separado para cada tamanho que importa.

Favicons SVG escalam perfeitamente e podem até responder ao modo escuro, mas o suporte é irregular entre navegadores e versões mais antigas ficam sem nada se não houver um ícone raster. A receita durável é um fallback ICO na raiz do site, ícones PNG de 32 e 192 pixels, e um apple-touch-icon de 180 pixels para as telas iniciais do iOS.

Projetar algo que funcione em 16 pixels

Em 16 pixels um ícone tem 16 quadradinhos de largura. Traços finos, texto pequeno, gradientes sutis e ilustrações detalhadas desaparecem ou viram ruído. Um favicon forte costuma ser uma única forma marcante com alto contraste, margens generosas e sem texto; um monograma pode funcionar se a letra for muito simples.

Teste o ícone em tamanho real em uma barra de abas clara e em uma escura antes de publicar. Ícones com fundo transparente herdam o tema do navegador atrás deles, então um logotipo escuro pode sumir no modo escuro e um branco pode sumir no modo claro. Um contorno sutil ou um fundo preenchido resolve os dois casos.

Alguns designers geram uma marca simplificada dedicada aos menores tamanhos em vez de encolher o logotipo completo. O conjunto de favicons pode então usar uma forma mais marcante e sem texto em 16 e 32, e o logotipo detalhado em 256 e acima. Dá mais trabalho que um arquivo só para todos os tamanhos, mas é o motivo de as grandes marcas continuarem reconhecíveis em uma barra de abas cheia.

Ícones maskable para aplicativos web instaláveis

O Android não apenas encolhe um favicon: ele mascara o ícone em uma forma como um círculo ou um squircle, o que pode cortar as bordas da sua arte. Os ícones maskable resolvem isso esperando um fundo sangrado com o conteúdo importante dentro de uma zona segura central. A especificação define essa zona segura como um círculo com diâmetro de cerca de 80 por cento da largura do ícone.

Declare ícones maskable no manifesto do aplicativo web com purpose maskable em 192 e 512 pixels. Mantenha um ícone separado com purpose any para superfícies que não mascaram, e deixe a versão maskable opaca: transparência nos cantos parece quebrada quando o Android recorta a forma.

Colocando os arquivos no seu site

Envie favicon.ico para a raiz do site para que a solicitação padrão seja resolvida, adicione os links PNG e apple-touch-icon no head e referencie os ícones do manifesto. Favicons são armazenados em cache de forma agressiva, então se um ícone novo não aparecer, tente primeiro uma atualização forçada e depois limpe o cache do navegador; renomear o arquivo ou adicionar uma consulta de versão força uma nova busca.

• favicon.ico com quadros de 16, 32, 48 e 256 pixels na raiz do site.
• Ícones PNG de 32 x 32 e 192 x 192 vinculados a partir do head da página.
• apple-touch-icon de 180 x 180 para as telas iniciais do iOS.
• Entradas no manifesto para ícones de 192 e 512 pixels, mais variantes maskable.
• Fundo opaco para ícones maskable; transparência pode ficar para abas.