Un logo profesional necesita funcionar en contextos completamente diferentes: pequeño en la pestaña del navegador como favicon, mediano en el header del sitio, grande en una lona de fachada, cuadrado en la foto de perfil de Instagram y horizontal en la tarjeta de presentación. Cada uno de estos contextos tiene dimensiones y formatos diferentes — y usar el tamaño equivocado resulta en un logo borroso, recortado o con proporciones distorsionadas.
La buena noticia es que no necesitas crear versiones diferentes desde cero para cada contexto. Con el archivo correcto en el formato correcto, el Redimensionador de Imagen de ImageTools ajusta las dimensiones para cualquier uso en segundos.
Los formatos que necesitas tener de tu logo
Antes de hablar de tamaños específicos, entiende qué formatos de archivo necesitas guardar. Un logo bien documentado debe tener al menos estas versiones:
- SVG (vectorial): el archivo maestro. Puede ampliarse a cualquier tamaño — desde un favicon de 16px hasta una valla publicitaria de 10 metros — sin pérdida de calidad. Esencial para uso en sitios web, presentaciones y envío a imprentas.
- PNG con fondo transparente (alta resolución): para uso digital donde no se acepta SVG. Guárdalo en al menos 1000×1000px para tener flexibilidad de redimensionamiento.
- PNG con fondo blanco: para contextos donde la transparencia no es deseada o compatible — formularios de registro en plataformas, documentos Word, correo electrónico.
- PNG o JPG versión oscura (elementos en blanco): para uso sobre fondos de color o oscuros. Un logo en azul oscuro desaparece por completo sobre un fondo negro.
- Favicon (.ico + PNGs): versiones específicas para la pestaña del navegador. Usa el Generador de Favicon de ImageTools para generar todos los tamaños necesarios a partir del logo.
☁️ Guarda todo en la nube. Mantén estas versiones en un Google Drive o Dropbox con acceso fácil. Las vas a necesitar al contratar a un diseñador freelance, al actualizar el perfil de una red social o al enviar material a una imprenta — a menudo con urgencia.
Tabla de referencia — dimensiones de logo por contexto
| Contexto | Dimensiones recomendadas | Formato ideal | Observación |
|---|---|---|---|
| Header del sitio (escritorio) | 200–400px de ancho | SVG o PNG transparente | Altura proporcional al diseño |
| Favicon (pestaña del navegador) | 16×16, 32×32, 48×48px | .ico + PNG | Usa el Generador de Favicon |
| Apple Touch Icon (iOS) | 180×180px | PNG sin transparencia | Fondo sólido recomendado |
| Ícono de app Android (PWA) | 192×192 y 512×512px | PNG | Exigido en el webmanifest |
| Instagram — foto de perfil | 320×320px (mostrado en 110px) | PNG o JPG | Se recortará en círculo |
| Facebook — foto de perfil | 170×170px | PNG o JPG | Mostrado en círculo en escritorio |
| Facebook — foto de portada | 820×312px | JPG o PNG | Logo como elemento, no la foto entera |
| LinkedIn — logo empresa | 300×300px | PNG o JPG | Mín. 300×300, máx. 4 MB |
| LinkedIn — portada empresa | 1128×191px | PNG o JPG | Logo como elemento dentro de la portada |
| YouTube — ícono del canal | 800×800px | PNG o JPG | Mostrado en círculo, 98px en TV |
| YouTube — arte del canal | 2560×1440px | JPG o PNG | Logo como elemento, área segura: 1546×423px |
| WhatsApp Business — perfil | 640×640px | PNG o JPG | Mostrado en círculo |
| TikTok — foto de perfil | 200×200px (mín.) | JPG o PNG | Mostrado en círculo |
| Twitter / X — foto de perfil | 400×400px | PNG o JPG | Mostrado en círculo, 48px en el feed |
| Correo (firma) | 200–300px de ancho | PNG con fondo blanco o JPG | Evitar transparencia en clientes antiguos |
| Tarjeta de presentación (digital) | 400–600px de ancho | PNG transparente | Para composición en el diseño de la tarjeta |
| Presentación (diapositivas) | 200–400px de ancho | PNG transparente o SVG | Proporcional a la diapositiva (16:9) |
Logo para sitio web
Header (encabezado)
En el header del sitio, el logo suele tener entre 150px y 400px de ancho, con altura proporcional. El ancho exacto depende del diseño — un header compacto puede usar 150px, mientras que un sitio con bastante espacio puede usar 300–400px. Lo más importante es que el logo sea nítido en pantallas Retina: expórtalo en PNG con el doble del ancho de visualización (o usa SVG, que resuelve esto automáticamente) y deja que el CSS se encargue del tamaño de visualización.
Usa siempre SVG o PNG con fondo transparente en el header — el fondo del header cambia según el diseño y el scroll, y un logo con fondo blanco creará un rectángulo blanco visible sobre fondos de color.
Favicon
El favicon es el ícono que se muestra en la pestaña del navegador, en favoritos y en la pantalla de inicio de dispositivos móviles. Un favicon eficaz es una versión simplificada del logo — generalmente solo el símbolo o la inicial, sin el nombre completo de la empresa, ya que el espacio es demasiado pequeño para texto legible.
Los tamaños necesarios son: 16×16px y 32×32px para navegadores de escritorio, 180×180px para iOS (Apple Touch Icon) y 192×192px y 512×512px para Android y PWAs. Usa el Generador de Favicon de ImageTools para generar todos estos tamaños automáticamente a partir del logo.
Genera todos los tamaños de favicon de una vez
Del logo al favicon para navegadores, iOS, Android y PWA — todos los tamaños necesarios en segundos.
Generar favicon gratisLogo para redes sociales
Por qué el logo necesita funcionar en formato cuadrado y circular
Prácticamente todas las redes sociales muestran la foto de perfil en formato circular. Esto crea un desafío específico para los logos horizontales (nombre + ícono lado a lado): en el espacio circular, o el logo queda demasiado pequeño para leerse, o partes de él quedan recortadas en los bordes.
La solución más eficaz es tener una versión "ícono" del logo — solo el símbolo o las iniciales de la marca, centrado en un área cuadrada — específicamente para usar como foto de perfil en redes sociales. Esta versión mantiene el reconocimiento visual sin los problemas de recorte.
Instagram acepta fotos de perfil de hasta 320×320px, pero las muestra en solo 110px en el perfil y 32px en el feed. El archivo debe ser cuadrado. Si el logo es horizontal, colócalo centrado en un área cuadrada con el padding adecuado para que nada se recorte por el recorte circular de la plataforma.
La foto de perfil de página en Facebook se muestra en 170×170px en escritorio y 128×128px en móvil, siempre recortada en círculo. La foto de portada es 820×312px — en ella, el logo generalmente aparece como un elemento del diseño de la portada, sin ocupar la imagen entera.
Para perfiles de empresa, LinkedIn muestra el logo en 300×300px (cuadrado) en la página y en tamaños menores en los listados. Es uno de los contextos donde la calidad de la imagen más influye en la percepción profesional — usa PNG de alta calidad, sin compresión excesiva.
YouTube
El ícono del canal en YouTube se muestra en tamaños muy diferentes según el contexto: 98px en una smart TV, 32px en el feed de escritorio, 88px en el perfil móvil. El archivo debe tener como mínimo 800×800px para cubrir todos esos tamaños con nitidez. El arte del canal (banner) tiene dimensiones de 2560×1440px, pero el "área segura" — la región visible en todos los dispositivos — es solo 1546×423px centrado. El logo debe quedar dentro de esa área.
WhatsApp Business
La foto de perfil de WhatsApp Business se muestra en círculo, con un tamaño de visualización de aproximadamente 50px en las conversaciones. Usa un archivo de 640×640px para garantizar nitidez en las vistas previas a pantalla completa. Como en otras redes sociales, los logos horizontales no funcionan bien aquí — usa la versión ícono o símbolo de la marca.
📐 Consejo para logos horizontales en redes sociales: crea una versión cuadrada agregando espacio en blanco (o en el color de fondo de la marca) en los laterales. La proporción ideal es el logo ocupando entre el 60% y el 75% del ancho del cuadrado, con márgenes iguales en los cuatro lados. Esto evita el recorte circular y garantiza que el logo aparezca completo.
Logo para impresión
La impresión tiene una lógica completamente diferente a la digital. La resolución en píxeles no es lo que importa — lo que importa es la relación entre píxeles y el tamaño físico de impresión, medida en DPI (dots per inch, puntos por pulgada). El estándar de la industria gráfica es 300 DPI.
Cómo calcular los píxeles necesarios para impresión
Fórmula: píxeles = tamaño en cm ÷ 2,54 × DPI
Ejemplos prácticos:
| Material | Tamaño típico del logo | Píxeles necesarios (300 DPI) |
|---|---|---|
| Tarjeta de presentación (logo) | 3 × 1,5 cm | 354 × 177px |
| Papel membretado (encabezado) | 5 × 2 cm | 591 × 236px |
| Empaque pequeño | 4 × 4 cm | 472 × 472px |
| Camiseta (pecho) | 10 × 5 cm | 1181 × 591px |
| Taza (logo lateral) | 8 × 4 cm | 945 × 472px |
| Bolsa personalizada | 15 × 8 cm | 1772 × 945px |
| Banner/rollup (logo en la parte superior) | 20 × 10 cm | 2362 × 1181px |
Para evitar tener que calcular caso por caso, la solución más práctica es usar SVG — el formato vectorial escala sin límite y puede imprimirse en cualquier tamaño sin pérdida de calidad. Cualquier imprenta profesional acepta SVG (o su equivalente en PDF vectorial, generado a partir del SVG en Illustrator o Inkscape).
Formatos aceptados por las imprentas
La mayoría de las imprentas profesionales aceptan y prefieren:
- PDF vectorial: el estándar de la industria. Generado desde Illustrator, Corel o Inkscape con el logo en vector.
- AI (Adobe Illustrator): archivo vectorial nativo.
- EPS: formato vectorial más antiguo, ampliamente compatible.
- SVG: aceptado por la mayoría de las imprentas modernas.
- PNG en alta resolución: aceptado cuando el archivo vectorial no está disponible, siempre que la resolución sea suficiente para el tamaño de impresión.
🖨️ Para bordados y corte láser: estos procesos exigen vectores con trazados limpios. Los logos con degradados, sombras o efectos fotográficos necesitan simplificarse antes de enviarse a producción. Un diseñador puede hacer esa "vectorización" a partir del PNG del logo si no existe el archivo original en vector.
Redimensionando el logo para cada uso
Con el archivo base del logo en PNG de alta resolución (al menos 1000×1000px) o SVG, usa el Redimensionador de Imagen de ImageTools para ajustarlo a las dimensiones de cada plataforma. El redimensionador permite definir ancho y alto exactos en píxeles, manteniendo o ajustando la proporción original.
Flujo recomendado para preparar las versiones del logo:
- Parte siempre del archivo de mayor resolución disponible — SVG o PNG por encima de 1000px.
- Redimensiona a las dimensiones del destino usando el Redimensionador.
- Para redes sociales, comprime ligeramente con el Compresor de Imagen — manteniendo calidad 85–90% para no perder nitidez.
- Para impresión, envía el SVG directamente o conviértelo a PDF vectorial.
Redimensiona el logo para cualquier uso
Ajusta las dimensiones del logo en píxeles con precisión — sin distorsionar la proporción.
Redimensionar logo gratisErrores comunes al usar el logo en diferentes tamaños
Usar el mismo archivo para todos los contextos
Un logo de 2000px en la firma de correo cargará lentamente y se verá enorme. Un logo de 100px en una impresión A4 se verá pixelado. Cada contexto tiene sus propias dimensiones ideales — usa esta guía como referencia y redimensiona antes de usarlo.
No tener versión para fondo oscuro
Muchos logos se crean inicialmente en colores oscuros sobre fondo claro. En publicaciones con fondo negro o de color — común en Instagram Stories y portadas de LinkedIn — el logo simplemente desaparece. Crea y guarda siempre una versión con los elementos principales en blanco o en color claro.
Guardar para redes sociales en PNG demasiado grande
Un PNG de 2000×2000px para foto de perfil de Instagram no mejora la calidad de visualización — Instagram comprime todo lo que supera el tamaño necesario. Envíalo en las dimensiones ideales (320×320px) con compresión de calidad 90% para evitar la doble compresión de la plataforma.
Usar JPG para logos con fondo transparente
El JPG no admite transparencia — al guardar un logo PNG transparente como JPG, el fondo transparente se sustituye por blanco. Si el logo necesita fondo transparente (para usarse sobre diferentes colores de fondo), usa siempre PNG o WebP.
Ampliar un PNG pequeño en lugar de usar el SVG
Si el logo existe en SVG, usa siempre el SVG como base para el redimensionamiento — nunca amplíes un PNG pequeño. Ampliar un PNG crea pixelación que no puede corregirse sin el archivo vectorial original.
¿Todavía no tienes el logo? Créalo ahora
Si aún no tienes un logo o quieres crear una versión profesional, ImageTools ofrece dos herramientas para eso: el Creador de Logo, donde eliges ícono, colores y tipografía con control total, y el Creador de Logo con IA, donde describes tu marca y la IA genera opciones vectoriales listas para descargar. Ambos exportan en SVG y PNG — los formatos que necesitas para todos los usos descritos en esta guía.
Crea el logo de tu marca ahora
Resultado en SVG y PNG con fondo transparente — listos para sitio web, redes sociales e impresión.
Preguntas frecuentes
prefers-color-scheme o la etiqueta HTML <picture> con media para alternar automáticamente entre la versión clara y la oscura del logo según la preferencia del sistema del usuario — sin ninguna interacción del visitante.