Favicon Generator: Criar ICO e PNG

O que é o Favicon Generator?

O Favicon Generator é uma ferramenta gratuita baseada no navegador que recebe qualquer imagem e produz os nove tamanhos padrão de favicon exigidos por navegadores modernos, sistemas operacionais e plataformas móveis. Configurar favicons para um novo site significa gerar um conjunto específico de arquivos PNG com dimensões exatas em pixels — 16×16 para abas do navegador, 180×180 para ícones Apple Touch, 192×192 e 512×512 para Android Chrome — além de vários tamanhos intermediários. Fazer isso manualmente exige redimensionar em um editor de imagens nove vezes. Esta ferramenta faz todos os nove com um clique, exibe uma pré-visualização rotulada de cada tamanho e permite baixar individualmente ou todos de uma vez. Tudo é executado no seu navegador usando a Canvas API — nenhuma imagem sai do seu dispositivo.

Funcionalidades principais

• Gerar múltiplos tamanhos de favicon — Produz todos os 9 tamanhos definidos no array FAVICON_SIZES: 16, 32, 48, 64, 96, 128, 180, 192 e 512 pixels quadrados. Cada um é renderizado desenhando a imagem original em um canvas com as dimensões alvo.
• Criar formatos ICO, PNG e WebP — Todos os favicons gerados são PNG (via canvas.toDataURL('image/png')). Os nomes de arquivo individuais seguem padrões web: favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, etc.
• Suporte ao Apple Touch Icon — A saída de 180×180px é nomeada apple-touch-icon.png, o nome de arquivo que o iOS Safari procura quando um usuário adiciona um site à tela inicial.
• Suporte a ícones Android Chrome — A saída de 192×192px é nomeada android-chrome-192x192.png e a de 512×512px é nomeada android-chrome-512x512.png, correspondendo aos nomes especificados em um manifest.json padrão do Web App Manifest.
• Pré-visualização de todos os tamanhos gerados — Após a geração, uma grade exibe cada tamanho com uma pré-visualização rotulada sobre fundo de grade de transparência, o nome do arquivo, as dimensões exatas em pixels e uma descrição do caso de uso (ex.: "Ícone de aba do navegador", "Apple Touch Icon", "Ícone do Chrome Web Store").
• Download individual ou tudo em ZIP — Cada tamanho tem seu próprio botão de download. O botão "Baixar Tudo" empacota todos os arquivos gerados — 9 PNGs de favicons, um favicon.ico (contendo tamanhos 16, 32 e 48px) e um site.webmanifest — em um único arquivo favicons.zip.
• Geração automática de favicon.ico — A ferramenta constrói um arquivo contêiner ICO apropriado incorporando os PNGs de 16, 32 e 48px usando a técnica PNG-em-ICO, pronto para <link rel="icon" type="image/x-icon" href="/favicon.ico">.
• Geração de site.webmanifest — Um arquivo Web App Manifest pronto para uso referenciando os ícones Android Chrome de 192 e 512px está incluído no arquivo ZIP de download completo.
• Processamento 100% do lado do cliente — As operações de redimensionamento do canvas são executadas inteiramente no seu navegador. A imagem de origem é lida usando FileReader e nunca é transmitida a nenhum servidor.
• Funciona com qualquer formato de imagem — A entrada de arquivo aceita image/*, e o elemento <img> decodifica o arquivo. JPEG, PNG, SVG, WebP, GIF e AVIF funcionam como imagens de origem.

Como usar o Favicon Generator

Passo 1: Fazer upload da imagem de origem

Clique na zona de soltar ou arraste sua imagem para ela. Para melhores resultados, use uma imagem quadrada — a ferramenta dimensiona sua imagem para preencher cada canvas de favicon usando ctx.drawImage(originalImage, 0, 0, size, size), o que estica entradas não quadradas. Um PNG quadrado de 512×512px ou maior com fundo transparente é a fonte ideal. Após o carregamento da imagem, aparece uma pré-visualização mostrando as dimensões originais (ex.: 512 x 512px).

Passo 2: Gerar todos os tamanhos

Clique em "Gerar Favicons". A ferramenta itera por todos os 9 tamanhos em sequência: para cada tamanho, define o canvas oculto para essa dimensão, limpa-o, desenha sua imagem escalada para preencher o canvas e armazena a URL de dados resultante. Após a conclusão do loop, um toast de sucesso confirma que todos os tamanhos foram gerados.

Passo 3: Pré-visualizar os resultados

Uma grade aparece mostrando os 9 favicons gerados lado a lado. Cada item exibe:

• Uma imagem de pré-visualização renderizada sobre fundo de grade de transparência (a pré-visualização é limitada a 64×64px mesmo para saídas maiores como 512×512)
• O nome do arquivo (ex.: android-chrome-512x512.png)
• As dimensões exatas em pixels (ex.: 512x512px)
• Uma descrição de onde é usado (ex.: Splash do Android Chrome)

Isso permite confirmar visualmente que o ícone está correto em tamanhos pequenos como 16×16 antes de baixar.

Passo 4: Download individual ou tudo em ZIP

Clique no botão de download ao lado de qualquer favicon individual para salvar esse arquivo específico. Você também pode baixar o favicon.ico separadamente — ele contém os tamanhos 16, 32 e 48px em um único contêiner ICO. Para baixar tudo de uma vez, clique em "Baixar Tudo" no cabeçalho do cartão de favicons gerados. Isso cria um arquivo favicons.zip contendo todos os 9 arquivos PNG, o favicon.ico e um arquivo site.webmanifest.

Passo 5: Adicionar os favicons ao seu site

Coloque os arquivos PNG baixados no diretório raiz público do seu projeto. Adicione as seguintes tags ao <head> do seu HTML:

<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">

Para suporte a PWA no Android Chrome, referencie os arquivos 192×192 e 512×512 no seu manifest.json:

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Exemplos práticos

Configuração de um novo site

Cenário: Você está lançando um site de portfólio pessoal construído com Next.js e precisa de todos os tamanhos padrão de favicon do seu SVG de logo.

Entrada: Um PNG quadrado de 512×512px exportado do seu logo (fundo transparente).

O que a ferramenta produz: Nove arquivos PNG: de favicon-16x16.png a android-chrome-512x512.png, todos nomeados e dimensionados para corresponder ao que navegadores e plataformas móveis esperam.

Por que é útil: Configurar favicons manualmente requer 9 operações de exportação separadas. Um clique aqui substitui toda essa etapa.

Ícone do Chrome Web Store

Cenário: Você está enviando uma extensão do Chrome e precisa de um ícone de 128×128px conforme as diretrizes de listagem do Chrome Web Store.

Entrada: A arte do ícone da sua extensão em qualquer tamanho.

O que a ferramenta produz: favicon-128x128.png rotulado como "Ícone do Chrome Web Store" — exatamente o arquivo que o Chrome Web Store requer.

Por que é útil: O tamanho 128×128px é um requisito específico que muitos geradores de favicon ignoram. Esta ferramenta o inclui com o nome de arquivo padrão correto.

Configuração de PWA para um aplicativo web

Cenário: Você está adicionando suporte a Progressive Web App (PWA) a um app React e precisa dos ícones do manifest.

Entrada: Um PNG de ícone de app de 512×512px.

O que a ferramenta produz: android-chrome-192x192.png (192×192px) e android-chrome-512x512.png (512×512px) — os dois tamanhos especificados na especificação do Web App Manifest para Android Chrome.

Por que é útil: O Android Chrome requer ambos os tamanhos para exibição correta do ícone na tela inicial e tela de abertura. Tê-los pré-nomeados com os nomes de arquivo padrão evita erros de configuração.

Dicas e melhores práticas

Comece com uma imagem quadrada de 512×512px ou maior. A ferramenta dimensiona sua entrada para cada tamanho alvo usando ctx.drawImage. Começar com uma imagem quadrada maior significa que há mais detalhes disponíveis em cada escala, reduzindo artefatos em tamanhos pequenos como 16×16.

Use um PNG transparente como entrada para ícones com logos em forma. Se o seu logo tem uma forma não retangular (círculo, escudo ou contorno personalizado), forneça um PNG com fundo transparente. As áreas transparentes se transferem para cada favicon, o que parece correto em abas do navegador e nas telas iniciais do iOS.

Verifique a pré-visualização em 16×16 antes de baixar. A grade mostra cada tamanho em escala de exibição. A pré-visualização de 16×16 costuma ser a mais importante — se o texto do seu logo for ilegível em 16px, considere uma versão simplificada apenas com a marca para os tamanhos menores.

A função "Baixar Tudo" cria um arquivo ZIP. Todos os arquivos gerados — os 9 PNGs de favicons, o favicon.ico e o site.webmanifest — são empacotados em um único arquivo favicons.zip. Isso evita os limites de download do navegador e mantém todos os arquivos organizados em um arquivo.

A entrada JPEG funciona, mas áreas transparentes ficam pretas. Se sua imagem de origem é um JPEG sem transparência, os favicons de saída terão o mesmo fundo. Para ícones que precisam de fundo transparente, forneça uma fonte PNG.

Verifique o comportamento de download do seu navegador. Alguns navegadores solicitam confirmação para cada arquivo individual quando "Baixar Tudo" é acionado. Se você vir 9 prompts de download, aceite cada um. No Chrome com download automático habilitado, todos os 9 arquivos chegam à sua pasta de downloads sem prompts.

Problemas comuns e solução de problemas

Toast de "Erro de carregamento" ao fazer upload. Isso é disparado pelo manipulador img.onerror quando o navegador não consegue decodificar o arquivo enviado como uma imagem. Certifique-se de estar enviando um arquivo de imagem válido (JPEG, PNG, WebP, SVG, etc.). Arquivos corrompidos ou com extensões incorretas acionarão este erro.

Favicons gerados parecem desfocados em 16×16. A ferramenta desenha a imagem de origem completa reduzida para 16×16 pixels usando interpolação bilinear (o padrão do navegador). Se sua fonte for uma ilustração detalhada ou contiver texto, o resultado em 16×16 será desfocado. Esta é uma limitação fundamental de dimensionar arte complexa para tamanhos pequenos — projete uma marca simplificada para os alvos 16×16 e 32×32.

"Baixar Tudo" não inicia. A função Baixar Tudo cria um arquivo ZIP usando JavaScript. Se o download não for acionado, verifique se pop-ups e downloads estão permitidos para o site. Você também pode baixar arquivos individuais um por um usando seus respectivos botões de download.

Favicons não estão sendo atualizados no navegador após a implantação. O cache de favicons do navegador é agressivo. Após implantar novos favicons, force a atualização da aba (Ctrl+Shift+R ou Cmd+Shift+R no Mac) ou limpe o cache do navegador. Mudar o nome do arquivo favicon com uma string de consulta de cache-busting (ex.: href="/favicon-32x32.png?v=2") também força a atualização.

A imagem de pré-visualização 512×512 na grade está limitada a 64px. A pré-visualização da grade limita a exibição a Math.min(size, 64) pixels para manter a grade compacta. O arquivo baixado é o PNG correto de 512×512px — o tamanho de exibição pequeno é apenas a pré-visualização.

Privacidade e segurança

O Favicon Generator é executado inteiramente no seu navegador. Sua imagem de origem é carregada em um objeto Image JavaScript usando FileReader.readAsDataURL, depois desenhada em um elemento canvas oculto. Nenhum dado de imagem é enviado a nenhum servidor externo. Todos os nove favicons de saída são gerados localmente a partir de canvas.toDataURL('image/png'). Isso é seguro para logos proprietários, identidades visuais não publicadas e ativos visuais confidenciais. A ferramenta funciona completamente offline depois que a página é carregada.

Perguntas frequentes

O Favicon Generator é gratuito?

Sim, completamente gratuito. Nenhuma conta é necessária, nenhuma marca d'água é adicionada à saída e não há limite de quantas vezes você pode gerar favicons. A Canvas API usada para processamento não tem custo no lado do servidor.

O Favicon Generator funciona offline?

Sim. Depois que a página é carregada, todo o processamento usa a Canvas API nativa do navegador e FileReader. Nenhuma chamada de rede é feita durante o carregamento de imagens, geração de favicons ou download. Funciona sem conexão à internet.

Meus dados estão seguros com o Favicon Generator?

Sim. Sua imagem é lida via FileReader para a memória do navegador e desenhada em um elemento canvas. Nenhum dado de imagem sai do seu navegador. Isso é seguro para logos não publicados, ativos de marca confidenciais e iconografia proprietária.

Quais tamanhos a ferramenta gera?

A ferramenta gera 9 tamanhos: 16×16, 32×32, 48×48, 64×64, 96×96, 128×128, 180×180, 192×192 e 512×512 pixels. Cada um é salvo como PNG com o nome de arquivo padrão para seu caso de uso.

Quais são os nomes de arquivo padrão para cada tamanho?

Os nomes de arquivo seguem os padrões web: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon-64x64.png, favicon-96x96.png, favicon-128x128.png, apple-touch-icon.png (180×180), android-chrome-192x192.png e android-chrome-512x512.png.

A ferramenta gera um arquivo .ico?

Sim. A ferramenta gera automaticamente um arquivo favicon.ico contendo os tamanhos 16, 32 e 48px incorporados como PNGs dentro de um contêiner ICO. Está pronto para implantação com <link rel="icon" type="image/x-icon" href="/favicon.ico">. O arquivo ICO pode ser baixado individualmente ou está incluído no arquivo ZIP "Baixar Tudo".

Para que serve o tamanho 96×96?

O favicon-96x96.png de 96×96 é rotulado como "ícone Google TV" no array de descrição da ferramenta. Historicamente era usado para ícones de aplicativos Google TV e é incluído para completude em um pacote de favicon abrangente.

Posso usar um SVG como imagem de origem?

Sim. A entrada de arquivo aceita image/* e os navegadores modernos podem decodificar SVG usando o elemento <img>. O SVG é rasterizado pelo navegador quando desenhado no canvas. A saída será um PNG rasterizado — não um favicon SVG vetorial — o que é adequado para a maioria dos casos de uso.

Devo usar um fundo transparente na minha imagem de origem?

Sim, se o seu ícone tem um contorno em forma. Fundos transparentes se transferem para a saída PNG. Para ícones colocados nas telas iniciais do iOS (apple-touch-icon.png), o iOS adiciona cantos arredondados automaticamente, então um fundo transparente fica correto. Para favicons de abas do navegador, o fundo da aba do navegador aparece através das áreas transparentes.

O que o botão "Baixar Tudo" faz exatamente?

Ele empacota todos os arquivos gerados em um único arquivo favicons.zip: os 9 PNGs de favicons, o favicon.ico (contendo tamanhos 16, 32 e 48px) e um arquivo site.webmanifest. O ZIP é gerado no seu navegador e baixado como um arquivo.

Ferramentas relacionadas

• Em breve: SVG para PNG — Converta seu logo SVG para um PNG de alta resolução antes de utilizá-lo no Favicon Generator.
• Em breve: Redimensionador de imagens — Redimensione sua arte de origem para um quadrado de 512×512px antes de gerar favicons para obter a saída mais limpa.
• Em breve: Gerador de marcadores de posição — Gere imagens de marcador de posição enquanto aguarda a entrega dos ativos de marca finais.
• Em breve: Conversor de imagens — Converta os PNGs de favicons gerados para WebP ou outros formatos se sua implantação exigir.

Experimente o Favicon Generator agora: Em breve: Glyph Widgets Favicon Generator