Envie uma imagem quadrada, clique em Gerar pacote de favicon e baixe o ZIP. O gerador cria favicon.ico, tamanhos PNG de favicon, ícone Apple Touch, ícones Android Chrome, manifesto e código HTML a partir de uma única imagem de origem. Para melhores resultados, comece com um logo de 512x512 px ou maior.
Gerador de favicon gratuito para ícones ICO, PNG e SVG
Transforme uma imagem em um pacote completo de favicon. Obtenha favicon.ico, ícones PNG, ícones Apple Touch, ícones Android Chrome, um manifesto web e código HTML.
Você também pode precisar:Gerador de ícones de aplicativo·PNG para ICO·Redimensionador de Imagem·Comprimir Imagem
O que este gerador de favicon cria
Um favicon já não é apenas uma imagem minúscula. Navegadores, abas fixadas, favoritos, telas iniciais móveis e inicializadores Android podem solicitar arquivos diferentes. Este gerador de favicon cria o conjunto comum de produção a partir de uma única imagem de origem, para que você não precise exportar cada tamanho manualmente.
| Arquivo de saída | Tamanho ou conteúdo | Onde é usado |
|---|---|---|
| favicon.ico | 16x16, 32x32, 48x48 | Alternativa clássica do navegador e detecção de /favicon.ico na raiz |
| favicon-16x16.png | 16x16 | Abas do navegador e interfaces compactas |
| favicon-32x32.png | 32x32 | Abas de alta densidade e favoritos |
| apple-touch-icon.png | 180x180 | Atalhos da tela inicial de iPhone e iPad |
| android-chrome-192x192.png | 192x192 | Android Chrome e manifestos de aplicativos web |
| android-chrome-512x512.png | 512x512 | Ícones de alta resolução para Android e PWA |
| manifest.json | Metadados de aplicativo web | Referências de ícones para aplicativos web progressivos |
| Trecho HTML | Tags <link> | Copiar para o <head> da sua página |
A ferramenta aceita envios PNG, JPG, SVG, WebP e GIF. Para o resultado mais limpo, comece com uma imagem quadrada de 512x512 px ou maior. Um logo com fundo transparente geralmente funciona melhor do que uma foto completa, porque favicons costumam ser exibidos com apenas 16x16 ou 32x32 pixels.
Os arquivos enviados são processados no servidor e removidos em até 24 horas.
Como fazer um favicon passo a passo
1
Etapa 1: Prepare uma imagem de origem simples
Use um logo, marca, letra ou símbolo quadrado. Se a sua imagem de origem não for quadrada, corte primeiro para manter a forma importante centralizada. Uma origem de 512x512 px ou 1024x1024 px dá ao gerador detalhe suficiente para criar tamanhos menores de favicon sem ampliação.
2
Etapa 2: Envie sua imagem
Arraste o arquivo para a área de envio ou clique em Escolher imagem. Você pode criar arquivos favicon a partir de PNG, JPG, SVG, WebP ou GIF. PNG e SVG geralmente são as melhores opções para logos porque mantêm as bordas nítidas e podem preservar transparência.
3
Etapa 3: Gere o pacote de favicon
Clique em Gerar pacote de favicon. A ferramenta cria um ZIP com o arquivo favicon.ico, tamanhos de ícone PNG, ícone Apple Touch, ícones Android Chrome, manifesto e trecho HTML.
4
Etapa 4: Baixe e instale
Baixe o ZIP, envie os arquivos gerados para seu site e copie o trecho HTML para o <head> da sua página. Se o seu site já tem um favicon antigo, limpe o cache do navegador ou adicione um parâmetro de versão como ?v=2 para forçar os navegadores a buscar o novo arquivo.
PNG para favicon, SVG para favicon e saída ICO
Formatos de origem diferentes criam resultados ligeiramente diferentes. A melhor escolha depende do tipo de arte com que você está começando.
| Formato de origem | Melhor para | Notas |
|---|---|---|
| PNG | Logos com transparência | Melhor fonte geral para um favicon a partir de PNG |
| SVG | Logos vetoriais e marcas simples | Bom para bordas nítidas; o gerador exporta tamanhos de favicon rasterizados |
| JPG | Fotos ou artes sem transparência | Funciona, mas os fundos passam a fazer parte do ícone |
| WebP | Imagens web otimizadas | Útil se o recurso original já estiver em WebP |
| GIF | Recursos animados simples ou legados | O pacote de favicon gerado é projetado para arquivos favicon estáticos e práticos |
SVG para favicon
Muitos designers começam com arte vetorial. SVG é ideal quando seu logo usa traçados limpos, cores planas e geometria simples. Depois do envio, o gerador de favicon exporta os arquivos rasterizados prontos para navegador que seu site realmente precisa, incluindo favicon.ico e tamanhos PNG.
PNG para favicon
PNG é o formato de origem mais comum para donos de sites. Use um PNG transparente se quiser que a forma do favicon fique limpa em interfaces claras e escuras do navegador. Se você precisa apenas de um único arquivo ICO no estilo Windows, em vez do pacote completo para site, também pode usar PNG para ICO.
Gerador de favicon.ico
O favicon.ico gerado contém imagens 16x16, 32x32 e 48x48 em um único arquivo. Isso importa porque navegadores antigos e muitos servidores web ainda procuram /favicon.ico automaticamente, mesmo quando você também fornece links modernos para PNG e manifesto.
Como adicionar favicon em HTML
Depois de gerar seu pacote de favicon, envie os arquivos para a raiz pública do site ou para a pasta de recursos estáticos. Em seguida, coloque o trecho HTML gerado dentro da seção <head> do documento.
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">Se o seu site usa um framework, coloque esses arquivos na pasta que serve recursos públicos estáticos:
| Plataforma | Local comum |
|---|---|
| Site HTML simples | Raiz do site, ao lado de index.html |
| Next.js | public/ |
| Vite ou React | public/ |
| WordPress | Pasta de recursos do tema ou raiz do site, dependendo da configuração |
| Shopify | Recursos do tema e depois referência à URL do recurso |
Os caminhos exatos podem variar por projeto, então faça os valores href corresponderem ao local onde os arquivos estão realmente hospedados. Um 404 em qualquer arquivo favicon geralmente significa que o caminho está errado, não que o pacote de ícones esteja quebrado.
Dicas para um favicon de site nítido
🔍
Mantenha o design legível em 16x16
No tamanho de uma aba do navegador, texto fino, gradientes, traços finos e fotos detalhadas geralmente desaparecem. Uma forma simples, uma letra ou uma marca de logo de alto contraste será mais fácil de reconhecer do que uma composição completa da marca.
◐
Use transparência com intenção
Um fundo transparente ajuda seu favicon a se encaixar naturalmente em abas do navegador, favoritos e visualizações de atalhos móveis. Se a imagem de origem tiver um quadrado branco atrás, esse quadrado normalmente continuará visível nos arquivos gerados.
◑
Teste temas claros e escuros do navegador
Favicons aparecem sobre muitas cores de interface. Um ícone escuro pode desaparecer em uma barra de abas escura; um ícone claro pode parecer fraco em fundos claros. Se seu logo depende de uma cor, considere adicionar um contorno sutil ou usar uma versão mais forte para o favicon.
↙
Não julgue apenas no tamanho ampliado
Sempre visualize o ícone nos tamanhos reais de 16x16 e 32x32. Um design que parece polido em 512x512 pode virar ruído visual quando reduzido. Se a versão pequena não estiver clara, simplifique a imagem de origem antes de gerar o pacote final.
Casos de uso comuns
Lançamento de novo site
Gere o pacote completo e adicione o trecho HTML antes de publicar
Atualização de marca
Substitua todos os arquivos favicon antigos e depois atualize as versões para renovar o cache
Blog ou portfólio
Use um monograma simples ou marca de logo em vez de um wordmark completo
PWA ou site instalável
Mantenha o manifesto e os ícones Android Chrome do ZIP
Ícone de tela inicial do iPhone
Use o ícone Apple Touch de 180x180
Projeto de ícone de aplicativo
Use o gerador de ícones de aplicativos se precisar de conjuntos completos de ícones para lojas iOS e Android
Esta página é melhor quando você precisa de um pacote de favicon para site. Para projetos de aplicativos nativos com pastas Xcode ou Android Studio, o gerador de ícones de aplicativo é uma opção melhor.
Perguntas frequentes
Para criar arquivos favicon para um site, prepare uma imagem quadrada simples, gere o pacote de favicon, envie os arquivos para a pasta pública do seu site e coloque as tags <link> geradas no <head> da página. Teste o site em uma aba do navegador depois de limpar o cache.
Este é um gerador de favicon gratuito para criar arquivos comuns de ícone de site a partir de uma única imagem. Ele aceita envios PNG, JPG, SVG, WebP e GIF e entrega um pacote ZIP em vez de apenas um pequeno ícone.
PNG é um dos melhores formatos de origem para gerar favicon porque aceita transparência e bordas nítidas. Envie um logo PNG transparente para gerar favicon.ico, PNG 16x16, PNG 32x32, ícone Apple Touch, ícones Android Chrome e um manifesto.
Sim. Envie um logo SVG e a ferramenta exporta arquivos favicon práticos para navegadores e dispositivos. O pacote gerado inclui tamanhos PNG rasterizados mais favicon.ico, o que é útil porque nem todo contexto de favicon deve depender apenas de SVG.
A ferramenta gera um arquivo favicon.ico com tamanhos 16x16, 32x32 e 48x48. Incluir favicon.ico ainda é útil porque navegadores, crawlers e sistemas legados costumam solicitar /favicon.ico automaticamente.
Envie os arquivos gerados para a pasta pública do seu site e depois copie o trecho HTML de favicon para o <head> da página. No mínimo, inclua links para favicon.ico, PNG 16x16, PNG 32x32, ícone Apple Touch e manifest.json se esses arquivos estiverem presentes.
Use <link rel="icon" href="/favicon.ico"> como alternativa ICO e depois adicione links PNG e Apple Touch para dispositivos modernos. Garanta que cada caminho href corresponda ao local real do arquivo no seu servidor.
Uma configuração HTML completa de favicon geralmente inclui links para favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png e manifest.json. O gerador fornece um trecho pronto para copiar, para que você não precise escrever essas tags manualmente.
Use vários tamanhos. O pacote inclui arquivos PNG 16x16 e 32x32 para a interface do navegador, um favicon.ico com vários tamanhos, incluindo 16x16, 32x32 e 48x48, um ícone Apple Touch 180x180, além de ícones Android 192x192 e 512x512. Começar com uma imagem de origem de 512x512 px ou maior dá os resultados reduzidos mais limpos.