Gerador de favicon: o pacote completo de ícones para o seu site
O favicon é o pequeno ícone que identifica o seu site na aba do navegador, nos favoritos, no histórico, nos resultados do Google e na tela inicial do celular quando alguém "instala" a página. Este gerador cria, em poucos segundos e sem enviar nada para servidores, todos os arquivos que um site moderno precisa: favicon.ico, PNGs em vários tamanhos, apple-touch-icon, ícones para PWA (inclusive a versão maskable do Android), um favicon.svg e o arquivo site.webmanifest já preenchido.
Três formas de criar o ícone
- Texto ou emoji: digite de 1 a 3 caracteres — a inicial da marca, uma sigla ou um emoji. Escolha a família da fonte, o peso e o tamanho. É a forma mais rápida de ter um favicon legível mesmo em 16×16 px.
- Ícone: escolha um dos ícones desenhados para o próprio GerarOnline (lupa, coração, carrinho, casa, estrela, raio e muitos outros). Eles são vetoriais e livres para uso, inclusive comercial.
- Imagem: envie o seu logotipo em PNG, JPG, WebP ou SVG. A imagem é centralizada e redimensionada com suavização de alta qualidade. Prefira arquivos quadrados com pelo menos 512×512 px e fundo transparente.
Personalização
Defina o formato do fundo (arredondado, círculo, quadrado ou sem fundo), a cor sólida ou um degradê de duas cores, a cor do símbolo e a margem interna. A pré-visualização mostra o ícone grande, nos tamanhos reais de 16, 32, 48 e 64 px e simulado em uma aba de navegador — é ali que você confere se o desenho continua reconhecível em miniatura.
O que vem no arquivo .zip
| Arquivo | Tamanho | Para que serve |
|---|---|---|
| favicon.ico | 16, 32 e 48 px | Compatibilidade total: navegadores antigos, Windows e quem procura /favicon.ico automaticamente. |
| favicon.svg | vetorial | Nitidez em qualquer densidade de tela (gerado quando a origem é texto ou ícone). |
| favicon-16x16.png / favicon-32x32.png | 16 e 32 px | Versões PNG avulsas, úteis em CMS e plataformas que pedem PNG. |
| apple-touch-icon.png | 180 px | Ícone usado pelo iPhone e iPad ao adicionar o site à tela de início. Gerado sem cantos transparentes, como a Apple recomenda. |
| icon-192.png / icon-512.png | 192 e 512 px | Ícones do Web App Manifest (Android, Chrome, PWA). |
| icon-maskable-512.png | 512 px | Versão com fundo cheio e símbolo dentro da zona segura, para o Android recortar no formato do sistema sem cortar o desenho. |
| site.webmanifest | — | Manifest com nome do site, cor do tema e referências aos ícones. |
Como instalar no seu site
- Baixe o pacote e extraia os arquivos na raiz do site (a mesma pasta do
index.html). - Copie o código exibido na ferramenta e cole dentro do
<head>de todas as páginas. - Publique e abra o site em uma aba anônima para conferir — navegadores guardam favicons em cache por bastante tempo.
<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">
<link rel="manifest" href="/site.webmanifest">Esse conjunto enxuto é o recomendado hoje: o .ico cobre os navegadores antigos, o SVG atende os modernos, o apple-touch-icon cuida do iOS e o manifest entrega os ícones grandes ao Android. Não é mais necessário listar dezenas de tamanhos no HTML.
No WordPress, você também pode enviar o icon-512.png em Aparência → Personalizar → Identidade do site. Em plataformas como Shopify, Wix ou Nuvemshop, procure a opção "favicon" nas configurações do tema e use o PNG de 32 ou 512 px.
Dicas para um favicon que funciona
- Simplifique: em 16 px cabem poucos detalhes. Use a inicial da marca ou o símbolo do logotipo, nunca o logotipo inteiro com texto.
- Contraste: abas podem ser claras ou escuras. Um fundo colorido sólido garante leitura nos dois temas.
- Margem: 10% a 20% de respiro costuma ficar equilibrado. Para ícones de app, o arquivo maskable já reserva a zona segura.
- Cache: ao trocar o favicon, acrescente um parâmetro de versão na URL (por exemplo,
/favicon.ico?v=2) para forçar a atualização.
Privacidade
Todo o desenho é feito no seu navegador com a API Canvas. A imagem que você envia não sai do seu computador, e os arquivos do pacote são montados localmente.