SVG, PNG e ICO resuelven problemas diferentes. Elegir solo por el tamaño del archivo puede producir un resultado inadecuado para el lugar donde se mostrará.

Considera la escala, transparencia, compatibilidad, animación y la forma de integrar el recurso en el proyecto.

Usa SVG para interfaces y bibliotecas escalables

SVG describe formas vectoriales, por lo que mantiene nitidez a 16 o 512 píxeles. Es ideal para iconos de interfaz, logotipos simples y bibliotecas con colores controlados por CSS.

También admite accesibilidad y animaciones. Las fotografías y artes extremadamente detalladas no son buenas candidatas para conversión vectorial automática.

  • Escala sin pixelación.
  • Puede recibir color y animación por CSS.
  • Funciona bien en componentes reutilizables.
  • Debe sanearse si procede de una fuente no confiable.

Usa PNG para conservar píxeles y transparencia

PNG es un formato raster sin pérdida, apropiado para transparencias, capturas y artes que deben mantener los píxeles originales.

Su resolución es fija. Un PNG de 32 píxeles se verá borroso al ampliarlo, por lo que debes preparar suficiente densidad para pantallas modernas.

Usa ICO principalmente para favicons

ICO puede contener varias resoluciones en un solo archivo. El navegador selecciona la más adecuada para pestañas, favoritos o accesos directos.

No es la mejor opción para componentes dentro de la página, donde SVG o PNG ofrecen mayor control.

Combina formatos

Un proyecto web normal usa SVG para la interfaz, PNG para imágenes raster e ICO para favicon. Las versiones pueden convivir si parten de una identidad visual coherente.

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

Decide según el uso real

Pregunta si el icono debe cambiar de color, escalar, funcionar en navegadores antiguos, representar una fotografía o actuar como favicon.

  • Interfaz y sistema de diseño: SVG.
  • Imagen raster con transparencia: PNG.
  • Favicon con varios tamaños: ICO más PNG.
  • Vista previa social: PNG o JPEG.

Preguntas frecuentes