# Tamaño de logo para webs, redes sociales e imprenta
[Canonical HTML page](https://gradiently.design/es/guide/logo-sizes)
La gente pregunta por el tamaño de logo correcto como si hubiera una sola cifra. No la hay: hay un archivo maestro y un tamaño sensato para cada sitio donde aparece. Aquí tienes esos sitios, con los tamaños de lienzo y los archivos que usar.
## The short version
- No existe un único tamaño de logo correcto; guarda un archivo vectorial maestro y exporta desde él para cada sitio donde aparezca el logo.
- En las webs, usa un logo SVG y fija su tamaño por la altura en CSS para que se vea nítido en todas las pantallas.
- Para las fotos de perfil en redes, sube una imagen cuadrada y mantén el logo bien dentro del centro, porque la mayoría de plataformas recortan la foto de perfil en círculo.
- Al exportar un logo en PNG, hazlo al menos al doble del tamaño al que se mostrará para que se vea nítido en pantallas de alta densidad.
- Para imprenta, usa un PDF o SVG vectorial, o un archivo de mapa de bits a 300 dpi al tamaño final de impresión.
No hay un único **tamaño de logo** que funcione en todas partes. Guarda tu logo como un vectorial maestro, un SVG o PDF, que se escala a cualquier tamaño sin perder nitidez, y exporta desde él para cada sitio: un SVG dimensionado por la altura para la cabecera de tu web, una versión cuadrada para las fotos de perfil, una horizontal para los banners y un archivo a 300 dpi para imprenta. Lo que cambia de un sitio a otro es el lienzo y cuánto de él debe ocupar el logo.
## Empieza por un archivo maestro, no por un tamaño
Los archivos vectoriales describen formas en lugar de píxeles, así que el mismo archivo se ve nítido en un móvil y en la fachada de una tienda. Cualquier otro archivo que hagas debería exportarse desde este maestro, nunca desde una captura de pantalla o un PNG antiguo. Si solo tienes un logo pequeño en mapa de bits, haz que lo redibujen en vectorial antes que nada; te ahorrará problemas en todos los trabajos posteriores.
| Archivo | Tipo | Úsalo para |
| --- | --- | --- |
| SVG | Vectorial | Webs, apps y como maestro para el trabajo en pantalla |
| PDF | Vectorial | Imprentas, rotulación y todo lo que envíes a un proveedor |
| PNG con transparencia | Mapa de bits | Presentaciones, documentos, posts en redes y email |
| JPG | Mapa de bits | Solo donde un fondo sólido no importa, nunca para un logo que va sobre color |
Dos archivos vectoriales y un PNG transparente cubren casi cualquier petición. [SVG vs PNG](https://gradiently.design/es/guide/svg-vs-png) explica las ventajas de cada uno con más detalle.
## Tamaño de logo para web
En una web, dimensiona el logo por la altura, no por el ancho, para que un logotipo ancho y un símbolo compacto se apoyen en la misma línea de tu cabecera. Usa el SVG para que se vea nítido en pantallas de alta densidad y dale un ancho máximo razonable para móviles pequeños.
```html
```
Los atributos width y height reservan el espacio para que la página no salte mientras carga el logo. Las alturas son un punto de partida; ajústalas a tu cabecera.
Tu favicon es un archivo aparte, cuadrado y simplificado, no el logo completo reducido. Los navegadores lo muestran a tamaños muy pequeños, así que suele quedarse en una sola letra o símbolo. [Diseño de favicon](https://gradiently.design/es/guide/favicon-design) enumera los archivos exactos, y las [directrices de favicon](https://support.google.com/webmasters/answer/9290858) de Google piden un icono cuadrado con un tamaño múltiplo de 48 píxeles.
## Tamaño de logo para redes sociales
Las redes sociales usan tu logo en dos sitios muy distintos: la pequeña foto de perfil y la portada o banner ancho. Necesitan versiones distintas del logo, no el mismo archivo apretado.
### Fotos de perfil
- Sube una imagen **cuadrada**. La mayoría de plataformas recortan la foto de perfil en círculo, así que las esquinas desaparecen.
- Usa tu versión de **icono o apilada**, no una composición horizontal larga. Un logotipo ancho se vuelve ilegible en un círculo pequeño.
- Mantén el logo más o menos dentro de los **dos tercios centrales** del cuadrado, con el mismo espacio alrededor.
- Colócalo sobre un **color sólido o un fondo tranquilo** que llene el cuadrado, para que el círculo se vea intencionado.
- Revísalo a tamaño real en tu propio móvil antes de cambiarlo en todas partes.
Una imagen de perfil cuadrada con el logotipo fern centrado sobre un degradado verde, con espacio alrededor para un recorte circular
Un logotipo corto centrado con márgenes generosos sobrevive al recorte circular.
Un banner ancho de perfil de LinkedIn con las palabras Fern Studio y Plantas para espacios pequeños sobre el mismo degradado verde
El banner puede llevar el nombre completo y una línea sobre ti, porque tiene anchura para ello.
### Portadas y banners
Las imágenes de portada son anchas y se recortan de forma distinta en móvil y en escritorio, y la foto de perfil a menudo se superpone a una esquina. Mantén el logo y el texto cerca del centro y deja que el fondo llegue hasta los bordes.
- Portada de Facebook 1640×624: 1640 × 624
- Banner de LinkedIn 1584×396: 1584 × 396
- Cabecera de X 1500×500: 1500 × 500
- Imagen de canal de YouTube 2560×1440: 2560 × 1440
Cuatro banners habituales, dibujados a escala. Todos son mucho más anchos que altos, así que les va mejor un logo horizontal o una simple línea con el nombre.
En los posts, el logo es una firma, no el titular. Un buen punto de partida es mantenerlo pequeño, en una esquina fija y con el mismo tamaño en todos los posts, para que genere reconocimiento sin competir con el mensaje. [Tamaños de imagen para redes sociales](https://gradiently.design/es/guide/social-media-image-sizes) tiene todos los tamaños de post.
## Tamaños de logo para email e imprenta
| Sitio | Tamaño del lienzo | Archivo del logo |
| --- | --- | --- |
| Cabecera de email | 1200×600 | PNG, exportado al doble de su tamaño de visualización |
| Firma de email | 600×200 | PNG pequeño; muchas apps de correo bloquean el SVG |
| Vista previa de enlace (Open Graph) | 1200×630 | Logo cerca del centro, PNG o JPG |
| Tarjeta de visita | 1050×600 a 300 dpi | PDF vectorial desde el maestro |
| Flyer A5 | 1748×2480 a 300 dpi | PDF vectorial desde el maestro |
| Cartel A4 | 2480×3508 a 300 dpi | PDF vectorial desde el maestro |
Los tamaños de impresión se indican en píxeles a 300 dpi. Los logos vectoriales se imprimen nítidos a cualquier tamaño; los de mapa de bits necesitan 300 dpi al tamaño final de impresión.
El email es el caso incómodo: muchas apps de correo no muestran imágenes SVG, así que usa un PNG transparente. Expórtalo al doble del ancho con el que quieres mostrarlo y fija ese ancho en el HTML, para que se vea nítido en las pantallas de móvil de alta densidad. Para imprenta, lee [resolución de imagen para imprimir](https://gradiently.design/es/guide/image-resolution-for-print) antes de enviar nada a una imprenta, y consulta [diseño de firma de email](https://gradiently.design/es/guide/email-signature-design) para la firma en sí.
> **Exporta al doble del tamaño de visualización** Un PNG que se muestra a 200 píxeles de ancho debería exportarse a 400. Las pantallas de alta densidad meten dos o más píxeles físicos en cada píxel CSS, y un logo exportado exactamente al tamaño de visualización se ve blando en ellas.
## Cómo crear todos los tamaños a partir de un diseño
Lo tedioso de los tamaños de logo no es el logo, sino rehacer cada vez la portada, el post, la story y la tarjeta a su alrededor. En Gradiently puedes pedir al Designer los demás tamaños, o con Pro adaptar un diseño a todos los tamaños en un paso, y tu fondo se renderiza de nuevo para cada forma en lugar de recortarse. Los tamaños personalizados van de 200 a 8.000 píxeles para cuando un proveedor pide algo poco habitual. [Variantes de logo](https://gradiently.design/es/guide/logo-variations) explica qué versión del logo poner en cada uno.
## FAQ
### ¿Qué tamaño debería tener un logo?
No hay un único tamaño. Guarda un archivo vectorial maestro y exporta una versión para cada uso: SVG para webs, un PNG cuadrado para fotos de perfil, banners anchos para portadas y PDF vectorial para imprenta.
### ¿Cuál es el mejor tamaño de logo para una web?
Usa un SVG y fíjalo por la altura en CSS para que encaje en tu cabecera en todas las pantallas. Indica los atributos width y height para que la página no se mueva mientras carga.
### ¿Qué tamaño debe tener mi logo para la foto de perfil en redes sociales?
Sube una imagen cuadrada y mantén el logo en los dos tercios centrales, porque la mayoría de plataformas recortan la foto de perfil en círculo. Usa tu logo de icono o apilado en lugar de uno ancho.
### ¿Qué resolución debe tener un logo para imprimir?
Usa un PDF o SVG vectorial, que se imprime nítido a cualquier tamaño. Si solo tienes un archivo de mapa de bits, necesita 300 dpi al tamaño final de impresión.
### ¿Por qué mi logo se ve borroso?
Probablemente se exportó a su tamaño de visualización o se amplió a partir de un archivo pequeño. Exporta los PNG al doble del tamaño de visualización desde un vectorial maestro, o usa SVG en la web.