Atualizado em
O tamanho ideal para favicon depende de onde o ícone será exibido, mas, a maioria dos sites funciona bem com medidas simples e bem preparadas.
O ponto principal é entender quais tamanhos realmente importam e como evitar que o navegador mostre um ícone borrado, distorcido ou que simplesmente não carregue.
O tamanho mais comum para favicon é 32x32 px, porque funciona bem na aba do navegador e costuma ser suficiente para a maioria dos sites modernos. Ainda assim, o favicon pode aparecer em contextos diferentes, como barra de favoritos, atalhos, histórico do navegador e telas com maior densidade de píxeis.
Por isso, em vez de pensar num único tamanho absoluto, o ideal é preparar um ícone que continue legível em dimensões pequenas. Um favicon precisa ser simples, ter poucos detalhes e bom contraste. Se o ícone só funciona grande, ele provavelmente não vai funcionar bem como favicon.
Embora existam vários tamanhos possíveis, alguns são mais usados e resolvem boa parte dos cenários comuns. Para um site tradicional, vale priorizar os tamanhos abaixo.
O tamanho 16x16 px é o clássico dos favicons. Ele ainda pode aparecer em abas, favoritos e interfaces mais compactas. Por ser muito pequeno, exige um ícone extremamente simples.
Nessa medida, logos com texto, detalhes finos ou muitos elementos tendem a virar um borrão. O ideal é usar uma versão reduzida da marca, como uma letra, um símbolo ou o ícone principal.
O tamanho 32x32 px é uma das opções mais seguras para navegadores atuais. Ele oferece mais definição do que o 16x16 px e costuma ser suficiente para a aba do navegador em telas modernas.
Se eu fosse escolher apenas um tamanho básico para um site simples, começaria pelo 32x32 px. Ele equilibra compatibilidade, nitidez e praticidade.
O tamanho 48x48 px pode ser útil quando o navegador ou sistema precisa exibir o favicon um pouco maior, como em atalhos, listas de favoritos ou interfaces específicas.
Ele não substitui necessariamente o 16x16 px ou o 32x32 px, mas ajuda a manter o ícone mais nítido em alguns ambientes.
Não necessariamente. Criar vários tamanhos pode ser útil em projetos mais completos, principalmente quando o site precisa ter uma presença bem cuidada em diferentes dispositivos, sistemas operacionais e navegadores.
Mas, para muitos sites institucionais, blogs e projetos simples, não precisa complicar demais. O mais importante é ter um favicon bem feito, leve e corretamente declarado no HTML.
Uma configuração mais completa pode incluir:
Essa combinação já cobre bem o básico sem transformar uma tarefa simples em uma novela mexicana de arquivos de ícone.
Se a ideia é simplificar, use um favicon em 32x32 px. Essa é uma escolha prática para a maioria dos sites e costuma funcionar bem nas abas dos navegadores atuais.
Outra opção é usar um arquivo ICO com múltiplos tamanhos dentro do mesmo arquivo, como 16x16, 32x32 e 48x48 px. Isso melhora a compatibilidade sem exigir várias declarações separadas no HTML.
Para um projeto enxuto, eu seguiria uma destas duas opções:
Na prática, o PNG em 32x32 px já resolve muitos casos. O ICO entra quando você quer uma abordagem mais refinada.
O formato também influencia a forma como o favicon será exibido. Não existe uma única resposta perfeita para todos os sites, mas dá para escolher com base no nível de compatibilidade desejado.
| Formato | Quando usar | Ponto de atenção |
|---|---|---|
| PNG | Quando você quer uma solução simples, leve e fácil de gerar. | É necessário criar o arquivo no tamanho desejado. |
| ICO | Quando você quer maior compatibilidade e múltiplos tamanhos em um único arquivo. | Pode ser menos prático de editar diretamente. |
| SVG | Quando o ícone é vetorial, simples e precisa escalar bem. | Nem todo cenário antigo lida com SVG da mesma forma. |
Para a maioria dos sites, PNG ou ICO já são suficientes. O SVG é interessante quando o ícone foi desenhado em vetor e precisa manter nitidez em diferentes resoluções.
Leia também: Favicon SVG ou PNG?
Muitos problemas com favicon não estão no tamanho em si, mas na implementação. Um favicon pode estar correto visualmente e ainda assim não aparecer se o caminho do arquivo estiver errado ou se o navegador estiver consumindo cache antigo.
Para evitar dor de cabeça, confira estes pontos:
Também vale conferir se o ícone continua reconhecível quando reduzido. Às vezes, a versão bonita do logo não é a melhor versão para favicon.
O tamanho ideal para favicon, na maioria dos casos, é 32x32 px. Se quiser uma configuração um pouco mais completa, use também 16x16 px e 48x48 px, ou gere um arquivo ICO com múltiplas medidas.
Mais importante do que criar dezenas de variações é garantir que o ícone seja simples, legível, leve e esteja corretamente configurado no HTML.