Como criar favicon.ico a partir de um PNG, no navegador

Publicado em 12 de setembro de 2026

Dá para criar um favicon.ico a partir de um PNG ou WebP em segundos, de graça e no navegador, com os tamanhos 16, 32 e 48 e uma prévia da aba antes de baixar. Veja como.

Por que o favicon.ico ainda importa

O favicon é o ícone que aparece na aba do navegador, nos favoritos e ao lado do seu site nos resultados do Google. Hoje os navegadores aceitam PNG e SVG como favicon, mas o .ico continua sendo o formato que todo mundo entende: navegadores antigos, o Windows ao criar atalhos de site e vários leitores de feed procuram "/favicon.ico" na raiz do domínio mesmo sem nenhuma tag na página. Um .ico bem feito guarda vários tamanhos num arquivo só, e cada programa pega o que precisa.

A ferramenta do AtlasDocs recebe um PNG ou WebP, reduz a imagem para cada tamanho do preset escolhido, monta o .ico com essas versões e mostra uma prévia da aba clara e escura antes de você baixar. O próprio favicon do AtlasDocs foi gerado por ela.

Como criar o favicon.ico, passo a passo

Abra a ferramenta PNG → ICO (favicon) e envie um PNG ou WebP, de preferência quadrado, com fundo transparente e 256 pixels ou mais. Se enviar mais de uma imagem, só a primeira é usada e a tela avisa qual.
Escolha em "Tamanhos do favicon" o preset: "Padrão (16 + 32 + 48)" para site, "Mínimo (só 32)" para o arquivo mais leve possível ou "Ícone do Windows (16 + 32 + 48 + 256)" para atalho de programa.
Se a imagem for pixel art, marque "Pixel art (sem suavizar)" para reduzir sem borrar os pixels. Para logos e desenhos comuns, deixe desmarcado.
Clique em "Gerar favicon.ico". O botão mostra as etapas "Lendo a imagem…", "Reduzindo…" e "Montando o ICO…" e a prévia "Como vai aparecer" surge logo abaixo, com o tamanho em bytes de cada entrada e o total.
Confira a prévia e clique em "Baixar favicon.ico". Use "Copiar linha do <head>" para copiar a tag pronta para colar no HTML do site.

Converter PNG para ICO (favicon) →

Nada sai do seu computador: a leitura, a redução e a montagem do .ico rodam no seu navegador, sem motor externo e sem enviar a imagem a servidor nenhum.

Qual preset escolher

"Padrão (16 + 32 + 48)": para site. O 16 vai na aba, o 32 nas telas de alta resolução e na barra de tarefas, e o 48 é o que o Google usa nos resultados de busca (ele reduz para 16). Alvo de até 10 KB.
"Mínimo (só 32)": o arquivo mais leve. Os navegadores reduzem o 32 para a aba sozinhos; serve quando cada byte conta.
"Ícone do Windows (16 + 32 + 48 + 256)": para atalho de programa ou pasta no Windows, que usa a versão de 256 pixels nos ícones grandes. Fica pesado por natureza e não é para site; por isso esse preset não recebe aviso de tamanho.

Só PNG ou WebP: e se a minha imagem for JPG?

JPG não é aceito de propósito: o formato não tem transparência, e um favicon com fundo branco quadrado fica feio na aba escura. A verificação é pelo conteúdo do arquivo, não pela extensão, então renomear um .jpg para .png não engana a ferramenta, que responde "Envie um PNG ou WebP". O caminho certo é converter o JPG em PNG antes, usando o conversor de formato de imagem, e de preferência recortar a imagem em quadrado num editor. GIF e SVG também não entram; WebP animado é aceito, mas só o primeiro quadro é usado.

Converter formato de imagem →

Avisos que podem aparecer e o que significam

"A imagem não é quadrada": o favicon é sempre quadrado, então a imagem foi centralizada com transparência nas laterais, sem esticar. Se sobrou muita margem, recorte a imagem antes.
"Houve ampliação e o ícone pode sair borrado": a imagem enviada é menor que o maior tamanho do preset (por exemplo, um PNG de 24 pixels num preset que pede 48). Use uma origem com 256 pixels ou mais.
"Acima do alvo de 10 KB": o .ico ficou maior que o recomendado para site. Fotos e degradês pesam mais que logos simples; simplifique a imagem ou use o preset mínimo.
"Acima do teto de 20 KB para favicon": mesmo conselho, com mais urgência. O aviso nunca bloqueia o download; é você quem decide.
"WebP animado: só o primeiro quadro foi usado": favicon não anima; a ferramenta pega o primeiro quadro.

Como colocar o favicon no site

Envie o arquivo para a raiz do site, de modo que ele responda em "/favicon.ico", e adicione no <head> das páginas a linha que a ferramenta copia para você: <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> (os tamanhos listados são exatamente os que entraram no arquivo). Em projetos Next.js com App Router, basta colocar o arquivo em "app/favicon.ico", sem tag. Se o ícone antigo continuar aparecendo depois da troca, é o cache do navegador: abra o site numa janela anônima para conferir a versão nova.

A prévia: por que conferir antes de baixar

A prévia é montada a partir do .ico gerado, não da imagem original, então mostra o que o navegador vai exibir de verdade. Você vê o ícone numa "Aba clara" e numa "Aba escura" (a menor entrada em 16 pixels), na "Tela 2×", que usa o 32, e em "48 reduzido a 16, como no Google". Abaixo, uma faixa xadrez mostra cada entrada no tamanho real: o que aparece do xadrez é transparente. Logo com traços finos some em 16 pixels; se isso acontecer, simplifique o desenho e gere de novo.

O formato ICO só representa até 256 pixels por lado, e as entradas são gravadas como PNG dentro do arquivo, com transparência de 32 bits. O nome de saída é sempre "favicon.ico"; renomeie depois se precisar de outro.