Como gerar o favicon do seu site
- Envie o logo ou o ícone do site (PNG, SVG ou JPG).
- Ajuste a margem interna e, se quiser, um fundo colorido com cantos arredondados.
- Baixe o .zip, copie os arquivos para a raiz do site e cole o código no <head>.
O que vem no pacote
- favicon.ico: com 16, 32 e 48 px, para todos os navegadores.
- favicon-16x16.png e favicon-32x32.png: para navegadores modernos.
- apple-touch-icon.png (180 px): ícone ao salvar o site na tela do iPhone.
- android-chrome 192 e 512 px + site.webmanifest: para Android e PWA.
Perguntas frequentes
Quais arquivos de favicon eu preciso?
Para cobrir todos os navegadores e celulares: favicon.ico, os PNGs de 16 e 32 px, o apple-touch-icon de 180 px para iPhone e os ícones de 192 e 512 px do site.webmanifest para Android. A ferramenta gera todos.
Qual imagem devo usar?
Uma imagem quadrada de pelo menos 512×512 px, de preferência PNG com fundo transparente ou SVG. Logos simples ficam mais legíveis em tamanhos pequenos.
Onde coloco os arquivos?
Na raiz do site (a pasta public, em projetos React, Next.js ou Vite). Depois, cole o código HTML gerado dentro do <head>.
Por que o ícone da Apple tem fundo?
O iOS não aceita transparência no apple-touch-icon e pinta o fundo de preto. Por isso ele é gerado sempre com a cor de fundo escolhida.