Tamaño de logo para webs, redes sociales e imprenta

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.

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.

<a class="logo" href="/">
  <img src="/logo.svg" alt="Fern Studio" width="120" height="32">
</a>

<style>
  .logo img {
    height: 32px;   /* set by height */
    width: auto;
    max-width: 40vw; /* never crowds a small phone */
  }
  @media (min-width: 768px) {
    .logo img { height: 40px; }
  }
</style>

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 enumera los archivos exactos, y las directrices de favicon 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.

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.

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 tiene todos los tamaños de post.

Tamaños de logo para email e imprenta

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 antes de enviar nada a una imprenta, y consulta diseño de firma de email para la firma en sí.

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 explica qué versión del logo poner en cada uno.