Tamanhos de favicon explicados

O favicon de 16×16 pixels é o padrão original da web. Ele é usado nas guias do navegador em telas padrão (96 dpi), na barra de ferramentas de favoritos em todos os navegadores de desktop e em algumas listas de histórico do navegador. Como 16×16 é uma tela extremamente compacta, o design do seu favicon deve ser reduzido à sua forma mais simples: uma única forma, letra ou marca abstrata. Qualquer coisa mais complexa ficará ilegível.

O tamanho de 32×32 pixels dobra o 16×16 e oferece guias de navegador retina/HiDPI com densidade de 2x, ícones de favoritos em alto DPI e ícones de sugestão de barra de endereço em Chrome. Os navegadores modernos solicitam 32×32 com muito mais frequência do que 16×16, já que monitores de alta densidade se tornaram a maioria dos dispositivos. Se você pudesse enviar apenas um tamanho, 32×32 seria a escolha mais impactante.

O tamanho de 48 × 48 pixels é o tamanho de visualização dos 'ícones médios' do Windows Explorer e é o mínimo exigido pela Pesquisa Google para elegibilidade de favicon em snippets de resultados de pesquisa. Sites cujo favicon não atende ao mínimo de 48×48 aparecem com um ícone de globo genérico próximo ao URL nos resultados do Google, em vez da marca. Sempre inclua 48×48 em seu pacote .ico.

O tamanho de 64×64 pixels é usado na visualização de ícones grandes do Windows Explorer e em alguns ambientes de desktop Linux. Incluí-lo em seu arquivo .ico de vários tamanhos adiciona uma sobrecarga insignificante, mas garante uma renderização limpa em gerenciadores de arquivos e ambientes shell. Muitas ferramentas geradoras de favicon incluem 64 por padrão como parte do pacote .ico padrão.

O tamanho de 128 × 128 pixels serve blocos de aplicativos da Windows Store e miniaturas de alta densidade da barra de tarefas. É menos comumente necessário para favicons puros da web, mas é importante se o seu site for empacotado como PWA ou se os usuários o fixarem como um aplicativo Windows. Agrupá-lo dentro de .ico com compactação PNG mantém o tamanho do arquivo razoável.

O tamanho de 256×256 pixels é o maior quadro .ico padrão. Ele é usado para atalhos da área de trabalho Windows, resultados de pesquisa do menu Iniciar Windows e alguns contextos de aplicativos instalados. Nesta resolução, você deve usar a compactação PNG dentro do contêiner .ico em vez de BMP — uma imagem BMP 256×256 descompactada adiciona 256 KB ao arquivo .ico desnecessariamente.

O tamanho de 180×180 pixels é exclusivo para iOS apple-touch-icon. Quando um usuário de iPhone ou iPad toca em 'Adicionar à tela inicial', Safari busca a imagem declarada em `<link rel='apple-touch-icon' tamanhos='180x180' href='/apple-touch-icon.png'>`. Este tamanho cobre todos os modelos atuais de iPhone (iPhone 6 Plus e posteriores usam 180×180 com densidade 3x; modelos mais antigos usam 120×120 e 152×152 – um único arquivo 180 cobre todos eles normalmente).

O tamanho de 192×192 pixels é o ícone mínimo exigido em um manifesto de aplicativo da web (site.webmanifest) para o prompt de instalação Android Chrome do PWA. Quando os usuários adicionam um PWA à tela inicial do Android, o Chrome renderiza o ícone 192×192 no inicializador e o ícone do aplicativo no alternador de aplicativos recentes. Sem esse tamanho no manifesto, o prompt de instalação do PWA mostra um ícone genérico ou não é acionado.

O tamanho de 512×512 pixels é o segundo ícone de manifesto necessário. Chrome o usa para a tela inicial do PWA que é exibida enquanto o aplicativo está sendo carregado após a inicialização da tela inicial e para a visualização da caixa de diálogo de instalação no sistema operacional Chrome da área de trabalho. É também o tamanho de fonte ideal para gerar todas as variantes menores – a partir de 512×512 garante que cada saída com resolução reduzida retenha bordas nítidas e cores precisas.

Tamanhos entre 512×512 e o muito grande 1024×1024 são usados ​​principalmente para ícones de aplicativos nativos em envios para macOS e iOS App Store, não para favicons da web. No entanto, se você planeja converter sua presença na web em um aplicativo nativo usando um wrapper (Electron, Capacitor, Tauri), você precisará de 1024×1024 para o processo de revisão da App Store. Armazene este arquivo mestre junto com seu pacote favicon.

Os favicons SVG são independentes de resolução e cobrem todas as densidades com um único arquivo. Um navegador que suporta favicons SVG (Chrome 80+, Edge 80+, Firefox 41+, Safari 15+) preferirá o SVG a qualquer tamanho raster porque ele renderiza perfeitamente em 1x, 2x, 3x ou qualquer DPI personalizado. A desvantagem é que nem todos os contextos suportam SVG — atalhos Windows, leitores RSS e ferramentas mais antigas ainda precisam do substituto .ico.

É importante entender a relação entre os tamanhos e o contêiner .ico. Um arquivo .ico não é uma imagem única – é um arquivo com várias imagens. Cada quadro dentro dele é uma imagem raster separada em um tamanho diferente. O navegador lê o diretório ICO, identifica qual quadro corresponde melhor ao tamanho necessário e decodifica apenas esse quadro. É por isso que um arquivo .ico pode servir guias de 16, 32, 48 e 64 px igualmente bem.

O conjunto mínimo recomendado para um site de produção em 2026 é: favicon.ico agrupando quadros de 16, 32, 48 e 64 px; apple-touch-icon.png em 180×180; android-chrome-192x192.png; android-chrome-512x512.png; favicon.svg para navegadores modernos; e um site.webmanifest referenciando os 192 e 512 PNGs. O favicon generator produz este conjunto completo a partir de um único upload de fonte com um clique.

Verificar se todos os tamanhos de seus favicons estão exibidos corretamente é simples com o favicon tester. Insira o URL do seu site e o testador tentará buscar seu favicon.ico, verificará as tags de link no cabeçalho HTML e mostrará uma visualização de cada tamanho. Os tamanhos ausentes são sinalizados com recomendações acionáveis.