Guarda tu logo maestro como SVG, porque un SVG almacena las formas (un círculo aquí, una curva allá, este color) y el navegador las dibuja al tamaño que la página pida. Un PNG almacena una cuadrícula de píxeles de color capturada a un solo tamaño. Si la muestras más grande de lo que se hizo, el navegador tiene que inventar los píxeles que faltan, y por eso un logo PNG ampliado se ve borroso. Genera copias PNG a partir del SVG en los lugares que lo exijan, y conserva el SVG como original.
Cuál es la diferencia real entre un logo vectorial y uno de mapa de bits
Una imagen de mapa de bits es una medición. Alguien miró el logo a través de una cuadrícula de 400 × 100 y anotó el color de cada una de las 40.000 celdas. Nada en el archivo sabe que las celdas 12 a 19 de la fila 30 eran el borde de una letra. Una imagen vectorial guarda la intención: dibuja un círculo de radio 40 en este punto, con este color. Volver a dibujarlo a 40 o a 4.000 píxeles de ancho es la misma instrucción con otro factor de escala.
El costo es el tipo de imagen que cada formato puede contener. Un logo hecho de colores planos, bordes limpios y unas pocas decenas de formas es casi el mejor caso para los vectores. Una fotografía es el peor: describirla con formas ocupa más datos que registrar los píxeles, y por eso las fotos se quedan en JPG, WebP y PNG mientras que los logos tienen elección.
Por qué mi logo PNG se ve borroso en un teléfono
Porque los píxeles CSS y los píxeles del dispositivo son unidades distintas. Un teléfono con densidad de píxeles 3 pone nueve píxeles del dispositivo detrás de cada píxel CSS (tres de ancho, tres de alto). Un logo mostrado a 200 píxeles CSS de ancho se dibuja con 600 píxeles del dispositivo a lo ancho. Si tu PNG mide 200 píxeles de ancho, el navegador lo estira tres veces y los bordes se suavizan. La solución habitual es exportar el PNG a dos o tres veces el tamaño de visualización y reducirlo con CSS, y repetir el ejercicio cada vez que el diseño cambia de tamaño o aparece una pantalla nueva.
Un SVG se salta el ejercicio. El navegador lo rasteriza a la resolución real del dispositivo, así que un borde nítido sigue nítido en un monitor 1x de oficina, en un teléfono 3x y en un proyector. Un archivo, sin srcset. El límite práctico está en el otro extremo: si el logo aparece a 16 píxeles, las líneas finas y los huecos pequeños dejan de verse a cualquier resolución, y una versión simplificada dibujada para tamaños pequeños se verá mejor que el logo completo reducido.
Funciona un SVG en la firma de un correo y como favicon
Un favicon y la firma de un correo dan respuestas opuestas.
- Favicon: sí, con un respaldo. Chrome, Edge y Firefox actuales aceptan un icono SVG, y se mantiene nítido en la pestaña, en los marcadores y en una pantalla de alta densidad. El soporte en otros navegadores es más irregular y los antiguos lo ignoran, así que conserva un
favicon.icoa su lado. La guía de tamaños de favicon lista qué publicar, y un icono SVG puede llevar una reglaprefers-color-schemepara que un logo oscuro no desaparezca en una barra de pestañas oscura. - Firma de correo: no. Los clientes de correo muestran imágenes de una lista corta de formatos, y SVG no figura en ella de forma confiable: Gmail y las versiones de escritorio de Outlook son los que hay que tener en cuenta, y tus destinatarios usan lo que usan. El logo de una firma debería ser un PNG, exportado a dos o tres veces su tamaño de visualización para que se vea nítido en un teléfono, con el ancho fijado en el HTML para que se muestre al tamaño menor.
- Imágenes para redes y para compartir: de mapa de bits. Las vistas previas Open Graph, muchas cargas de foto de perfil y casi todos los formularios de publicación de los marketplaces piden PNG o JPG y rechazan SVG sin más.
- Impresión: envía el SVG, o un PDF o EPS exportado desde la misma fuente, si la imprenta acepta vectores. Una imprenta puede escalarlo a una tarjeta de visita o a una lona sin que haya una pregunta de resolución.
Cómo saco PNG de un SVG sin un programa de diseño
El conversor de imágenes abre un SVG como lo hace el navegador y lo escribe como PNG, JPG o WebP, todo en tu dispositivo. Tiene dos límites. Dibuja el SVG al tamaño que declara el archivo, así que un logo cuyo elemento raíz dice width="24" height="24" sale como un PNG de 24 píxeles. Para obtener 600 píxeles, edita primero esos dos atributos en el SVG. Y un SVG que solo tiene un viewBox y no tiene width ni height no tiene tamaño intrínseco, y los navegadores no coinciden en qué asumir, así que defínelos de forma explícita. El conversor solo va de SVG a mapa de bits. No convierte un PNG de vuelta en vector, porque eso exige vectorizar, que es otro trabajo.
Para los iconos, el generador de favicon acepta un SVG como fuente y construye a partir de él el .ico multitamaño y el juego de PNG. No pasa tu propio SVG tal cual como icon.svg: ese archivo solo se produce en su modo de letra. Si quieres el icono SVG, copia tu propio archivo a la raíz del sitio y agrega la etiqueta link a mano.
Cuándo es realmente correcto un PNG
- El logo ya es un mapa de bits. Si todo lo que tienes es un PNG de 300 píxeles de un diseñador anterior, envolverlo en una etiqueta SVG no cambia nada: los píxeles de adentro son los mismos. Compruébalo abriendo el SVG en un editor de texto. Si ves una cadena
base64larga y ninguna forma, es un PNG disfrazado. - El destino rechaza SVG. Correo, vistas previas al compartir, algunas tiendas de aplicaciones y muchos formularios de carga.
- La ilustración es en la práctica una textura. La pintura con pincel, el grano y los efectos fotográficos no tienen una descripción corta. Un SVG de una pintura vectorizada puede pesar varias veces lo que pesaba el PNG del que salió.
- Un tamaño diminuto y fijo. Un icono de 32 píxeles dibujado a mano sobre una cuadrícula de píxeles puede superar a un vector escalado a ese tamaño exacto.
Qué puede salir mal con los logos SVG
El texto es lo habitual. Un SVG que contiene un elemento <text> nombra una fuente y depende de que quien lo ve la tenga, así que el logotipo aparece con una tipografía de reemplazo en la máquina de otra persona. Convierte el texto a contornos antes de exportar. Después, revisa el archivo por si quedaron restos del editor: algunos programas escriben capas ocultas, metadatos y coordenadas enormes, y un logo simple que pesa 200 KB merece una mirada. Por último, un SVG puede contener scripts y referencias externas, así que trata un archivo de origen desconocido como cualquier archivo que puede ejecutar código, y no lo pegues directamente en una página que controlas.
El conversor de imágenes hace las copias PNG en tu dispositivo sin subir el logo, y muestra cuánto cambió el tamaño respecto del archivo con el que empezaste. Para la pestaña del navegador, qué tamaños de favicon necesitas de verdad es la siguiente pregunta una vez resuelto el SVG, y qué tamaño deben tener las imágenes de un sitio web cubre las imágenes que siguen siendo de mapa de bits.
Preguntas frecuentes
¿Es mejor un SVG que un PNG para un logo?
Para el archivo maestro, sí. Un SVG almacena el logo como formas, así que se mantiene nítido a cualquier tamaño y en cualquier densidad de pantalla, y un logo simple suele pesar unos pocos kilobytes. El PNG sigue siendo la exportación correcta para los lugares que rechazan SVG, como las firmas de correo, las vistas previas al compartir y muchos formularios de carga.
¿Puedo usar un logo SVG en la firma de un correo?
No de forma confiable. Los clientes de correo aceptan imágenes de una lista corta de formatos y SVG no es fiable en ella, con Gmail y Outlook de escritorio como los puntos problemáticos habituales. Usa un PNG exportado a dos o tres veces el tamaño con el que se mostrará, y fija el ancho de visualización en el HTML para que se vea nítido en teléfonos de alta densidad.
¿Puedo usar un SVG como favicon?
Sí en las versiones actuales de Chrome, Edge y Firefox, y se mantiene nítido a cualquier tamaño. El soporte en otros navegadores es menos consistente y los antiguos lo ignoran, así que publica también un favicon.ico y un PNG apple-touch-icon. Los navegadores piden /favicon.ico por su cuenta, así que ese archivo funciona incluso cuando tu markup no.
¿Cómo convierto un SVG a PNG sin subirlo?
Usa un conversor que corra en el navegador. El navegador decodifica el SVG y la página lo escribe como PNG, así que el archivo se queda en tu dispositivo. El PNG sale al tamaño que el SVG declara en sus atributos width y height, así que fija esos valores al tamaño en píxeles que quieras antes de convertir.
¿Por qué se ve borroso mi logo SVG?
Normalmente el SVG es un mapa de bits disfrazado: contiene un PNG o JPG incrustado, y al abrirlo en un editor de texto verás una cadena base64 larga en lugar de formas. Un vector real no puede borronearse por escalado. Si contiene formas y aun así se ve suave, puede que las formas sean líneas finas mostradas mucho más pequeñas de lo que se dibujaron.
¿Convertir un logo PNG a SVG lo vuelve nítido?
Por sí solo no. Guardar o renombrar un PNG como SVG solo envuelve los mismos píxeles. Para obtener un vector de verdad hay que volver a dibujar el logo, o vectorizarlo con un programa, que aproxima los bordes con formas y normalmente necesita retoques a mano después.
Última actualización 6 de octubre de 2026
