Tamanhos de Favicon: Quais Você Realmente Precisa em 2025

Procure "favicon size" e você encontra uma enxurrada de números conflitantes: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. A maioria dessas listas foi escrita uma década atrás e nunca foi atualizada. Na prática, um site moderno precisa de cerca de quatro arquivos, e você pode criar todos eles em uma única passagem com o gerador de favicon — ele funciona inteiramente no seu navegador, então seu logo nunca sai da sua máquina.

Aqui está para o que cada tamanho é realmente usado, e o que você pode pular com segurança.

Os tamanhos que ainda importam

16x16 e 32x32 — abas do navegador e marcadores

Este é o favicon clássico. 16x16 é o que você vê em uma barra de abas lotada; 32x32 é usado em telas de alta DPI, na barra de marcadores e em algumas UIs da barra de endereços. Ambos são tradicionalmente agrupados em um único arquivo favicon.ico, que pode conter múltiplas resoluções ao mesmo tempo. O Windows também extrai 48x48 do mesmo .ico para atalhos de desktop, então incluir não custa quase nada.

180x180 — ícone de toque Apple

Quando alguém toca em "Adicionar à Tela de Início" em um iPhone ou iPad, o Safari procura por apple-touch-icon.png em 180x180. Se não estiver lá, o iOS tira uma captura de tela da sua página e usa isso, que fica horrível. Este PNG cobre todos os dispositivos iOS atuais porque o sistema redimensiona conforme necessário.

192x192 e 512x512 — Android e PWAs

O Android Chrome e aplicativos web instaláveis leem ícones do seu site.webmanifest. 192 é o ícone da tela inicial; 512 é usado para a tela de abertura e listagens de aplicativos. Se você quiser que seu site seja instalável, precisa de ambos.

SVG — opcional mas bacana

Firefox e Chrome ambos suportam um favicon SVG, que permanece nítido em qualquer tamanho e pode responder ao modo escuro com uma media query dentro do arquivo. É um bônus, não uma substituição — Safari e navegadores mais antigos ainda querem as versões raster.

O que você pode pular

64x64, 96x96, 128x128, todo o conjunto de imagens de bloco do Windows e as dúzias de arquivos legados do tipo apple-touch-icon-76x76. Eram necessários para dispositivos que na maioria desapareceram. Enviar vinte arquivos de ícone incha seu repositório e não traz ganho mensurável.

O HTML

Coloque os arquivos na raiz do seu site e adicione isso ao <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

E no manifesto:

"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
  { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]

Projetando para 16 pixels

A parte difícil não é a exportação, é que um logo completo vira sopa em 16x16. Algumas coisas que ajudam:

• Use um fragmento, não o logo inteiro. Uma letra, um glifo, uma forma. Marcas de palavras são ilegíveis no tamanho de aba.
• Comece quadrado. Se seu original é um logo largo, recorte para um quadrado primeiro para que o gerador não o deixe com espaço vazio nas laterais.
• Mantenha o contraste alto. Contornos finos desaparecem. Formas sólidas sobrevivem.
• Decida sobre o fundo. Um PNG transparente se adapta ao chrome claro e escuro do navegador; se sua marca é escura, considere dar a ela um bloco de cor sólida. Você pode remover o fundo de uma captura de tela de logo em segundos se você só tem um JPG simples.
• Cuidado com a área segura. Android mascara ícones em círculos e squircles, então deixe aproximadamente 10% de preenchimento ao redor da borda de sua arte de 512.

Se você está combinando o fundo do favicon com a cor da marca do seu site, o seletor de cores de imagem extrai o hex exato de uma captura de tela existente — útil também para a tag meta theme-color.

Gere o conjunto completo de uma vez

Não envie nada: solte um PNG ou SVG quadrado no gerador de favicon gratuito baseado em navegador e ele produz o .ico, o ícone de toque Apple e os PNGs 192/512 localmente, na sua própria aba. Nada é enviado para um servidor, não há inscrição necessária, e nenhuma cópia de seu logo não lançado fica guardada no bucket de armazenamento de alguém.

Depois reduza o zoom do seu navegador, olhe para a aba e faça a única pergunta que importa: você consegue dizer o que é?