O essencial: favicon.ico (16, 32, 48) para navegadores, favicon-32x32.png e 16x16.png, apple-touch-icon.png (180) para iOS e android-chrome 192/512 para PWAs. Esta ferramenta gera todos eles.
Carregando ferramenta… / Loading tool…
Gere o favicon.ico multi-resolução e todos os PNGs do set a partir de uma única imagem, com snippet HTML pronto.
Antigamente, um favicon.ico na raiz do site resolvia. Hoje, um site precisa de um conjunto de ícones: a aba do navegador quer 16 e 32 px, o iOS quer o apple-touch-icon de 180 px para a tela inicial, e uma PWA (aplicativo web instalável) quer PNGs de 192 e 512 px descritos num web manifest. Esquecer um formato resulta em ícone borrado ou genérico em algum contexto. Esta ferramenta gera todo o conjunto de uma vez a partir de uma única imagem, o favicon.ico multi-resolução, os PNGs, o site.webmanifest e o snippet HTML pronto para colar no <head>. Tudo é processado no seu navegador; a imagem não é enviada a servidor algum.
Não existe "um" favicon: existe um conjunto, porque cada plataforma usa o ícone de um jeito. Os PNGs de 16 e 32 px aparecem na aba e nos favoritos do navegador. O apple-touch-icon (180 px) é o que o iPhone usa quando você adiciona o site à tela inicial. Os PNGs de 192 e 512 px são para PWAs e para o Android, e ficam descritos no manifest.
O favicon.ico ainda importa como fallback universal, navegadores antigos e alguns contextos o buscam automaticamente na raiz. Por isso a ferramenta gera todos: cobrir o conjunto evita o ícone borrado (quando um tamanho falta e o navegador redimensiona outro) ou o quadrado genérico (quando nada é encontrado).
O formato ICO é especial: ele pode embutir várias resoluções (16, 32, 48 px) dentro de um único arquivo. Assim, o sistema ou o navegador escolhe a versão do tamanho certo para cada contexto, uma aba pequena usa a de 16, um atalho maior usa a de 48, mantendo a nitidez sem depender de redimensionamento na hora.
Sobre o enquadramento: como favicons são quadrados, uma imagem quadrada evita cortes. No modo Preencher, uma imagem retangular é recortada ao centro para caber no quadrado; no modo Conter, ela é encaixada inteira, com margem ao redor. Cantos arredondados e cor de fundo ajudam a adaptar um logo ao formato de ícone.
O site.webmanifest é um pequeno arquivo JSON que descreve o site como aplicativo: nome, cores e a lista de ícones (os PNGs 192 e 512). É ele que permite "instalar" a PWA e exibir um ícone bonito na tela inicial em vez de um recorte da página. A ferramenta já gera esse arquivo referenciando os PNGs corretos.
O snippet HTML acompanha tudo: são as tags <link> e <meta> que apontam para o favicon.ico, os PNGs, o apple-touch-icon e o manifest. Basta colá-lo dentro do <head> do seu site. Sem esse snippet, os arquivos existem mas o navegador não sabe onde procurá-los, colar as referências é o passo que ativa o conjunto.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/gerador-favicon"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Gerador de Favicon"
></iframe>O essencial: favicon.ico (16, 32, 48) para navegadores, favicon-32x32.png e 16x16.png, apple-touch-icon.png (180) para iOS e android-chrome 192/512 para PWAs. Esta ferramenta gera todos eles.
A geração acontece inteiramente no seu navegador. Nenhuma imagem é enviada a qualquer servidor.