Gerador de favicon – ICO, PNG e manifest

Escolha o seu logo; todos os ícones de que a aba do navegador, a tela inicial do celular e o Android precisam, mais o site.webmanifest, ficam prontos num único ZIP. A sua imagem nunca sai do seu dispositivo.

  • PNG vira ICO
  • Até ⁦10 MB⁩
  • Sem cadastro
  • Roda no seu dispositivo

36 Gerador de favicon

  1. 01 Escolha
  2. 02 Processe
  3. 03 Baixe

Processado no seu dispositivo · sem envio

PNG

Arquivo selecionado

Tamanho: Pronto

Status ao vivo

Lendo o arquivo

Resultado

Pronto.

0arquivo(s) no ZIP

0 BDados enviados ao nosso servidor: 0 bytes · processado no seu dispositivoPor que 0: a regra de segurança desta página bloqueia o envio de dados no nível do navegador; tudo acontece nesta aba. CSP · connect-src 'none' · form-action 'none'

Não foi possível converter.

Fundo
Formato

Detalhes muito finos podem sumir em 16 pixels; uma marca simples fica mais legível em tamanhos pequenos.

  • O trabalho é feito nesta aba, no seu dispositivo.
  • ICO, PNGs, manifest e as linhas de HTML vêm em um só ZIP.
  • Nenhum arquivo é enviado ao nosso servidor; fechar a aba apaga tudo.

Escolha um logo primeiro

Etapas

  1. Lendo o arquivo
  2. Desenhando os ícones
  3. Preparando o arquivo

01

De quais arquivos de favicon um site precisa?

O favicon é o pequeno ícone que aparece ao lado do nome do site na aba do navegador, nos favoritos e nos resultados de busca. Um único arquivo não basta: navegadores antigos e novos procuram o favicon.ico, iPhones e iPads procuram um apple-touch-icon de 180 pixels quando o site é adicionado à tela inicial, e o Android e os apps da web instaláveis querem ícones de 192 e 512 pixels, mais um arquivo site.webmanifest.

Os tamanhos pequenos são os mais difíceis: um logo reduzido a 16 pixels pode ficar borrado ou perder detalhes finos. Na tela inicial do iPhone, as áreas transparentes aparecem pretas, então o apple-touch-icon precisa de um fundo sólido.

Esta ferramenta desenha o seu logo (PNG, SVG, JPG ou WEBP) uma vez em 1024 pixels e o reduz pela metade, passo a passo, até cada tamanho, para que os ícones pequenos fiquem nítidos. Você pode escolher uma cor de fundo, a margem e o formato quadrado, arredondado ou circular, e ver o resultado numa prévia da aba do navegador e da tela inicial do celular. O favicon.ico, os PNGs, o site.webmanifest e as linhas HTML para a sua página vêm num único ZIP. A imagem é processada no seu navegador.

02

Crie um conjunto de favicons em 3 passos

  1. Escolha o seu logo: Selecione um arquivo PNG, SVG, JPG ou WEBP quadrado ou quase quadrado (até 10 MB). SVG ou PNG de pelo menos 512 pixels dão o melhor resultado.

  2. Ajuste a aparência: Mantenha o fundo transparente ou escolha uma cor; ajuste a margem e o formato quadrado, arredondado ou circular. As prévias da aba, da tela inicial e do ícone grande se atualizam na hora.

  3. Baixe o ZIP: “Gerar favicons” entrega todos os arquivos num único ZIP. Coloque os arquivos na pasta raiz do site e cole as linhas HTML no <head> da sua página.

03

Para quem é útil

  • Sites e blogs: Preparar o ícone que aparece nas abas e nos favoritos de um site novo.

  • Lojas virtuais: Deixar o logo da loja nos tamanhos certos para a aba do navegador, os resultados de busca e a tela inicial do celular.

  • Apps da web: Gerar os ícones de 192 e 512 pixels e o manifest de um app da web instalável (PWA).

  • Agências e designers: Entregar em minutos um conjunto completo de favicons a partir do logo de um cliente.

  • Desenvolvedores: Ter os arquivos e as linhas do <head> prontos para colocar num projeto.

  • Páginas pessoais: Adicionar um ícone com as suas iniciais a um portfólio ou site de currículo.

04

Tamanhos, qualidade e limites

  • Arquivos gerados: favicon.ico (16, 32 e 48 pixels), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 pixels), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest e as linhas HTML. Se você enviou um SVG, o favicon.svg também é incluído.

  • Nitidez: A imagem é desenhada primeiro em 1024 pixels e depois reduzida pela metade passo a passo; isso dá ícones pequenos mais nítidos do que um único salto grande. Linhas muito finas ainda podem sumir em 16 pixels; um símbolo simples fica mais legível nesse tamanho.

  • Transparência: PNG e ICO mantêm a transparência. O apple-touch-icon é sempre opaco para não ficar preto no iPhone: sem cor de fundo, é usado o branco.

  • Imagem de origem: Imagens que não são quadradas são centralizadas sem corte. Com imagens menores que 256 pixels, os ícones grandes podem ficar borrados; a ferramenta avisa.

  • Formato ICO: As imagens dentro do ICO são guardadas como PNG, um formato que todos os navegadores atuais e o Windows desde o Vista leem.

  • Privacidade e limites: A imagem pode ter até 10 MB. O seu logo não é enviado nem armazenado; todos os arquivos são gerados no seu navegador.

05

Privacidade e exclusão automática

Esta ferramenta não envia seu arquivo ao nosso servidor: todo o processamento acontece no seu navegador, no seu dispositivo. A página é servida com uma política de segurança (Content-Security-Policy) que impede tecnicamente que o conteúdo do arquivo seja enviado a qualquer lugar; nenhum script de análise ou de publicidade roda nesta página.

O arquivo de resultado também é criado no seu dispositivo, e só você faz o download. Ele é apagado da memória do navegador quando você fecha a aba ou escolhe “Novo arquivo”. Nosso servidor não guarda nenhum registro de nome ou conteúdo de arquivo deste processamento.

Leia nossa Política de Privacidade para mais detalhes

06

Perguntas frequentes

Que tamanhos o favicon deve ter?

16 e 32 pixels para abas e favoritos (mais 48 dentro do favicon.ico), um apple-touch-icon de 180 pixels para a tela inicial do iPhone, e 192 e 512 pixels para o Android e os apps da web instaláveis. A ferramenta gera todos de uma vez.

Como coloco o favicon no meu site?

Envie os arquivos do ZIP para a pasta raiz do site (logo abaixo do domínio) e cole as linhas HTML da ferramenta no <head> da sua página. Em sistemas como o WordPress, basta enviar o PNG de 512 pixels como “Ícone do site”.

Posso criar um favicon a partir de um logo em SVG?

Sim, e o SVG dá o melhor resultado: cada tamanho é desenhado a partir do vetor. A ferramenta também inclui o favicon.svg, que os navegadores compatíveis mostram nítido em qualquer tela.

Por que o meu ícone fica com fundo preto no iPhone?

O iOS não aceita transparência nos ícones da tela inicial e mostra as áreas transparentes em preto. Por isso a ferramenta sempre gera o apple-touch-icon opaco, usando branco quando você não escolhe um fundo. Se quiser, escolha uma cor que combine com a sua marca.

Troquei o ícone, mas o navegador ainda mostra o antigo. Por quê?

Os navegadores guardam o favicon em cache por muito tempo. Force a atualização (Ctrl+F5, ou Cmd+Shift+R no Mac), abra a página numa janela anônima ou acrescente algo como ?v=2 ao nome do arquivo na linha HTML.

O meu logo é enviado a um servidor?

Não. A imagem é desenhada no seu navegador e todos os arquivos são gerados ali; a página vem com uma política de segurança que bloqueia tecnicamente conexões com o exterior. Você pode usá-la com segurança para uma marca que ainda não é pública.

Mais um arquivo?

Arraste · solte · convertaEscolha um arquivo