Exportaciones rasterizadas
Tamaños de logotipos PNG para sitios web, correo electrónico y entregas a clientes
Elige dimensiones de exportación útiles a partir de ubicaciones reales y prepara una entrega clara para el cliente.
La respuesta breve
Elige las dimensiones en píxeles de un logotipo PNG según el tamaño al que se mostrará y la densidad de píxeles que quieras admitir. Un logotipo que se muestra a 200 × 50 píxeles CSS necesita un PNG de 400 × 100 píxeles para una versión a 2×. Conserva sus proporciones, comprueba los requisitos de carga del destino y genera el archivo a partir del original vectorial cuando esté disponible.
Empieza por la ubicación
No existe un único tamaño de PNG que sirva para todos los sitios web, firmas de correo electrónico y presentaciones a clientes. Una entrega útil indica al destinatario qué archivo debe usar y a qué tamaño debe mostrarlo.
Para un sitio web, pide el tamaño CSS al que se renderiza el logotipo en los anchos de diseño pertinentes. Un logotipo de 200 píxeles en la cabecera de escritorio podría ser más pequeño en dispositivos móviles. Para el correo electrónico, comprueba la plantilla o el editor de firmas en lugar de copiar la configuración de un sitio web. Para las presentaciones, acuerda una ubicación útil y revisa la diapositiva exportada a la resolución prevista.
SVG puede ser una buena opción para logotipos vectoriales cuando el sistema de destino lo admite. PNG es útil cuando necesitas una imagen de tamaño fijo con transparencia. Nuestra guía de formatos de logotipos explica las distintas opciones.
Antes de exportar, anota cuatro cosas:
- Dónde aparecerá el logotipo y qué formatos de archivo se admiten
- Su ancho y alto de visualización, incluidos los márgenes transparentes
- Si se necesita una versión rasterizada de mayor densidad
- El límite de tamaño de los archivos que se pueden cargar y cualquier redimensionamiento que aplique la plataforma
Calcula las dimensiones del PNG
Para una ubicación que requiera una imagen rasterizada, utiliza esta regla de planificación:
Ancho de exportación = ancho de visualización × densidad de píxeles objetivo.
Aplica el mismo multiplicador a la altura. Una exportación a 2× duplica ambas dimensiones y genera cuatro veces más píxeles en total. Eso no significa que el logotipo deba aparecer al doble de tamaño en la página. La relación de píxeles del dispositivo del navegador describe la relación entre los píxeles físicos de la pantalla y los píxeles CSS.
Para el ejemplo de sitio web que aparece a continuación, una versión a 3× tendría 600 × 150 píxeles. Se trata de un requisito independiente que hay que acordar con quien desarrolla el sitio, no de un motivo para exportar todos los tamaños posibles.
En los sitios web adaptables, quien desarrolla el sitio puede proporcionar varias imágenes candidatas mediante srcset. Esto permite al navegador seleccionar un recurso adecuado. Los archivos exportados y los ajustes de visualización del sitio web deben coincidir.
Estos son cálculos de ejemplo para un logotipo ficticio de Morrow Quay con un lienzo de proporción 4:1. Son decisiones de proyecto ilustrativas, no requisitos de plataformas ni resultados de clientes reales.
| Destino de ejemplo | Tamaño de visualización previsto | PNG a 1× | PNG a 2× |
|---|---|---|---|
| Cabecera de sitio web | 200 × 50 px | 200 × 50 px | 400 × 100 px |
| Firma de correo electrónico | 180 × 45 px | 180 × 45 px | 360 × 90 px |
| Ubicación en una diapositiva para el cliente | 480 × 120 px | 480 × 120 px | 960 × 240 px |
1× exportación
Archivo PNG: 200 × 50 px
Visualización: 200 × 50 px CSS
2× exportación
Archivo PNG: 400 × 100 px
Visualización: 200 × 50 px CSS
3× exportación
Archivo PNG: 600 × 150 px
Visualización: 200 × 50 px CSS
Más información: MDN: devicePixelRatio · MDN: imágenes adaptables
Comprueba las dimensiones del correo electrónico en el editor que vayas a usar
Un PNG de 360 × 90 es un archivo inicial razonable para la firma de ejemplo de 180 × 45 solo si la configuración del correo electrónico lo limita a ese tamaño de visualización previsto. Insértalo, comprueba los ajustes de tamaño y envía un correo de prueba. Revisa el resultado en los clientes de correo que utiliza tu público, incluidos los dispositivos móviles si corresponde.
El ancho total de la plantilla de un correo electrónico es distinto del ancho de su logotipo. Mailchimp, por ejemplo, documenta recomendaciones de imágenes diferentes para su nuevo editor y el editor clásico, y recomienda imágenes de mayor resolución con dimensiones limitadas para pantallas de alta densidad. También recomienda imágenes RGB y PNG cuando se necesita transparencia. Son las directrices de Mailchimp, no una especificación universal para firmas.
Utiliza una versión del logotipo adecuada para el fondo. Un logotipo tipográfico blanco con transparencia puede parecer vacío en un mensaje blanco. Uno oscuro puede resultar difícil de ver si el cliente de correo del destinatario cambia el fondo. Comprueba el resultado real antes de dar el recurso por listo.
Más información: Mailchimp: recomendaciones de imágenes
Cuenta los píxeles del logotipo dentro del lienzo
Las dimensiones en píxeles incluyen el espacio vacío. Supongamos que un PNG de 400 × 100 contiene un logotipo visible de 320 × 80, centrado con 40 píxeles de margen a izquierda y derecha y 10 arriba y abajo. Si muestras la imagen completa a 200 × 50, el logotipo visible ocupa solo 160 × 40.
Puede tratarse de un área de protección intencionada. Si es un margen accidental, corrige los límites de exportación en el archivo de origen. Respeta cualquier norma aprobada sobre el área de protección e indica a quien desarrolla el sitio si ese espacio está integrado en el archivo o debe añadirse en la maquetación. Ampliar toda la imagen para compensarlo vuelve a cambiar el tamaño aparente.
Exporta los tamaños en Figma o Illustrator
Figma admite de forma nativa exportaciones rasterizadas personalizadas. Selecciona el logotipo o marco preparado, añade una exportación PNG e introduce un ancho como 400w en el campo Scale. También puedes introducir una altura fija con h o usar un multiplicador como 2x. El multiplicador toma como referencia las dimensiones del objeto seleccionado, así que comprueba los píxeles resultantes.
Los flujos Export for Screens y Asset Export de Illustrator también admiten varias escalas y formatos. Prepara el recurso o la mesa de trabajo correctos, elige PNG y las escalas necesarias y verifica las dimensiones de los archivos descargados.
Para preparar una entrega completa desde Figma, sigue nuestro flujo de exportación de logotipos.
Más información: Figma: formatos y ajustes de exportación · Adobe: recopilar recursos y exportar por lotes
Prepara una entrega fácil de entender
Añade una nota breve: «El PNG para el sitio web es un recurso a 2× pensado para mostrarse a 200 × 50 píxeles. Conserva sus proporciones». Guarda el original vectorial aprobado para poder generar directamente otros tamaños en el futuro.
Para la preparación recurrente de paquetes, logopack.app Pro añade tamaños de exportación PNG y JPG personalizados. Parte de un SVG aprobado, elige los tamaños para tus destinos e inspecciona los recursos descargados. Las exportaciones nativas del editor siguen siendo una opción válida; el flujo de preparación de paquetes resulta útil cuando quieres incluir esos archivos personalizados junto con el resto de la entrega.
Antes de la entrega, abre los archivos definitivos, comprueba sus dimensiones en píxeles y su transparencia, y coloca el recurso prioritario en su destino real. Si un archivo con el tamaño correcto sigue viéndose poco nítido, consulta nuestra guía para solucionar problemas de PNG borrosos.
Nombra los archivos según la información que necesita el cliente. Para este ejemplo:
- MorrowQuay_Primary_Web_400x100.png
- MorrowQuay_Primary_Email_360x90.png
- MorrowQuay_White_Slides_960x240.png
Más información: Prepara un paquete de logotipos con logopack.app
PONLO EN PRÁCTICA
¿Todo listo para preparar tu paquete?
logopack.app convierte tus diseños SVG en un paquete de logotipos organizado. Previsualiza los archivos, elige entre las opciones de exportación disponibles y revisa el resultado antes de entregarlo.
Empieza con el generador de paquetes de logotipos, explora el ZIP de ejemplo o compara los planes actuales.
Abrir generador