The team behind OnlineTools4Free — building free, private browser tools.
Published Jan 10, 2026 · 7 min read · Reviewed by OnlineTools4Free
Guia de Tamanhos de Favicon: Todos os Tamanhos Necessarios
O que e um favicon e por que ele importa
O favicon (favorite icon) e o pequeno icone que aparece na aba do navegador, nos favoritos, no historico e em diversas outras superficies. Apesar do tamanho minusculo, ele tem um impacto significativo no reconhecimento da marca e na usabilidade.
Um favicon bem feito permite que o usuario identifique seu site instantaneamente entre dezenas de abas abertas. A ausencia de favicon — aquele icone generico de globo ou pagina em branco — passa uma impressao de site amador ou incompleto.
Em 2024, o favicon vai muito alem da aba do navegador. Ele aparece em resultados do Google (mobile), atalhos de aplicativos web (PWA), tela inicial de celulares, favoritos do Safari, tiles do Windows e muito mais. Cada contexto exige um tamanho e formato especifico.
Os tamanhos essenciais que seu site precisa
Voce nao precisa gerar dezenas de tamanhos. Aqui estao os que realmente importam:
- favicon.ico (32x32): O formato classico, ainda necessario para compatibilidade com navegadores antigos. Um arquivo ICO pode conter multiplos tamanhos (16x16, 32x32, 48x48) em um unico arquivo.
- favicon-32x32.png: Usado pela maioria dos navegadores modernos para a aba.
- favicon-16x16.png: Usado em contextos muito pequenos (favoritos em alguns navegadores).
- apple-touch-icon.png (180x180): Obrigatorio para quando o usuario adiciona seu site a tela inicial do iPhone/iPad. Sem ele, o Safari usa uma captura de tela miniaturizada da pagina.
- icon-192x192.png: Usado pelo Chrome no Android quando o usuario adiciona a tela inicial e no manifesto de web app.
- icon-512x512.png: Usado em splash screens de PWA e quando o sistema precisa de um icone em alta resolucao.
- favicon.svg: O formato moderno. Um unico SVG escala para qualquer tamanho sem perder qualidade e suporta tema escuro via media query CSS.
Como gerar todos os tamanhos automaticamente
Criar cada tamanho manualmente e tedioso e propenso a erros. Nosso Gerador de Favicon automatiza o processo:
- Abra o Gerador de Favicon.
- Carregue sua imagem ou logo (use uma imagem quadrada de pelo menos 512x512 px).
- A ferramenta gera automaticamente todos os tamanhos necessarios.
- Baixe o pacote com todos os arquivos e o codigo HTML para inserir no seu site.
O codigo HTML gerado inclui todas as tags <link> necessarias — basta colar no <head> da sua pagina.
Como implementar no HTML
As tags HTML para favicon devem ficar no <head> de todas as paginas do site:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Para PWAs, adicione os icones no arquivo manifest.json (ou site.webmanifest):
{"icons": [{"src": "/icon-192.png", "sizes": "192x192", "type": "image/png"}, {"src": "/icon-512.png", "sizes": "512x512", "type": "image/png"}]}
Dicas de design para favicons eficazes
Um favicon e exibido em tamanhos muito pequenos — 16x16 ou 32x32 pixels. Isso impoe restricoes de design:
- Simplifique. Seu logo completo provavelmente nao funciona como favicon. Use apenas o simbolo, a inicial ou um elemento grafico simplificado.
- Use cores solidas. Gradientes e detalhes finos desaparecem em 16x16 px. Cores contrastantes e formas simples funcionam melhor.
- Teste em fundo claro e escuro. O favicon aparece em abas claras e escuras (modo noturno). Se seu icone e branco, sera invisivel em fundo branco. Adicione uma borda ou fundo colorido.
- Evite texto. Em 16x16 px, texto e ilegivel. Ate iniciais sao dificeis — funciona apenas se a letra for grande e simples.
- Comece pelo 512x512. Desenhe no tamanho grande e depois verifique como fica reduzido. E mais facil simplificar do que tentar adicionar detalhes em tamanhos minusculos.
Favicon SVG: a abordagem moderna
O SVG e o formato mais flexivel para favicons modernos. Vantagens:
- Escala perfeita. Um unico arquivo funciona em qualquer tamanho sem pixelizacao.
- Suporte a modo escuro. Com
@media (prefers-color-scheme: dark)dentro do SVG, voce pode mudar as cores automaticamente quando o usuario usa tema escuro. - Tamanho de arquivo minimo. Um SVG simples pode ter menos de 1 KB.
A limitacao: Safari e alguns contextos (tela inicial, resultados do Google) ainda exigem PNG. Por isso, a melhor estrategia e usar SVG como icone principal e fornecer PNG como fallback.
Gere todos os tamanhos e formatos necessarios com nosso Gerador de Favicon — leva menos de um minuto.
Favicon Generator
Generate favicons in all required sizes from a single image.
OnlineTools4Free Team
The OnlineTools4Free Team
We are a small team of developers and designers building free, privacy-first browser tools. Every tool on this platform runs entirely in your browser — your files never leave your device.