O que é o Gerador de Favicon
O Gerador de Favicon é uma ferramenta online que transforma uma imagem PNG ou JPG em um pacote ZIP com os ícones que o seu site precisa (favicon.ico, versões PNG em vários tamanhos e o apple-touch-icon para iOS). O favicon é aquele pequeno ícone que aparece na aba do navegador, nos favoritos e nos atalhos da tela inicial do celular.
Quem cria sites, landing pages, portfólios ou lojas usa essa ferramenta para gerar de uma vez todos os arquivos de ícone, sem precisar abrir editores de imagem e redimensionar cada tamanho na mão. Você envia uma imagem, clica em um botão e recebe o conjunto pronto para colocar no seu HTML.
Como usar
- Clique em "Selecionar Arquivo" e envie uma imagem no formato PNG ou JPG.
- Confira o preview, que mostra como o ícone fica em 64x64, 32x32 e 16x16 pixels.
- Clique em "Baixar Pacote Favicon (.zip)".
- Descompacte o ZIP e copie os arquivos para a raiz do seu site.
- Abra o arquivo
instrucoes.txte cole as tags<link>prontas dentro do<head>do seu HTML.
Exemplo prático: você tem o logotipo da sua loja em logo.png, com 512x512 pixels e fundo transparente. Ao enviar essa imagem e baixar o pacote, você recebe um ZIP com favicon.ico, favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon-128x128.png, apple-touch-icon.png (180x180), android-chrome-512x512.png e o instrucoes.txt com as tags de instalação.
Como funciona
Toda a geração acontece dentro do seu próprio navegador. A ferramenta lê a imagem com o FileReader, desenha cada tamanho em um elemento <canvas> HTML redimensionando com o drawImage, exporta o resultado em PNG e empacota tudo com a biblioteca JSZip. Sua imagem não é enviada para nenhum servidor, o processamento é 100% local na sua máquina.
Os PNGs são exportados em formato sem perda de qualidade. O redimensionamento reduz a resolução, então detalhes finos podem ficar menos nítidos em 16x16. Por isso vale enviar uma imagem quadrada de pelo menos 512x512: se a imagem não for quadrada, ela é esticada para caber no quadrado. O arquivo favicon.ico gerado aqui é, na prática, o PNG de 32x32 salvo com a extensão .ico, o que funciona nos navegadores modernos, e não um binário ICO multirresolução clássico.
| Arquivo | Tamanho | Uso |
|---|---|---|
| favicon.ico | 32x32 | Fallback para navegadores e favoritos |
| favicon-16x16.png | 16x16 | Aba do navegador em telas comuns |
| favicon-32x32.png | 32x32 | Aba em telas de alta densidade |
| favicon-48x48.png | 48x48 | Atalhos e barra de tarefas |
| favicon-128x128.png | 128x128 | Ícones ampliados |
| apple-touch-icon.png | 180x180 | Tela inicial do iOS |
| android-chrome-512x512.png | 512x512 | Ícone de app no Android |