Gerador de Favicon
NovoEm alta 🔥Gere todos os tamanhos de favicon a partir de uma única imagem
Como usar Gerador de Favicon
- 1Carregue uma imagem quadrada (PNG recomendado)
- 2A ferramenta gera automaticamente todos os tamanhos padrão de favicon
- 3Baixe tamanhos individuais ou um ZIP de todos os arquivos
- 4Copy the HTML snippet to add favicons to your website
Sobre Gerador de Favicon
Upload a single image and generate all standard favicon sizes (16x16, 32x32, 48x48, 180x180, 192x192, 512x512) plus an ICO file, ready for use in any website.
Principais recursos de Gerador de Favicon
- Gera seis tamanhos padrão: 16x16, 32x32, 48x48, 96x96, 180x180 e 512x512
- Inclui o Apple Touch Icon 180x180 para favoritos na tela inicial iOS
- Botão de download individual para cada tamanho
- Fragmento de tag HTML link pronto para usar para cada tamanho gerado
- Saída PNG com transparência preservada da imagem fonte
- Geração instantânea no navegador — sem upload necessário
- Funciona melhor com imagens fonte quadradas de 512x512 ou maiores
- Cópia com um clique para o bloco completo de fragmento HTML
Formatos suportados
Formatos de entrada
Formatos de saída
A square source image at 512x512 pixels or larger is strongly recommended for sharp results at all sizes.
Exemplos
Adicionar favicon a um novo site
Faça upload do logo, clique em Gerar favicons, baixe todos os tamanhos e cole o fragmento HTML no head do documento.
Entrada
512x512 square logo PNG
Saída
Six PNG files (16 to 512px) plus HTML snippet
Gerar Apple Touch Icon para PWA
Baixe apenas o tamanho 180x180 para a tag de link Apple Touch Icon no manifesto do Progressive Web App.
Entrada
New brand logo PNG
Saída
Fresh set of all standard favicon sizes
Generate Apple Touch Icon for PWA
Download just the 180x180 size for the Apple Touch Icon link tag in your Progressive Web App manifest.
Entrada
App icon PNG
Saída
180x180 Apple Touch Icon PNG
Casos de uso comuns
- Adicionar conjunto completo de favicons a um novo projeto de site
- Atualizar favicon desatualizado com logo de marca renovado
- Gerar Apple Touch Icon para favoritos na tela inicial iOS
- Criar todos os tamanhos de ícones para manifesto de PWA
- Fornecer múltiplos tamanhos de favicon para compatibilidade
- Garantir consistência de marca com favicon compatível em todos os navegadores
Solução de problemas
Favicon aparece borrado em tamanhos pequenos (16x16, 32x32)
Solução
Comece com uma imagem fonte de pelo menos 512x512 pixels. O algoritmo precisa de detalhes suficientes para produzir um ícone pequeno nítido.
Favicon não aparece na aba do navegador
Solução
Limpe o cache do navegador e recarregue a página com força. Navegadores armazenam favicons agressivamente em cache.
Imagem fonte não quadrada aparece distorcida
Solução
Recorte primeiro sua imagem fonte em quadrado usando a ferramenta Crop Image, depois gere os favicons da versão quadrada.
Perguntas frequentes
Qual tamanho de imagem devo enviar?
Pelo menos 512×512 pixels para melhores resultados.
Quais formatos são gerados?
Arquivos PNG para todos os tamanhos mais um arquivo ICO multi-tamanho.
Posso gerar um arquivo .ico?
A ferramenta gera arquivos PNG para todos os tamanhos. A maioria dos navegadores modernos aceita favicons PNG. Para formato .ico, converta o PNG 16x16 ou 32x32 com a ferramenta Conversor de imagem.
Como usar os favicons em um app React ou Next.js?
Coloque os arquivos PNG na pasta public e adicione as tags HTML link ao head do documento. Next.js tem uma API de metadata integrada que aceita caminhos de favicon diretamente.
How do I add the favicons to my website?
Download the generated PNG files and place them in your website root or an assets folder. Then paste the provided HTML link tag snippet into the head section of your HTML file.
Why is my favicon not showing after adding the HTML snippet?
Browsers cache favicons aggressively. After updating your site, perform a hard reload (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear the browser cache to see the new favicon.
Can I generate a .ico file?
Currently the tool generates PNG files for all sizes. Most modern browsers accept PNG favicons. For .ico format, convert the 16x16 or 32x32 PNG using the Image Converter tool.
How do I use the generated favicons in a React or Next.js app?
Place the PNG files in your public folder and add the HTML link tags to your document head or app layout. Next.js has a built-in metadata API that accepts favicon paths directly.