Os tamanhos de favicon que navegadores e dispositivos realmente querem

Um favicon costumava significar uma única imagem pequena de 16×16. Agora uma aba do navegador, o atalho na tela inicial de um telefone, uma barra de favoritos e um ícone touch da Apple esperam cada um seu próprio tamanho, e fornecer apenas um deixa alguns desses contextos borrados ou mostrando um ícone genérico de reserva em vez do seu.

Por que um único tamanho não é suficiente

Um ícone 16×16 ampliado para preencher um espaço de ícone de tela inicial de 180×180 fica exatamente tão pixelado quanto qualquer imagem pequena esticada para um tamanho grande — não há como adicionar detalhe que não estava na fonte. Cada contexto onde um favicon aparece tem sua própria resolução esperada, e a prática moderna é fornecer um conjunto de tamanhos em vez de confiar num navegador para ampliar mal um único arquivo pequeno.

Os tamanhos que vale a pena cobrir

• 16×16 e 32×32 — os tamanhos clássicos de favicon, usados em abas do navegador e listas de favoritos na maioria dos navegadores desktop.
• 180×180 — o tamanho esperado pela Apple para o ícone de tela inicial quando uma página é adicionada à tela inicial de um iPhone ou iPad.
• 192×192 e 512×512 — usados pelo Android e por manifestos de aplicativos web para ícones de tela inicial e telas de splash em aplicativos web instaláveis.

Mantendo o design legível a 16px

Gerador de favicon pega uma imagem de origem e produz de uma vez o conjunto completo de tamanhos padrão, inteiramente no seu navegador — mas nenhum gerador consegue consertar um design que não funciona em tamanhos pequenos para começar. Detalhes finos, linhas finas e texto pequeno desaparecem completamente a 16×16; uma forma ou letra simples e grossa que continua reconhecível quando reduzida é o que realmente se lê claramente numa aba do navegador, independentemente de quantos tamanhos sejam gerados a partir dela.