PNG para ICO – guia completo

Autor: IcoSmith • Atualizado em 28 set 2025

Favicons ainda dependem do formato ICO para compatibilidade universal. Veja como transformar um PNG em um ICO nítido com vários tamanhos e publicar tudo de forma profissional.

Teste agora: abra o IcoSmith, solte seu PNG, escolha 16, 32, 48, 64, 128, 256 e exporte o arquivo ICO ou o pacote de favicon com tags.

Por que ICO ainda importa

ICO é o formato mais compatível para favicons. Ele agrupa vários bitmaps (16–256) em um único arquivo, garantindo nitidez em Windows/legado e navegadores diversos. O setup moderno costuma incluir ICO + PNG Apple Touch + SVG de máscara.

Tamanhos recomendados

Abas clássicas: 16×16, 32×32
Hi‑DPI desktop: 48×48, 64×64
Windows/contextos grandes: 128×128, 256×256
Apple Touch (PNG): 180×180
Ícone de máscara (SVG): Safari pinned tab

Snippet completo do head

Cole no <head> do seu site e ajuste rotas/cores conforme necessário.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0f172a">
<meta name="theme-color" content="#0A0F1E">

Por que ainda usar ICO

ICO pode incluir múltiplos bitmaps em um único arquivo. Windows e cenários legados esperam favicon.ico na raiz do site. Publicar um ICO evita surpresas.

Passo a passo

Abra o IcoSmith e envie seu PNG (ou clique para escolher).
Selecione os tamanhos acima. Mantenha fundo transparente sempre que possível.
Revise o resultado em 16–32 px; ajuste o perfil “nítido/suave” se necessário.
Exporte o ICO ou o pacote de favicon com tags, PNGs e manifest.

Publicando no site

Coloque o favicon.ico na raiz e adicione as tags geradas no <head>. Recomendamos também PNG 180×180 e SVG de máscara. Veja tamanhos e checklist.

Diagnóstico rápido

Borrado em 16 px: simplifique a marca ou use o perfil nítido.
Fundo incorreto: mantenha PNG transparente ou defina cor sólida.
Cache do navegador: hard refresh ou sufixo ?v=2.

SEO e desempenho

Mantenha o ICO enxuto; evite tamanhos desnecessários.
Inclua Apple Touch e SVG de máscara para cobrir todos os contextos.
Reserve espaço para UI/ads dinâmicos e evite CLS.

Pronto? Gere seu favicon agora. Explore também PNG → ICO, JPG → ICO e SVG → ICO.