Sem upload, 100% local, sem conta

Gerador de Favicon

Faça upload do seu logotipo ou ícone e baixe todos os tamanhos padrão de favicon como PNG. Inclui Apple Touch Icon e ícones PWA. Nada sai do dispositivo.

Como o Gerador de favicon funciona

O Gerador de Favicon pega qualquer imagem que você fornecer e a redimensiona para as dimensões padrão de favicon usando a API Canvas drawImage: 16x16, 32x32, 48x48, 180x180 (ícone Apple touch), 192x192 (Android Chrome) e 512x512 (manifesto PWA). Todos os seis tamanhos são gerados no seu navegador e baixados como arquivos PNG individuais. Sua imagem de origem nunca sai do seu dispositivo.

Um conjunto completo de favicon cobre toda a gama de ícones de aba do navegador, favoritos, atalhos de tela inicial e telas iniciais de PWA. Usar uma imagem de origem em alta resolução (pelo menos 512x512 pixels) dá ao algoritmo de redução mais detalhes para trabalhar. As tags de link HTML que você precisa para referenciar cada arquivo gerado são mostradas em um snippet que você pode copiar diretamente para o elemento head da sua página.

Escrito por Bastien Sulyan

Como usar o Gerador de favicon, passo a passo

  1. Arraste sua imagem de origem para a área de upload. Use uma imagem quadrada de 512 px ou maior para melhores resultados.
  2. Pré-visualize os seis tamanhos gerados no painel de resultados.
  3. Baixe cada um dos seis arquivos PNG individualmente no painel de resultados.
  4. Copie o snippet HTML mostrando as tags de link para todos os tamanhos.
  5. Coloque os arquivos PNG na raiz do seu site e cole as tags de link no cabeçalho da sua página.

Casos de uso comuns

  • Um desenvolvedor configura um novo site e precisa de todos os tamanhos de favicon gerados a partir do logo da marca sem uma assinatura de ferramenta de design.
  • Um autor de PWA gera os ícones 192x192 e 512x512 necessários no manifesto do aplicativo web para instalação na tela inicial.
  • Um blogueiro atualiza a identidade do site e substitui o favicon padrão por um ícone personalizado criado a partir do seu logo.
  • Um freelancer produz rapidamente o conjunto completo de favicon para um projeto de cliente sem esperar instalar software de design offline.

Perguntas frequentes

Quais formatos de imagem posso usar como origem?

Qualquer formato que o navegador possa decodificar funciona como entrada: JPEG, PNG, WebP, GIF e SVG. Para origens SVG, o navegador rasteriza o vetor para um Canvas antes de redimensionar, portanto os PNGs de saída são imagens raster independentemente.

Por que meu favicon está borrado na aba do navegador?

Os tamanhos 16x16 e 32x32 são muito pequenos. Se a imagem de origem contém detalhes finos ou linhas finas, eles não sobreviverão à redução. Um design simples e arrojado com formas claras funciona muito melhor em tamanhos pequenos do que uma ilustração complexa.

A ferramenta gera arquivos ICO?

Sim. Além dos seis PNGs, a ferramenta monta um favicon.ico reunindo as imagens de 16x16, 32x32 e 48x48 em um único arquivo, que é o que navegadores Windows mais antigos e alguns rastreadores ainda procuram na raiz do site. Navegadores modernos ficam satisfeitos com os links PNG, então publicar os dois não custa nada e deixa cada cliente escolher.

A imagem de origem é processada em um servidor?

Não. As chamadas Canvas drawImage que produzem cada tamanho são executadas na aba do seu navegador. A imagem de origem é lida do seu disco local e as seis saídas PNG são criadas na memória e oferecidas como downloads. Nenhum dado de arquivo passa por um servidor.

Qual tamanho devo usar para o ícone Apple touch?

iOS e iPadOS usam o PNG de 180x180 pixels referenciado pela tag de link apple-touch-icon. Este tamanho é usado quando um usuário adiciona seu site à tela inicial em um dispositivo Apple. A ferramenta gera este arquivo junto com os outros tamanhos.

Posso usar uma imagem retangular como origem?

Sim, mas a saída terá barras horizontais ou verticais para caber no canvas quadrado. Para melhores resultados, comece com uma imagem quadrada ou recorte sua imagem de origem para um quadrado antes de usar a ferramenta.

Ferramentas relacionadas

Mantenha tudo local, explore ferramentas complementares.

Todas as ferramentas de imagem