Resposta rápidapara saber como gerar favicon hoje, parta de uma imagem quadrada simples (de preferência SVG ou PNG com 512 px ou mais) e exporte um conjunto de PNGs: 16, 32 e 48 px para abas e buscadores, 180 px para o apple-touch-icon e 192 e 512 px para o manifest. Depois declare cada arquivo no
<head>do HTML e mantenha um favicon.ico na raiz como reserva.
O site está pronto, o cliente aprovou o layout e, na véspera da entrega, alguém repara: a aba do navegador mostra o ícone genérico. Pior, no iPhone, o atalho da tela inicial aparece como um print borrado da página.
Favicon parece detalhe, mas é a assinatura da marca em abas, favoritos, histórico, resultados de busca e telas iniciais. E deixou de ser um arquivo só. Saber como gerar favicon do jeito atual é saber quais tamanhos importam e onde cada um entra.
O que é favicon e onde ele aparece
O favicon é o ícone que identifica o site fora da página. Ele aparece em mais lugares do que parece:
- Aba do navegador, ao lado do título da página.
- Favoritos e histórico, onde ajuda a achar o site numa lista longa.
- Resultados de busca no celular, ao lado do nome do site.
- Tela inicial do celular, quando alguém salva o site como atalho.
- Aplicativo web instalado (PWA), como ícone do app e na tela de abertura.
Cada um desses lugares usa um tamanho diferente. É por isso que um único favicon.ico de 16 px, como se fazia há quinze anos, já não dá conta.
Tamanhos de favicon que importam hoje
Não há uma lista oficial única, mas o conjunto abaixo cobre os usos mais comuns em navegadores, buscadores e celulares:
| Tamanho | Arquivo sugerido | Onde é usado |
|---|---|---|
| 16 × 16 px | favicon-16x16.png | Aba do navegador em telas comuns |
| 32 × 32 px | favicon-32x32.png | Aba em telas de alta densidade, barra de tarefas |
| 48 × 48 px | favicon-48x48.png | Resultados de busca, atalhos no Windows |
| 180 × 180 px | apple-touch-icon.png | Tela inicial do iPhone e iPad |
| 192 × 192 px | icon-192.png | Manifest, tela inicial no Android |
| 512 × 512 px | icon-512.png | Manifest, tela de abertura de PWA |
A regra do Google para resultados de busca
Segundo a documentação do Google Search Central sobre favicons, o ícone exibido nos resultados deve ser quadrado e ter lado múltiplo de 48 px (48, 96, 144…). Ele também precisa estar acessível para o rastreador. Um PNG de 48 × 48 px atende ao mínimo; versões maiores, como 96 ou 192 px, dão margem para telas de alta densidade.
E o favicon.ico?
O formato ICO guarda vários tamanhos num arquivo só e ainda é pedido automaticamente em /favicon.ico por alguns navegadores, leitores de feed e ferramentas. Os navegadores atuais leem PNG sem problema pela tag <link rel="icon">. Na prática, vale ter os PNGs declarados no HTML e um favicon.ico na raiz como reserva.
Pasta Mágica
Gere o conjunto de favicons de uma vez
Envie uma imagem quadrada e receba os PNGs de 16 a 512 px, com fundo transparente ou de cor sólida. Sem abrir editor.
Como gerar favicon passo a passo
O processo começa no desenho, não na exportação. Um ícone bonito em 512 px pode virar uma mancha em 16 px.
- Simplifique o símbolo. Use a inicial, o símbolo da marca ou um recorte do logo. Texto completo não se lê em 16 px.
- Trabalhe num quadrado. Se o símbolo é retangular, centralize-o num quadrado com respiro nas bordas.
- Exporte a matriz em alta. SVG é o ideal; PNG com 512 px ou mais também serve.
- Gere os tamanhos da tabela a partir dessa matriz única.
- Teste em 16 px. Abra o arquivo menor em tamanho real e veja se ainda é reconhecível.
- Defina o fundo: transparente para abas; sólido para o apple-touch-icon.
- Suba os arquivos para a raiz do site ou para uma pasta de ícones.
- Declare tudo no HTML e confira em navegador anônimo, para não ver ícone em cache.
O que vai no HTML
Dentro do <head>, as declarações mais comuns ficam assim:
“html <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> “
O atributo rel e seus valores estão documentados na MDN. Já os ícones de 192 e 512 px vão dentro do arquivo de manifest, no campo icons, como explica o guia de manifest de aplicativos web do web.dev.
E o favicon em SVG?
Alguns navegadores aceitam um favicon em SVG, declarado com type="image/svg+xml". A vantagem é um arquivo só, nítido em qualquer densidade de tela, que ainda pode trocar de cor no tema escuro com uma regra CSS dentro do próprio SVG. O suporte, porém, varia entre navegadores e versões; consulte o caniuse antes de depender só dele. Na dúvida, use o SVG como camada extra e mantenha os PNGs como base.
Desenho que funciona em 16 px
Antes de exportar, olhe para o símbolo com olhos de 16 px. Três ajustes costumam resolver:
- Engrosse traços finos. Linhas de 1 px no desenho original desaparecem na redução.
- Aumente o contraste. Dois tons próximos viram um borrão só.
- Corte o que não é essencial. Sombra, gradiente e textura raramente sobrevivem.
Erros comuns que fazem o favicon não aparecer
- Caminho errado no
href, geralmente por falta da barra inicial. - Cache do navegador mostrando o ícone antigo por dias.
- Ícone escuro com fundo transparente, invisível em tema escuro.
- Plugin ou tema do CMS sobrescrevendo as tags que você colocou.
- Arquivo enorme (várias centenas de KB) para um ícone de 32 px.
Favicon em agência: um processo para cada cliente
Para quem entrega sites em série, o favicon é uma tarefa que se repete a cada projeto. No jeito manual, o designer abre o editor, cria seis pranchetas, exporta uma por uma e renomeia os arquivos. Em geral, isso leva de 20 a 40 minutos por cliente, e é comum esquecer o tamanho de 180 px até alguém reclamar do atalho no iPhone.
Com um gerador em lote, a entrada é uma imagem e a saída é o conjunto inteiro, sempre com os mesmos tamanhos e nomes previsíveis. Se a agência atende dez clientes no mês, são dez arquivos de entrada e um único processamento.
Vale incluir o favicon no checklist de entrega do site, junto com as imagens otimizadas. O guia de como otimizar imagens para site cobre a outra metade dessa entrega. E, se o cliente pedir as imagens em várias larguras, veja imagens responsivas com srcset.
Perguntas frequentes
Não existe um tamanho único. Um conjunto prático tem 16, 32 e 48 px para abas e buscadores, 180 px para o ícone da tela inicial do iPhone (apple-touch-icon) e 192 e 512 px para o manifest de aplicativos web. Todos quadrados.
Não necessariamente. Os navegadores atuais aceitam PNG na tag link rel=icon. O .ico ainda é útil como reserva na raiz do site, porque alguns programas e leitores de feed pedem /favicon.ico direto, sem ler o HTML.
O Google segue regras próprias: o ícone deve ser quadrado, com lado múltiplo de 48 px, e estar acessível para o rastreador. Mesmo com tudo certo, a atualização nos resultados pode levar dias ou semanas, porque depende de novo rastreamento.
Pode, mas raramente funciona. Em 16 ou 32 px, textos e detalhes finos somem. Use o símbolo da marca, uma inicial ou um recorte simplificado, com contraste forte e pouca informação.
Transparente funciona bem nas abas do navegador, mas pode sumir em temas escuros se o ícone for escuro. Para o apple-touch-icon, prefira fundo sólido: o iOS preenche a transparência com uma cor própria, e o resultado nem sempre agrada.
Como automatizar isso com a Pasta Mágica
Na Pasta Mágica, o favicon é gerado por uma biblioteca de imagem tradicional (sharp/libvips), redimensionando a matriz para cada tamanho — sem IA redesenhando o seu ícone.
- Crie sua conta em pastamagica.com.br/cadastrar e faça um teste com o símbolo de um cliente real.
- Escolha Gerar favicons no app. A etapa aceita JPG, PNG, WebP, AVIF e SVG.
- Ajuste as opções: os tamanhos (o padrão já traz 16, 32, 48, 180, 192 e 512 px), o fundo (transparente ou uma cor sólida) e a margem interna, para o símbolo não encostar na borda.
- Solte uma ou várias imagens. Cada arquivo é conferido pelo conteúdo (magic bytes), não pela extensão.
- Baixe os PNGs um a um ou em ZIP. Os nomes saem no padrão
nome-32x32.png, prontos para renomear e subir.
A saída é sempre PNG. Se você quiser também o favicon.ico, gere-o à parte num conversor de ICO a partir do PNG de 48 px; a Pasta Mágica não produz esse formato. O custo em créditos aparece antes de rodar e, se uma etapa falhar, a reserva volta sozinha. Os limites de cada plano estão na tabela de preços.
Pasta Mágica
Favicons de todos os clientes em minutos
Uma imagem de entrada, o conjunto completo de saída. Use o mesmo padrão em cada site que você entrega.
