Melhor tamanho de favicon em 2026

As guias do navegador em telas de densidade padrão usam 16×16 pixels. Este é o menor tamanho de favicon e o visto com mais frequência pelos usuários – ele fica sempre na pequena aba acima do conteúdo da página. Um ícone 16×16 que mantém a legibilidade requer formas ousadas, alto contraste e nenhum detalhe fino. Linhas finas, texto pequeno e logotipos complexos tornam-se manchas ilegíveis nesse tamanho.

O tamanho de 32×32 pixels é a dimensão do favicon mais importante para navegadores modernos. Ele é usado para a guia do navegador em telas Retina/HiDPI (renderizadas em densidade 2x a partir de tamanho lógico de 16px), para a barra de favoritos e para os ícones de sugestão da barra de endereço. Chrome solicita 32×32 de forma mais agressiva, e a Pesquisa Google usa pelo menos um ícone 32×32 para seus favicons de resultados de pesquisa.

O tamanho de 48 × 48 pixels serve ao Windows Explorer na visualização de 'ícones médios' e é usado por alguns mecanismos de pesquisa para miniaturas de resultados. A recomendação oficial do Google para elegibilidade de favicon de pesquisa é um mínimo de 48×48 pixels, proporção quadrada e acessibilidade pública via HTTP. Sempre agrupe 48×48 dentro de seu arquivo .ico de vários tamanhos para atender a esse requisito.

O tamanho de 64×64 pixels é útil no Windows Explorer na visualização de ícones grandes e em alguns ambientes de inicialização de aplicativos. Incluí-lo em seu arquivo .ico adiciona tamanho mínimo de arquivo e garante cobertura para qualquer superfície que solicite tamanhos entre 48 e 128 pixels. A maioria dos geradores .ico de vários tamanhos inclui 64 por padrão.

Os tamanhos de 128×128 e 256×256 pixels são usados dentro de arquivos .ico para blocos do menu Iniciar Windows e atalhos de alta resolução. Em 256 × 256, você deve usar a compactação PNG dentro do .ico em vez da codificação BMP - uma entrada BMP descompactada de 256 × 256 adiciona cerca de 256 KB ao arquivo .ico, enquanto a compactação PNG diminui para menos de 30 KB.

O tamanho de 180×180 pixels é a dimensão apple-touch-icon usada por iOS. Quando um usuário toca em 'Adicionar à tela inicial' em Safari, iOS busca `<link rel='apple-touch-icon' tamanhos='180x180' href='/apple-touch-icon.png'>` e usa essa imagem como ícone da tela inicial. Sem isso, iOS retorna a uma captura de tela de baixa qualidade da sua página. Este é o tamanho de maior prioridade para sites que priorizam dispositivos móveis.

O tamanho de 192 × 192 pixels é necessário no manifesto do aplicativo da web (site.webmanifest) para o prompt de instalação Android Chrome do PWA. Quando um usuário adiciona seu site à tela inicial do Android, Chrome lê o manifesto e usa o ícone 192×192 para o inicializador de aplicativos e a aba de notificação. O ícone deve ser quadrado, formato PNG e acessível na URL declarada.

O tamanho de 512 × 512 pixels é o outro ícone de manifesto necessário, usado para a tela inicial PWA que aparece enquanto o aplicativo está carregando após o lançamento da tela inicial e para a visualização da instalação do sistema operacional Chrome. É também o tamanho de imagem de origem recomendado ao gerar todos os outros tamanhos – a partir de 512×512 garante que cada variante com resolução reduzida retenha bordas nítidas.

A configuração mínima viável de favicon que cobre praticamente todos os usuários é: um favicon.ico de vários tamanhos contendo quadros de 16, 32, 48 e 64 pixels, mais um apple-touch-icon.png de 180×180, mais um site.webmanifest com entradas de 192×192 e 512×512 PNG. Essa combinação lida com navegadores padrão, favoritos, instalações na tela inicial do iOS e instalações do Android PWA.

Adicionar um favicon SVG ao lado de .ico e PNG define seu ícone para o futuro. SVG é renderizado em qualquer densidade – um único arquivo atende monitores de 96 dpi, monitores 4K e qualquer coisa entre eles – e pode alternar cores com base na preferência de esquema de cores do usuário. Chrome, Edge, Firefox e Safari 15+ suportam favicons SVG a partir de 2026, tornando-o uma adição segura.

Erros comuns no dimensionamento de favicon incluem: usar apenas 32×32 PNG sem um .ico (quebrado em navegadores legados e atalhos Windows), pular 180 apple-touch-icon (quebrado em instalações iOS) e omitir 512×512 do manifesto (o prompt de instalação Android mostra um ícone genérico). O favicon generator gera o conjunto completo automaticamente a partir de uma imagem de origem, eliminando todas essas lacunas.

O impacto SEO dos tamanhos dos favicons é indireto, mas real. A Pesquisa Google exibe favicons próximos aos resultados da pesquisa e aplica um requisito de tamanho mínimo de 48×48 pixels. Sites sem um favicon de tamanho adequado e acessível ao público podem ver um ícone de globo genérico nos resultados de pesquisa em vez da marca – uma pequena, mas perceptível diferença de sinal de confiança para cliques de pesquisa orgânica.

Para completar os ícones de nível PWA, adicione ícones mascaráveis ​​ao seu manifesto da web. Um ícone mascarável possui preenchimento de zona segura de aproximadamente 10% em todos os lados, garantindo que quando Android aplica uma máscara circular ou de esquilo ao ícone, o logotipo principal nunca seja cortado. Gere uma versão mascarável separada usando a opção de exportação mascarável do gerador e declare-a com `'purpose': 'maskable'` na matriz de ícones do manifesto.

Ao escolher uma imagem de origem para geração de favicon, priorize SVG em vez de PNG e PNG em vez de JPG. SVG produz a saída mais nítida em todos os tamanhos. PNG-32 (com alfa) preserva a transparência. JPG não possui suporte para transparência e apresenta artefatos de compactação que aparecem em tamanhos pequenos. Consulte o guia best favicon format para a comparação completa do formato.