Gerador de favicon: seu logo pronto para o site
Para WordPress, Next.js, React e sites em HTML
Escolha seu logo e gere o favicon da aba do navegador, o ícone da tela inicial do iPhone e os PNGs para Android e PWA. A conversão acontece no seu navegador: a imagem não é enviada ao servidor.
Escolha seu logo
PNG, JPG ou SVG de até 10 MB
ou arraste a imagem para cá
Os tamanhos de favicon em um só lugar
Crie um pacote ICO e PNG e teste as imagens nos navegadores que seu site precisa atender.
Redimensionamento a partir do original
Cada tamanho é gerado a partir da imagem enviada. Use um logo simples e nítido para manter a leitura mesmo em 16 × 16 px.
Aceita PNG, JPG e SVG
Envie arte raster ou vetorial. O navegador converte cada tamanho para PNG; resolução e detalhes da fonte afetam o resultado.
Um conjunto para seu site
Gere favicon.ico com 16, 32 e 48 px, Apple Touch Icon de 180 px, ícones Android de 192 e 512 px e mstile de 150 px.
Confira o contraste no modo escuro
A mesma arte é redimensionada para cada saída. Para cores claras e escuras configuráveis em SVG, use SVG Favicon.
Use no seu CMS ou framework
Baixe os arquivos e copie o HTML. Para WordPress e Next.js, siga também o fluxo de instalação próprio de cada plataforma.
Sua imagem fica no dispositivo
A conversão é feita no navegador. Este gerador não envia seu logo a um servidor.
Como criar um favicon
Da imagem ao pacote de ícones em três etapas.
Escolha a imagem
Abra seu logo em PNG, JPG ou SVG. Prefira uma imagem quadrada e com boa resolução.
Gere os ícones
Clique em Gerar favicons e confira as versões nos diferentes tamanhos.
Baixe e instale
Baixe o pacote ou um arquivo individual e copie as tags HTML para seu site.
Gerar o pacote ou preparar cada arquivo?
As ferramentas resolvem tarefas diferentes. Escolha pela entrada e pelos arquivos necessários.
| Recurso | Este gerador | Ferramentas só de PNG | Edição manual |
|---|---|---|---|
| Processamento no navegador | Varia conforme a ferramenta | Depende da implementação | |
| Vários tamanhos de uma vez | Varia conforme a ferramenta | Depende da implementação | |
| ICO com várias resoluções | Varia conforme a ferramenta | Depende da implementação | |
| Apple Touch Icon | Varia conforme a ferramenta | Depende da implementação | |
| Ícones PWA e Android | Varia conforme a ferramenta | Depende da implementação | |
| Opções para tema escuro | Varia conforme a ferramenta | Depende da implementação | |
| Sem enviar a imagem ao servidor | Varia conforme a ferramenta | Depende da implementação | |
| Uso gratuito | Varia conforme a ferramenta | Depende da implementação |
As marcações descrevem a saída atual deste gerador. Ele redimensiona a mesma arte e não cria um SVG que muda com o tema. Outros produtos e fluxos manuais variam; não recebem uma avaliação geral aqui.
Use esta página para gerar ICO e PNGs a partir de uma imagem. Inclui manifest básico e guia de integração; ajustes maskable e cores SVG têm fluxos separados.
Use SVG Favicon para configurar cores claras e escuras em uma arte vetorial. Mantenha PNG ou ICO como alternativa nos contextos necessários.
Favicon Preview compara a imagem em simulações de abas, busca e tela inicial. Não publica o ícone nem garante sua exibição no Google ou em aparelhos.
Quer entender melhor os favicons? Guia de favicon nos navegadores
Tamanhos de favicon: qual arquivo usar?
Entenda onde cada versão do ícone aparece.
A aba do navegador e a tela inicial do celular usam arquivos diferentes. Prepare os tamanhos adequados para não depender de uma única imagem pequena.
| Tamanho | Arquivo | Onde usar |
|---|---|---|
| 16x16 | favicon.ico | Abas do navegador |
| 32x32 | favicon.ico | Favoritos e barra de tarefas |
| 48x48 | favicon.ico | Ícones e atalhos do Windows |
| 180x180 | apple-touch-icon.png | Tela inicial do iPhone e iPad |
| 192x192 | android-chrome-192x192.png | Ícone para Android e PWA |
| 512x512 | android-chrome-512x512.png | Ícone de alta resolução para PWA |
O favicon.ico reúne as versões de 16, 32 e 48 px. O navegador ou sistema escolhe qual usar.
O que vem no download
Os ícones do seu site e o código para referenciar os arquivos.
favicon.ico
Um arquivo com as versões de 16, 32 e 48 px para abas, favoritos e atalhos.
apple-touch-icon.png
PNG de 180 × 180 px para o atalho do site na tela inicial do iPhone e iPad.
android-chrome-192x192.png
PNG de 192 × 192 px para Android e instalação de PWA.
android-chrome-512x512.png
PNG de 512 × 512 px para os usos de maior resolução do seu PWA.
Código HTML
Tags prontas para copiar, com os caminhos dos ícones no head da página.
Como colocar o favicon no HTML
Coloque os arquivos na raiz pública do site e adicione as tags abaixo no head. Se usar outra pasta, ajuste os caminhos:
<link rel="icon" href="/favicon.ico" sizes="any" />
<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="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />Dúvidas sobre favicon
Saiba qual imagem usar, como instalar os arquivos e o que fazer se o ícone não aparecer.
Ferramentas relacionadas
Exemplo de exportação reproduzível
Uma arte, três tamanhos pequenos de favicon
O SVG de 1024 px foi exportado com as configurações padrão do Favicon Generator. À direita está o PNG real de 32 px, exibido nesse tamanho. O ZIP contém PNGs de 16, 32 e 48 px, favicon.ico com vários tamanhos e os demais ícones e guia de integração desta ferramenta.
16 / 32 / 48 px · ICO + PNG
Confira o recorte em F no arquivo de 16 px antes de usá-lo em uma aba. Uma fonte nítida pode perder detalhes ao reduzir; esta exportação não cria um design separado para tema escuro.
Os arquivos foram exportados pelas ferramentas locais usando o SVG original mostrado aqui. Você pode inspecionar os pacotes sem entrar em uma conta. O arredondamento da prévia é uma simulação e não faz parte do PNG baixado.
Quer saber mais?
Como configurar o favicon nos navegadores