Gerador de favicon

Crie favicon.ico, ícones de app e site.webmanifest de uma só vez a partir de uma imagem ou texto. Você também pode deixar o fundo transparente.

Sem envio de arquivos · Tudo é processado neste navegador

Entrada e opções

Tipo de entrada
Fundo
#FFFFFF
12%
Formato do ícone
6%
Dados do app (site.webmanifest)

O iOS mostra áreas transparentes em preto, então o apple-touch-icon é preenchido com esta cor.

Pré-visualização

Xadrez = transparente

Escolha uma imagem para ver a pré-visualização aqui.

My Website
https://example.com
My Website

Baixar

  • favicon.ico
  • favicon-16x16.png
  • favicon-32x32.png
  • apple-touch-icon.png
  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • site.webmanifest

Código para colar no <head>

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<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="manifest" href="/site.webmanifest">

Coloque o favicon.ico na raiz do site e os navegadores vão encontrá-lo automaticamente.

Perguntas frequentes

Minhas imagens são enviadas a um servidor?

Não. A leitura, a remoção do fundo, o redimensionamento e a criação do ZIP acontecem dentro deste navegador.

Como funciona a remoção de fundo de cor sólida?

Os pixels parecidos com a cor escolhida ficam transparentes. Por padrão, só as áreas ligadas à borda são removidas, então a mesma cor dentro do seu logotipo é mantida. Aumente a tolerância para remover uma faixa maior de cores.

Quais arquivos são gerados?

favicon.ico (16, 32 e 48 px), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png e site.webmanifest.

Onde coloco os arquivos?

Descompacte-os na raiz do seu site e cole o código fornecido dentro do <head>. Se o favicon.ico estiver na raiz, os navegadores o encontram automaticamente.