Cómo exportar un logotipo para una web, un correo y un documento

Un logo que se ve bien en el programa de diseño puede aparecer diminuto, borroso o invisible al subirlo. Puede deberse a márgenes vacíos, pocos píxeles, una fuente ausente o un fondo inadecuado. Primero determina dónde se mostrará y después elige los ajustes de exportación.

Empieza por el mejor original disponible

Trabaja con el archivo editable del diseñador o una auténtica versión vectorial. Guarda ese original separado de las copias que publiques. Un SVG puede conservar trazados vectoriales, pero también contener un mapa de bits de baja resolución. La extensión .svg no demuestra que todas las partes sigan nítidas al ampliarlas.

Si solo tienes un JPG pequeño, pide el original antes de exportar una versión mayor. Convertirlo a PNG o SVG no reconstruye las letras ni los bordes. La guía de SVG y PNG te ayudará a identificar el archivo que tienes.

Elige el formato según el destino

SVG conserva las formas vectoriales; PNG almacena una cuadrícula fija de píxeles. La compresión sin pérdida del PNG resulta adecuada para letras, colores planos y bordes nítidos: al guardar no añade los defectos de compresión que puede introducir JPG. JPG puede difuminar los bordes o crear halos de color alrededor de las letras, y no conserva la transparencia.

WebP admite compresión con y sin pérdida. La herramienta SVG a WebP de Pixilo ofrece un ajuste de calidad, no un modo sin pérdida independiente; un valor de 100 no garantiza píxeles idénticos. Úsala cuando el destino acepte WebP y el archivo obtenido se vea bien. Para un logo sencillo, conservar SVG o un PNG adecuado puede ser mejor.

Exporta según el tamaño de visualización

Distingue las dimensiones en píxeles del archivo del tamaño al que se mostrará. Supongamos que el diseño exportado es cuatro veces más ancho que alto y debe ocupar 160 × 40 píxeles CSS. Un PNG de 320 × 80 aporta dos píxeles de imagen por píxel CSS en cada dirección, un punto de partida útil para una pantalla de alta densidad. Es un ejemplo, no una medida obligatoria ni una regla para exportar siempre al doble.

Bloquea la proporción e introduce normalmente una sola dimensión. Si el logo es el doble de ancho que de alto, mostrarlo a 160 píxeles de ancho produce 80 píxeles de alto, no 40. Encájalo en el ancho y alto disponibles sin deformarlo; utiliza una composición alternativa aprobada si el logo completo no cabe.

Las dimensiones incluyen los márgenes transparentes. Si el logo visible ocupa solo la mitad de un lienzo de 320 píxeles de ancho, aparecerá de unos 80 píxeles cuando la imagen completa se muestre a 160. Corrige el espacio vacío involuntario en el original y conserva el área de seguridad de la marca. Define también el ancho de visualización en el editor de la web o la firma y comprueba si el servicio crea una copia redimensionada.

Cambiar solo el valor DPI no añade detalle. Consulta la guía de DPI, PPI y píxeles. Para impresión profesional, pide requisitos específicos de archivo, color y resolución.

Revisa el área de exportación y las letras

Ajusta el área de exportación al logo, respetando su espacio de seguridad y el margen para trazos o sombras. Una mesa de trabajo grande y vacía hace que el logo visible parezca pequeño aunque el archivo tenga muchos píxeles. No elimines el espacio previsto por la marca solo para recortar más. La guía de exportación de Inkscape muestra las diferencias entre exportar la página, el dibujo y la selección.

Revisa las fuentes y los elementos vinculados antes de exportar. Convertir el texto a trazados transforma las letras en formas vectoriales, de modo que su aspecto deja de depender de que el destinatario tenga esa fuente. Ya no podrán editarse como texto normal: hazlo en una copia de exportación y conserva el original. Trazar el texto no convierte en vectores una imagen de baja resolución incrustada.

Prepara un SVG autónomo que incluya las imágenes y los estilos necesarios. Un archivo que se ve bien al abrirlo por separado puede comportarse de otra manera como imagen web, porque en ese contexto se restringen los recursos externos. Lo explica la documentación de MDN. Compara el archivo exportado con el diseño y revisa después la versión colocada. Examina letras, espacios, recortes y efectos, no solo si el archivo se abre.

Prepara los colores de pantalla por separado de los archivos de impresión

Usa los colores RGB aprobados por la marca para las versiones de pantalla. En PNG y JPG para web, sRGB es un punto de partida práctico. La guía de color para web de Adobe describe la conversión. Si la fuente usa otro perfil, convierte los colores en el programa de diseño en lugar de limitarte a asignar un perfil distinto y revisa el resultado.

Conserva aparte el original de impresión en CMYK o tintas planas. Las versiones de pantalla e impresión pueden tener distintos valores de color aprobados; un conversor de formato no puede elegirlos por ti. Compara con la versión de pantalla validada, aunque distintos monitores aún pueden variar. Para una diferencia visible, sigue la guía para resolver diferencias de color.

Prepara versiones para fondos claros y oscuros

La transparencia no cambia los colores del logo. Exporta una versión oscura aprobada para superficies claras y una blanca o clara para fondos oscuros si necesitas ambas. En una web, la plantilla o su desarrollador debe seleccionar la correcta; crear dos archivos no hace que cambien automáticamente.

El correo necesita una comprobación aparte. Las aplicaciones pueden alterar el fondo del mensaje en modo oscuro y el soporte para intercambiar imágenes varía. Prueba los mensajes recibidos en ambos modos. Si el logo oscuro desaparece, pide al diseñador una versión aprobada que siga siendo visible, por ejemplo con un contorno de contraste o un fondo apropiado. Ninguna solución garantiza el mismo aspecto en todas las aplicaciones. La guía de modo oscuro de Mailchimp explica por qué hay que probarlo.

PNG puede mantener la transparencia existente; JPG necesita un fondo opaco. Elígelo antes de exportar a JPG. Una casilla de transparencia no elimina un rectángulo blanco dibujado en el diseño. La guía de fondos transparentes ayuda a distinguir un fondo real de la superficie de vista previa.

Crea las versiones PNG, JPG o WebP en Pixilo

1. Abre el SVG preparado en SVG a PNG. Elige SVG a JPG cuando el destino exija JPG o SVG a WebP si has elegido WebP para ese uso.
2. Introduce el ancho o alto de exportación con la proporción bloqueada. Conserva la transparencia si se admite o elige el color de fondo final.
3. Convierte y descarga. Comprueba el archivo descargado, no solo la vista previa de la fuente. La compresión PNG es sin pérdida, sin nivel de calidad que ajustar; en JPG y WebP revisa letras y líneas finas después de ajustar la calidad.
4. Coloca la copia, define su tamaño y comprueba la página publicada, el mensaje recibido o el documento exportado. Asegúrate de ver el archivo nuevo y no una versión antigua en caché.

Pixilo crea copias de imagen estáticas, no un logo editable ni un SVG optimizado. Su lector SVG rechaza recursos externos y contenido no compatible. Si el archivo se rechaza, vuelve al programa de diseño y exporta una copia autónoma con el texto convertido a trazados cuando haga falta. La página de la herramienta muestra los límites actuales de archivo y dimensiones. Conserva el original para futuras exportaciones.

Nombra los archivos para que su función quede clara

Describe el color del dibujo por separado del fondo. Por ejemplo, dark-artwork significa formas oscuras, no un archivo destinado a un fondo oscuro:

• Original editable: conserva el archivo nativo del diseñador, con su extensión real, separado de las copias publicadas.
• brand-logo-dark-artwork.svg y brand-logo-white-artwork.svg: dibujo oscuro para fondos claros y dibujo blanco para fondos oscuros.
• brand-logo-dark-artwork-320x80.png: PNG transparente para el tamaño de visualización del ejemplo, 160 × 40. El nombre recoge las dimensiones en píxeles del archivo.
• brand-logo-white-background.jpg: JPG opcional con fondo blanco opaco para un destino que lo exija.

Incluye una nota breve con el tamaño de visualización y el fondo. Crea solo las versiones que se usarán. Un favicon suele necesitar un dibujo simplificado propio, porque el logotipo completo con el nombre puede ser ilegible en una pestaña. Consulta la guía de favicons.

Comprueba el logo donde se va a utilizar

Revisa primero el uso real más pequeño. ¿Se leen las letras, se ven los trazos finos y se respeta el espacio de seguridad? Después prueba los fondos claros y oscuros. Para el correo, envía un mensaje de prueba real y revisa la copia recibida. Para un documento, abre el PDF exportado y comprueba una impresión si el resultado en papel es importante.

En una web, proporciona al logo una alternativa textual apropiada. Si es el único contenido de un enlace al inicio, indica ese destino, por ejemplo «Inicio de la marca». Si el texto visible del mismo enlace ya aporta el nombre y la función, evita repetirlo. La guía del W3C sobre imágenes funcionales muestra ambos casos.

Preguntas frecuentes

¿Por qué el logo subido está borroso si el archivo descargado es nítido?

Compara los píxeles reales del archivo subido con su tamaño de visualización. La plataforma puede haber creado una copia menor o la página puede estar ampliándola. Comprueba qué archivo usa la página publicada y si los márgenes transparentes excesivos hacen pequeño el dibujo. Aumentar otra vez el tamaño de exportación no arregla una página que sigue eligiendo la versión incorrecta.

¿Por qué el PNG tiene un recuadro blanco?

Mira el archivo descargado sobre un damero y sobre un fondo de color. Si el recuadro forma parte de los píxeles, busca un objeto de fondo en la fuente o una exportación que haya aplanado la transparencia. Si el archivo es transparente y el recuadro solo aparece al colocarlo, revisa el fondo aplicado a la imagen o la conversión en el destino. Elimina un fondo dibujado solo si el diseño lo permite.

¿Puedo usar el mismo archivo en todas las firmas de correo?

Empieza con PNG y prueba el editor de firmas, los mensajes recibidos y los modos claro y oscuro. Una imagen alojada debe seguir disponible en su dirección publicada; una incrustada debe conservarse durante el procesamiento del correo. Mantén los datos de contacto como texto real para que sigan disponibles si se bloquean las imágenes. No basta con una vista previa correcta en el editor del remitente.

¿Convertir PNG a SVG hace escalable el logo?

Incrustar PNG en SVG conserva sus píxeles originales. Vectorizar o redibujar puede crear trazados, pero también cambiar curvas, espacios o letras. Pide primero el original vectorial y haz comparar cualquier reconstrucción con el logo aprobado.

¿Qué hago si el logo supera el límite de subida?

Comprueba primero si el límite se refiere al peso en KB o a las dimensiones en píxeles. Exporta las dimensiones necesarias, elimina el espacio vacío involuntario y evita ampliaciones innecesarias. Para PNG, prueba compresión sin pérdida antes de sacrificar los bordes. Si se exige un formato con pérdida, compara el archivo descargado mientras reduces la calidad. La guía para reducir el tamaño de archivo explica las opciones. No hay un objetivo único en KB válido para todos los logos y destinos.

¿Por qué cambian las letras o los colores después de convertir?

Compara el diseño editable, el SVG exportado, la imagen descargada y el resultado colocado para encontrar el primer paso diferente. Las fuentes ausentes o sustituidas apuntan a la exportación del texto; las imágenes o efectos que faltan pueden indicar contenido SVG no compatible. Un cambio de color requiere revisar el perfil de origen y la exportación para pantalla. Corrige ese paso y exporta de nuevo en lugar de reconvertir una copia ya incorrecta.