SVG, PNG e ICO resolvem problemas diferentes. Escolher apenas pelo tamanho do arquivo costuma gerar resultados ruins: um formato pode ser leve, mas inadequado para o local em que será exibido.

A decisão deve considerar escalabilidade, transparência, compatibilidade, possibilidade de animação e a forma como o arquivo será integrado ao projeto.

Use SVG para interfaces e bibliotecas escaláveis

SVG descreve formas por meio de vetores. Por isso, o mesmo arquivo pode ser exibido em 16 ou 512 pixels sem perder nitidez. É a melhor opção para ícones de interface, logotipos simples e bibliotecas que precisam de cores controláveis por CSS.

O formato também suporta acessibilidade, animações e otimizações de código. Entretanto, imagens fotográficas ou com milhares de detalhes não são boas candidatas a uma conversão vetorial automática.

  • Escala sem pixelização.
  • Pode receber cor e animação por CSS.
  • É adequado para componentes reutilizáveis.
  • Deve ser sanitizado quando vier de fontes não confiáveis.

Use PNG quando precisar preservar pixels e transparência

PNG é um formato raster sem perda, indicado para imagens com transparência, capturas de tela e artes que precisam manter exatamente os pixels originais. Ele funciona de maneira consistente em navegadores, editores e aplicativos.

A principal limitação é a resolução fixa. Um PNG de 32 pixels ficará borrado se for ampliado. Para telas de alta densidade, exporte uma versão maior e defina o tamanho visual com CSS.

Use ICO principalmente para favicons

ICO funciona como um contêiner que pode armazenar várias resoluções. O navegador escolhe a versão mais apropriada para a aba, os favoritos ou o atalho. Essa característica torna o formato especialmente útil para favicon.

Ele não é a melhor opção para componentes de interface ou imagens exibidas dentro da página. Nesses casos, SVG ou PNG oferecem fluxo de trabalho e controle superiores.

Combine formatos em vez de escolher apenas um

Um projeto web normalmente usa SVG para os ícones da interface, PNG para imagens raster e ICO para favicon. Não há conflito em manter versões diferentes da mesma identidade visual, desde que todas sejam geradas a partir de uma origem consistente.

public/
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png
└── icons/
    ├── search.svg
    ├── user.svg
    └── logo.png

Escolha com base no uso real

Antes de exportar, responda: o ícone precisa mudar de cor? Será ampliado? Precisa funcionar em navegadores antigos? É uma fotografia? Será usado como favicon? Essas respostas conduzem a uma escolha mais confiável do que uma regra única.

  • Interface e sistema de design: SVG.
  • Imagem raster com transparência: PNG.
  • Favicon com múltiplos tamanhos: ICO acompanhado de PNG.
  • Prévia social ou imagem rica: PNG ou JPEG, conforme a arte.

Perguntas frequentes