Imagem & Foto

Gerador de Favicon

Arraste uma imagem e obtenha todos os tamanhos de favicon que um site moderno precisa — favicon.ico, tamanhos PNG para navegadores, Apple e Android, além de trechos de HTML e manifest prontos para colar.

Solte seu logo ou ícone

ou clique para navegar — PNG, JPG, WebP ou SVG até 10 MB. Uma fonte quadrada de 512×512+ fornece o resultado mais limpo.

Privado por design. Sua imagem fonte é decodificada e redimensionada completamente no seu navegador usando a API Canvas. O .ico é montado na memória. Nada é enviado.

O que é um gerador de favicon?

Um gerador de favicon transforma uma imagem fonte em uma família de arquivos de ícone que um site moderno precisa — o arquivo legado .ico que os navegadores buscam automaticamente, os pequenos tamanhos PNG mostrados em abas e favoritos, o ícone apple-touch de 180 pixels usado quando um usuário de iPhone adiciona seu site à tela inicial, e as imagens de 192/512 pixels que o Android puxa do manifesto da web. Fazer isso manualmente significa abrir um editor de imagens, exportar sete arquivos separados e escrever um longo bloco de tags <link> no seu HTML. Este gerador executa todo o pipeline no seu navegador: solte uma imagem, obtenha todos os tamanhos e copie o snippet HTML e do manifesto correspondente. Sua imagem nunca sai da página.

Como gerar um conjunto de favicons

1
Comece com uma fonte quadrada
Envie um PNG, JPG, WebP ou SVG que seja quadrado e tenha pelo menos 512×512 pixels. Uma fonte não quadrada é ajustada em uma tela quadrada para que o logotipo nunca seja cortado, mas pequenos detalhes parecem mais nítidos quando a fonte já é quadrada.
2
Escolha um fundo
Deixe transparente se seu logotipo for legível tanto em chrome de navegador claro quanto escuro. Mude para uma cor sólida se seu ícone tiver um primeiro plano claro que desapareceria contra uma aba branca — a maioria das abas empresariais ainda é muito clara.
3
Revise cada tamanho
Olhe atentamente para as prévias de 16 e 32 pixels. A maioria dos logotipos perde detalhes nesse tamanho. Se o resultado for uma mancha, simplifique a fonte — menos cores, traços mais grossos, menos tipos finos — e reenvie.
4
Baixe o pacote
Use Baixar tudo para pegar favicon.ico mais os seis tamanhos PNG. Coloque-os na raiz do seu site. O .ico contém internamente PNGs de 16, 32 e 48 px, que é o que os navegadores Chrome, Firefox e Edge atuais esperam.
5
Cole o HTML e o manifesto
Copie o snippet HTML para o <head> de cada página. Salve o snippet site.webmanifest ao lado dos ícones para que o Android mostre a imagem correta na tela inicial quando alguém adicionar seu site.

Como o conjunto de favicons é construído

1. Decodifique a imagem enviada usando o carregador de imagem nativo do navegador.
2. Para cada tamanho alvo (16, 32, 48, 180, 192, 512), desenhe em uma tela quadrada.
3. Ajuste a fonte para que o lado mais longo se encaixe na tela — nunca corte, nunca estique.
4. Re-encode a tela como um PNG via canvas.toBlob('image/png').
5. Para favicon.ico, monte os PNGs de 16/32/48 em uma estrutura ICONDIR + ICONDIRENTRY.
6. Concatene os bytes PNG após as entradas de diretório de 16 bytes — isso é um .ico multi-resolução válido.

Navegadores modernos e dispositivos Apple aceitam bytes PNG incorporados dentro de um contêiner .ico — não há necessidade de codificar o formato antiquado BMP-com-máscara-AND que originalmente foi enviado com o Windows 95. O contêiner é apenas um cabeçalho de seis bytes (reservado + tipo + contagem), uma entrada de diretório de 16 bytes por imagem incluída (tamanho + profundidade de bits + deslocamento + comprimento), e os payloads PNG concatenados. Isso é o que esta ferramenta produz, e é o que Chrome, Firefox, Safari e Edge buscam quando solicitam /favicon.ico do seu servidor.

Referência: Wikipedia — Formato de arquivo ICO

O que funciona e o que não funciona

Imagem fonte	O que esperar
Logotipo quadrado em negrito, 1024×1024 PNG, fundo transparente	Nítido em todos os tamanhos. As pré-visualizações de 16 e 32 px ainda são claramente legíveis. Coloque diretamente em um site de produção. A entrada ideal.
Logotipo horizontal largo, 2000×400	Com bordas em um canvas quadrado com faixas vazias em cima e embaixo. O logotipo ainda é legível em 192 e 512, mas ilegível em 16 e 32 — o texto é muito pequeno. Corte para uma marca quadrada antes de fazer o upload.
Logotipo fotográfico com um contorno de gradiente fino	O gradiente e o contorno desaparecem em 16 e 32 px. Use uma versão simplificada e de alto contraste do mesmo logotipo para ativos de tamanho ícone. A perda de detalhes é um problema de origem, não um problema de exportação.
SVG sem largura ou altura explícitas	Renderiza na largura padrão de 300×150 que o navegador atribui a SVGs sem um tamanho derivado de viewBox. Adicione atributos de largura/altura ou um viewBox ao SVG de origem antes de fazer o upload. Caso extremo de SVG — conserte a origem.

Quando usar um gerador de favicon

Lançando um novo site ou página de produto e você precisa de todos os tamanhos de favicon de uma só vez.
Atualizando uma marca e substituindo ícones em um site existente sem abrir o Photoshop.
Criando uma ferramenta interna, painel ou painel de administração que precisa de um ícone de aba reconhecível.
Construindo um site de documentação estática (Docusaurus, Astro, Next.js) onde o framework espera favicons em caminhos específicos.
Gerando um conjunto de ícones pronto para PWA para que o site possa ser instalado na tela inicial de um telefone.
Substituindo o favicon padrão de um fornecedor em um subdomínio SaaS que você controla.
Testando rapidamente como um logotipo candidato é lido em 16 px antes de se comprometer com ele.

Ferramentas relacionadas

Removedor de Fundo

Recorte o assunto de qualquer foto com IA no dispositivo — sem necessidade de upload.

Compressor de Imagem

Reduza arquivos JPG, PNG ou WebP no seu navegador com um controle deslizante de qualidade interativo.

Editor de Fotos

Ajuste, filtre, gire e corte fotos no navegador — sem uploads, sem marca d'água.

Criador de Meme

Componha memes e colagens de capturas de tela com camadas reais — cole, arraste, corte, legendas, exporte.

Perguntas frequentes

Por que tantos tamanhos?

Diferentes plataformas solicitam tamanhos diferentes. Os navegadores buscam /favicon.ico (que contém 16, 32 e 48 px). O iOS usa apple-touch-icon em 180 px quando um usuário salva seu site na tela inicial. O Android puxa 192 e 512 px do manifesto da web para seus ícones de tela inicial e splash screen. Enviar todos eles evita que qualquer cliente recorra a um ícone pequeno ampliado e borrado.

Minha imagem foi carregada em algum lugar?

Não. A decodificação, redimensionamento e a montagem do .ico acontecem no seu navegador usando a API Canvas e um pequeno gravador binário em página. Nada é enviado para um servidor — você pode verificar na aba de rede do seu navegador que não há upload após o carregamento da página.

Por que o .ico ainda é relevante em 2026?

Os navegadores buscam automaticamente /favicon.ico quando nenhum outro ícone é declarado, então ele continua sendo o fallback padrão. Arquivos .ico modernos contêm bytes PNG (não o formato BMP legado), então eles têm aproximadamente o mesmo tamanho que um único PNG enquanto cobrem três tamanhos em uma única solicitação.

Devo usar um fundo transparente ou sólido?

Transparente é melhor quando a silhueta do seu logotipo é claramente legível em abas brancas e escuras. Use uma cor sólida se seu logotipo tiver um primeiro plano claro que desapareceria contra uma aba de navegador branca. A maioria das grandes marcas usa uma cor sólida (geralmente a cor da marca) exatamente por esse motivo.

Meu logotipo parece bom em 512, mas borrado em 16 — por quê?

Esse é um problema de design de origem, não um problema de exportação. Em 16 px, você tem 256 pixels no total para representar todo o logotipo. Traços finos, gradientes, tipos finos e detalhes internos colapsam. Muitas marcas enviam uma marca separada e simplificada para uso em ícones — geralmente uma única letra ou forma em negrito.

Onde coloco esses arquivos?

Coloque favicon.ico e todos os seis PNGs na raiz do seu site (para que sejam servidos de /favicon.ico, /favicon-16x16.png, etc.). Salve o manifesto como site.webmanifest na mesma raiz. Em seguida, cole o trecho HTML no <head> de cada página ou no layout/template compartilhado.

Preciso de todos os tamanhos em 2026?

Estritamente, você pode se safar com um único PNG de alta resolução e deixar o navegador escalar, mas o resultado é visivelmente suave em 16 px. O conjunto completo é apenas sete pequenos arquivos (menos de 30 KB no total para logotipos típicos) e oferece o resultado mais nítido em todos os dispositivos.

Última atualização 2026-04-28

Carregando...

O que é um gerador de favicon?

Como gerar um conjunto de favicons

Comece com uma fonte quadrada

Envie um PNG, JPG, WebP ou SVG que seja quadrado e tenha pelo menos 512×512 pixels. Uma fonte não quadrada é ajustada em uma tela quadrada para que o logotipo nunca seja cortado, mas pequenos detalhes parecem mais nítidos quando a fonte já é quadrada.

Escolha um fundo

Deixe transparente se seu logotipo for legível tanto em chrome de navegador claro quanto escuro. Mude para uma cor sólida se seu ícone tiver um primeiro plano claro que desapareceria contra uma aba branca — a maioria das abas empresariais ainda é muito clara.

Revise cada tamanho

Olhe atentamente para as prévias de 16 e 32 pixels. A maioria dos logotipos perde detalhes nesse tamanho. Se o resultado for uma mancha, simplifique a fonte — menos cores, traços mais grossos, menos tipos finos — e reenvie.

Baixe o pacote

Use Baixar tudo para pegar favicon.ico mais os seis tamanhos PNG. Coloque-os na raiz do seu site. O .ico contém internamente PNGs de 16, 32 e 48 px, que é o que os navegadores Chrome, Firefox e Edge atuais esperam.

Cole o HTML e o manifesto

Copie o snippet HTML para o <head> de cada página. Salve o snippet site.webmanifest ao lado dos ícones para que o Android mostre a imagem correta na tela inicial quando alguém adicionar seu site.

Como o conjunto de favicons é construído

1. Decodifique a imagem enviada usando o carregador de imagem nativo do navegador.
2. Para cada tamanho alvo (16, 32, 48, 180, 192, 512), desenhe em uma tela quadrada.
3. Ajuste a fonte para que o lado mais longo se encaixe na tela — nunca corte, nunca estique.
4. Re-encode a tela como um PNG via canvas.toBlob('image/png').
5. Para favicon.ico, monte os PNGs de 16/32/48 em uma estrutura ICONDIR + ICONDIRENTRY.
6. Concatene os bytes PNG após as entradas de diretório de 16 bytes — isso é um .ico multi-resolução válido.

O que funciona e o que não funciona

Imagem fonte	O que esperar
Logotipo quadrado em negrito, 1024×1024 PNG, fundo transparente	Nítido em todos os tamanhos. As pré-visualizações de 16 e 32 px ainda são claramente legíveis. Coloque diretamente em um site de produção. A entrada ideal.
Logotipo horizontal largo, 2000×400	Com bordas em um canvas quadrado com faixas vazias em cima e embaixo. O logotipo ainda é legível em 192 e 512, mas ilegível em 16 e 32 — o texto é muito pequeno. Corte para uma marca quadrada antes de fazer o upload.
Logotipo fotográfico com um contorno de gradiente fino	O gradiente e o contorno desaparecem em 16 e 32 px. Use uma versão simplificada e de alto contraste do mesmo logotipo para ativos de tamanho ícone. A perda de detalhes é um problema de origem, não um problema de exportação.
SVG sem largura ou altura explícitas	Renderiza na largura padrão de 300×150 que o navegador atribui a SVGs sem um tamanho derivado de viewBox. Adicione atributos de largura/altura ou um viewBox ao SVG de origem antes de fazer o upload. Caso extremo de SVG — conserte a origem.

Quando usar um gerador de favicon

Lançando um novo site ou página de produto e você precisa de todos os tamanhos de favicon de uma só vez.

Atualizando uma marca e substituindo ícones em um site existente sem abrir o Photoshop.

Criando uma ferramenta interna, painel ou painel de administração que precisa de um ícone de aba reconhecível.

Construindo um site de documentação estática (Docusaurus, Astro, Next.js) onde o framework espera favicons em caminhos específicos.

Gerando um conjunto de ícones pronto para PWA para que o site possa ser instalado na tela inicial de um telefone.

Substituindo o favicon padrão de um fornecedor em um subdomínio SaaS que você controla.

Testando rapidamente como um logotipo candidato é lido em 16 px antes de se comprometer com ele.