DevToolPal
PT

Gerador de favicon

Crie um favicon a partir de texto, emoji ou do seu logo: favicon.ico, PNGs em vários tamanhos, Apple touch icon, web manifest e tags HTML em um ZIP.

Roda localmente, nada é enviado

Opções

Origem
Formato

Prévia

HTML para o <head>

O que esta ferramenta faz

O Gerador de favicon transforma uma letra, um emoji ou o seu logo em todos os ícones de que um site moderno precisa. Ele renderiza o ícone em cada tamanho, empacota o favicon.ico, escreve um web app manifest e entrega as tags <link> para você colar no <head> da página. Baixe tudo em um único ZIP.

Partir de um texto é o jeito mais rápido de ter um ícone limpo: digite de um a três caracteres ou um emoji e escolha cores, fonte e formato (quadrado, arredondado ou círculo). Ícones de texto também ganham um favicon.svg escalável, que fica nítido em qualquer tamanho e em telas de alta densidade.

Como usar

  1. Escolha Texto ou Imagem como origem. Para imagem, clique em Escolher imagem… e selecione um PNG, SVG ou JPG quadrado.
  2. Defina o Formato e ative Preencher fundo para colocar o ícone sobre um bloco colorido, ou desative para mantê-lo transparente.
  3. Informe o Nome do site: é o rótulo que aparece embaixo do ícone quando alguém adiciona o seu site à tela inicial do celular, gravado no site.webmanifest (Android) e na tag apple-mobile-web-app-title (iOS). Depois defina a Pasta dos ícones para onde você vai enviar os arquivos, normalmente /.
  4. Confira a prévia: o ícone de 16 px é o que as pessoas veem na aba do navegador.
  5. Clique em Baixar ZIP, envie os arquivos para o seu site e cole o HTML no <head>.

Exemplo

As configurações padrão geram estas tags:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">

Dicas

  • Navegadores guardam favicons em cache de forma agressiva. Depois de trocar um ícone, abra a página em uma janela anônima para ver a mudança.
  • O iOS ignora a transparência do Apple touch icon e a preenche de preto, então mantenha o fundo preenchido para ter um ícone limpo na tela inicial.

Perguntas frequentes

› Quais arquivos eu recebo?

favicon.ico (16, 32 e 48 px), ícones PNG de 16, 32 e 48 px, um Apple touch icon de 180 px, ícones Android de 192 e 512 px, o site.webmanifest, as tags HTML e o favicon.svg quando você parte de um texto.

› Meu logo é enviado para algum lugar?

Não. A imagem é lida e redimensionada no seu navegador com um canvas; o ZIP também é montado no seu dispositivo.

› Que tipo de imagem funciona melhor?

Um PNG ou SVG quadrado de pelo menos 512 × 512 px com fundo transparente. Formas simples e marcantes continuam legíveis em 16 px; detalhes finos e texto fino, não.

› Ainda preciso do favicon.ico?

Sim, para navegadores antigos e para ferramentas que pedem /favicon.ico diretamente. Navegadores modernos usam os links PNG ou SVG do HTML.