Gerador de Favicon Online — ICO, PNG, Apple Touch, Android, manifest
Transforme qualquer imagem (PNG, JPG, SVG, WebP) em um pacote favicon completo pra seu site: ICO multi-resolução (16, 32, 48 px), PNGs em 8 tamanhos (16 até 512 px), Apple Touch Icon (180×180), Android Chrome (192 e 512), e o arquivo site.webmanifest. Tudo no navegador, sem upload pra servidor.
O que é favicon?
Favicon (favorite icon) é o pequeno ícone que aparece:
- Na aba do navegador (ao lado do título)
- Em marcadores/favoritos
- Na tela inicial do celular (quando salva o site)
- Nos resultados do Google (em mobile)
- Em links compartilhados (WhatsApp, Slack)
Por que precisa de tantos tamanhos?
| Tamanho | Onde usa |
|---|---|
| 16×16 | Aba do navegador (Chrome, Firefox padrão) |
| 32×32 | Aba em telas retina |
| 48×48 | Windows desktop shortcuts |
| 180×180 | Apple Touch Icon (iOS home screen) |
| 192×192 | Android home screen (PWA) |
| 512×512 | PWA splash screen, alta resolução |
Formato ICO: por que ainda existe
ICO é um formato antigo (Windows 95) mas ainda é o melhor pra favicon em Internet Explorer e Edge antigo. Vantagem: multi-resolução em um único arquivo (16+32+48 px no mesmo .ico). Browsers modernos preferem PNG mas continuam aceitando ICO.
O arquivo site.webmanifest
É um JSON usado por PWAs (Progressive Web Apps) para "instalar" seu site como app no celular. Contém:
name: nome completo do appshort_name: nome curto (na home screen)icons: array de ícones Androidtheme_color: cor da barra do navegador (Android)background_color: cor do splash screendisplay:standalonefaz parecer app nativo
Boas práticas para o design do favicon
- Use imagem quadrada: 512×512 px ou maior, evita distorção
- Designe legível em 16px: detalhes finos somem na escala menor — teste antes
- Alto contraste: deve ser visível em fundo claro (aba do Chrome) e escuro (Safari modo escuro)
- Sem texto: 5-7 caracteres no máximo, ou imagem somente
- Centralize o conteúdo: deixe 10-15% de margem nas bordas
- Sem transparência exagerada: ícone "fantasma" não tem contraste
- Cores chamativas: a marca precisa se destacar entre 30+ abas abertas
Onde colocar os arquivos no seu site
Faça upload dos arquivos para a raiz do site (pasta pública):
/favicon.ico /favicon-16x16.png /favicon-32x32.png /apple-touch-icon.png /android-chrome-192x192.png /android-chrome-512x512.png /site.webmanifest
HTML para colar no <head>
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#0F766E">
Como verificar se o favicon está funcionando
- Limpe o cache do navegador: Ctrl+Shift+Del → "Imagens em cache"
- Abra em janela anônima: força recarga sem cache
- Use favicon checker: realfavicongenerator.net/checker
- Verifique no celular: salve o site na home screen e veja o ícone
- Inspecione: F12 → Network → filtre por "favicon" → veja se carregou 200 OK
Erros comuns
- Favicon não atualiza: cache agressivo do navegador. Adicione
?v=2ao final da URL:favicon.ico?v=2 - Aparece quadrado branco no iPhone: faltou o Apple Touch Icon de 180×180
- Aparece pixelado: você forneceu imagem pequena (< 512 px) — sempre use o maior tamanho como fonte
- Não aparece no Google: pode levar 1-2 semanas. Use o teste em
google.com/s2/favicons?domain=seu-site.com - SVG não funciona em IE: navegadores antigos exigem ICO. Use os dois (link rel duplicado funciona)
Privacidade desta ferramenta
- ✅ 100% no navegador via Canvas API
- ✅ Sua imagem nunca sai do dispositivo
- ✅ ICO, PNGs e manifest gerados localmente
- ✅ Sem cadastro, sem cookies
Perguntas frequentes
Posso usar imagem com fundo transparente?
Sim, recomendado para PNG. Mas o ICO converte automaticamente — fundo transparente vira sólido.
SVG funciona como favicon?
Sim, navegadores modernos aceitam SVG (Chrome, Firefox, Safari). Mas para compatibilidade total com IE/Edge antigo, mantenha ICO também.
Qual cor de tema escolher?
Use a cor principal da sua marca. Aparece na barra do navegador Android e no splash screen do PWA.
Posso usar para 2+ sites?
Sim. Gere quantos quiser. Use uma imagem fonte diferente para cada site.
O Google indexa favicons no resultado de busca?
Sim, em mobile. Aparece no resultado ao lado do título. Veja diretrizes em search.google.com/structured-data/testing-tool.
![[NEW] VT COSMETICS PDRN Reedle Shot Brush Hair Serum 100ml](/uploads/offers/2026/07/133ace80c188633147d5d7f0311037bf.webp)
