En esta publicación vamos a platicar sobre cuál es el mejor tamaño de logotipo para su sitio web (y Redes Sociales, impresión, etc.)
El logotipo de tu sitio es parte de la marca de tu negocio.
Es lo que la gente usa para identificar fácilmente tu negocio.
Es parte de lo que hace que tu negocio sea único. Es una representación visual que las personas pueden identificar y relacionar fácilmente.
Se necesita mucho para crear un gran logotipo, por ejemplo, para definir lo que representa y si está en línea con los productos, servicios o valores / cultura de la marca.
Un aspecto importante a considerar es mostrar el tamaño correcto del logotipo en tus activos digitales, como tu sitio web.
Tu logotipo debe ser del tamaño recomendado. No debe ser tan pequeño que se estire, ni demasiado grande para parecer demasiado grande.
De esta manera, tu sitio se verá ordenado y profesional.
Además, no te quitará espacio que podría usarse para lograr una mejor experiencia de usuario .
En este artículo, exploramos cuál es el rango de tamaño normal del logotipo del sitio, los tamaños predeterminados en las plataformas web y sociales populares, el tamaño promedio en los sitios populares y se nos ocurre cómo decidir el tamaño ideal.
Resumen de conceptos de logotipos
A continuación hay algunas cosas que tu y tu empresa deben recordar para diseñar un logotipo profesional para tu sitio web:
- Los logotipos se miden en píxeles, por ejemplo, 1200 x 630 px.
- Los archivos vectoriales son los mejores, ya que son fáciles de trabajar.
Puedes convertirlos a cualquier formato de archivo que necesite, por ejemplo, FPG y PNG. - Es bueno tener versiones verticales, horizontales y cuadradas de tu logotipo.
Estas variaciones te permiten colocar tu logotipo donde mejor te parezca; por ejemplo, un fondo, una camiseta, una valla publicitaria, un sitio web o una tarjeta de presentación. - Considera usar un archivo PNG para mostrar tu logotipo en línea que sea inferior a 200 KB. Los archivos PNG son rápidos de cargar y siempre mantienen su nitidez.
Además, los archivos PNG son archivos comprimidos sin pérdidas. Son capaces de mantener mucha calidad, incluso cuando se comprimen a archivos de pequeño tamaño.
Sin mencionar que los archivos PNG permiten fondos transparentes y son adecuados para sitios web, redes sociales y otros usos web. - Un documento de directrices de marca comercial describe dónde y cómo se puede mostrar un logotipo, y en qué dimensiones del archivo.
Básicamente, una directriz de marca permite que una marca permanezca consistente en todas las comunicaciones.
Aquí hay un ejemplo de la sección de Recursos de marca de YouTube para ayudar a los usuarios a seguir sus pautas:
Tenga en cuenta que las dimensiones mínimas del logotipo para la web no deben ser inferiores a 24 píxeles de altura ni superiores a la mitad del tamaño de la pantalla.
Tamaños de logotipo de sitio web estándar
El tamaño del logotipo no solo se refiere al ancho y la altura del logotipo, sino también a su forma y orientación.
Debes asegurarte de que tu logotipo sea versátil, escalable y proporcional para poder usarlo en diferentes plataformas y lugares en tu sitio.
El tamaño de la pantalla también es una consideración más, ya que tu logotipo aún debe mantenerse nítido incluso en pantallas más pequeñas (tabletas, teléfonos inteligentes, relojes inteligentes).
Mejores prácticas de tamaño de logotipo
Dado que va a utilizar tu logotipo en varias plataformas o incluso en lugares de tu sitio, por ejemplo, en tu encabezado, pie de página y favicon, debe cuidar su legibilidad.
Estas son las mejores prácticas para lograr legibilidad sin importar la plataforma o ubicación en tu sitio.
- Ir a un formato png
- Ve por un logo más pequeño
- Ten tu logo en formato vectorial
- Mantén el tamaño del archivo de tu logotipo por debajo de 100 KB
- Tener una versión horizontal, vertical y cuadrada
- Tener diferentes versiones de color: negro, blanco y a todo color
- Usa un formato apropiado para la plataforma que está utilizando
- Ve por la consistencia del tamaño. Un documento de guía de marca será útil aquí.
El rango normal del logotipo del sitio es de entre 250 x 100 px y 400 px x 100 px para un logotipo horizontal, y 160 px x 160 px para uno vertical.
Hay otras escuelas de pensamiento que recomiendan tamaños de logotipo más pequeños (menos de 100 px) como ideales.
Si vas a incluir tu logotipo en tu encabezado, lo mejor es una altura de 20 px a 30 px.
Tamaño predeterminado del logotipo del sitio en varias plataformas
Logotipos en gestores de contenido
¿Cuál debería ser el tamaño de logotipo ideal en los sistemas de gestión de contenido (CMS) y los creadores de sitios web como WordPress, Shopify, Wix y Squarespace? Exploremos eso a continuación:
WordPress
En WordPress, el tamaño del logotipo depende del tema que esté utilizando. Por ejemplo, si está utilizando un tema basado en Divi, el tamaño predeterminado es 93 px x 43 px.
Al cargar, elija un tamaño de 250px X 45px a 250px X 55px para un logotipo horizontal.
De esta manera, habrá suficiente espacio en blanco alrededor del logotipo para que se vea nítido.
Espacio cuadrado
En Squarespace, el tamaño del logotipo está realmente determinado por el tamaño de la imagen que carga.
Es posible cambiar la altura en algunas plantillas. Si no estás seguro de cómo su plantilla muestra logotipos, busca una imagen más grande, ya que una imagen más pequeña perderá legibilidad y calidad cuando se estire.
Squarespace permite formatos .gif, .or, .png y .jpg.
Este artículo muestra los tamaños del logotipo de Squarespace para diferentes plantillas. El tema Bedford permite logotipos con un ancho máximo de 100 px en el escritorio.
Shopify
La mayoría de los temas en Shopify tienen pautas para la altura y el ancho máximos cuando se trata de tamaños de logotipos.
Por ejemplo, el tamaño máximo del logotipo del tema Parallax es 410px X 205px.
Asegúrate de que el tamaño del logotipo que cargues esté dentro de estas dos dimensiones.
Wix
Wix recomienda el uso del formato .png cuando se trata de logotipos.
La imagen debe tener una relación de aspecto de 1: 1, que es una imagen cuadrada. El tamaño recomendado es un mínimo de 3000px X 3000px.
Ejemplos de tamaño de logotipo en sitios web populares
¿Qué tamaños de logotipos usan los sitios populares? Exploremos más abajo:
NASA
El tamaño del logotipo de la NASA es 110px X 92 px. Está en formato .svg. Se utiliza dentro de la barra de navegación y el pie de página.
TripAdvisor
El tamaño del logotipo de Trip Advisor es 250px X 38px. Se utiliza tanto en el encabezado como en el pie de página y está en formato .svg.
El logotipo de Google tiene una ubicación única.
A diferencia de otros logotipos que generalmente se encuentran en la parte superior izquierda e inferior izquierda, el logotipo de Google se encuentra en el centro de la página web.
Su tamaño es 272px X 92px y está en formato .png.
Muestras ejemplares
Ahora, para ayudarte a comprender y decidir qué tamaños de logotipo son adecuados para ti y tu negocio, a continuación, te presentamos siete diseños web.
Hemos categorizado los diseños en tres categorías:
- Diseños web con grandes logotipos
- Diseños de logotipos medianos
- Y pequeños diseños de logotipos web
Ejemplos de tamaño de logotipo de diferentes sitios web.
Diseños web con grandes logotipos
Un sitio que usa logotipos grandes es Influence on YouTube (235 px por 64 px). El logotipo en sí es de tamaño mediano ubicado en la esquina derecha. Es en gran parte porque el logotipo de YouTube está en la parte superior y las palabras están en la parte inferior.
Inluence On YouTube ha hecho un excelente trabajo al enfocarse en el mensaje principal y al mismo tiempo asegurarse de que todo se sienta de marca.
Ve las imágenes a continuación para más información.
El último en nuestra lista de logotipos grandes es Sydney Dogs and Cats Home (391 px por 56 px).
Este sitio web centra el logotipo en la parte superior de la navegación principal.
Esto significa que cualquier persona que visite el sitio verá ese logotipo a primera vista y recibirá el mensaje que desea transmitir con su emblema.
Diseños web de logotipo medio
Si los logotipos supergrandes no funcionan para ti, puedes probar diseños web de logotipos medianos.
Los logotipos medianos tienen aproximadamente 300 px de ancho * 75 px de alto, a diferencia de los logotipos grandes que son algo así como 1000 px de ancho y 200 px de alto.
Los logotipos medianos apilan elementos para un diseño más alto.
El logotipo de Blue Bunny (109 px por 64 px) ha apilado la palabra “blue” y “bunny” con la estilizada B para crear un hermoso logo. Ve la imagen a continuación para más información.
Crazy Coffee Crave (120px por 61.8px) es otra marca con un logotipo de tamaño mediano. La marca tiene la taza de café con las palabras loco café anhelado en su logotipo y en el medio del encabezado, tiene una taza de café.
Echa un vistazo a la imagen a continuación para obtener más detalles.
Designrr ‘s logo (190px por 60px) todavía se considera un logotipo de tamaño mediano.
Aunque el logotipo se ve más pequeño, en comparación con los otros mencionados anteriormente.
El diseño se centra en el contenido y la creación. Véalo a continuación.
En Soluciones Web Mty, usamos un logotipo cuadrado hecho en Illustrator originalmente y exportado a jpg y usado en png. Nuestro logo mide 140px x 140 px. Una opción para dispositivos Apple de 300 px x 300 px. uestro sitio usa una tecnología que cambia “on the-fly” el tamaño del logotipo, según el dispositivo.
Diseño de logotipo pequeño
A estas alturas ya comprendes lo que queremos decir cuando hablamos de diseños de logotipos grandes y medianos.
Echemos un vistazo a los pequeños logotipos.
Probablemente has visto muchos de ellos.
De lo contrario, los dos ejemplos a continuación te ayudarán a comprender cómo se ven los logotipos pequeños.
Top Explainers están usando su ícono de favicon para su logotipo, por lo que se considera un diseño de logotipo pequeño, 40px por 40px.
Definitivamente ayuda a identificar su marca en todos los ámbitos.
¿Qué pasa con los sitios web de renombre como Airbnb (76px por 76px), YouTube? Parece que Airbnb optó por su logotipo sin palabras en comparación con YouTube
YouTube (80 px por 24 px) se apega al uso de su logotipo y nombre de YouTube en su sitio web.
Uber (50px por 17px) resume nuestra lista de ejemplos de diseños web que te ayudarán a decidir qué tamaño de logotipo es el ideal.
El logotipo de Uber es pequeño pero hace todo el trabajo pesado. Solo ver el logotipo recuerda los viajes lujosos, los conductores amigables y los excelentes servicios.
Usar un logotipo en el encabezado de tu sitio web
La mayoría de las empresas muestran logotipos en el lado izquierdo de la barra de navegación superior, por lo tanto, dejan suficiente espacio para mostrar todas las páginas del sitio web.
Un buen número de creadores de sitios web como Weebly y Squarespace hacen que sea más fácil colocar logotipos en el lado izquierdo.
Además, un creador de sitios web puede ayudarlo a decidir el tamaño del logotipo que desea diseñar.
Básicamente, los creadores de sitios web pueden facilitar su trabajo al contemplar la creación de un logotipo adecuado.
Nuestra recomendación, es contratar un diseñador profesional para lograr el máximo uso de tu logotipo así como de tu negocio, que a fin de cuentas representa la imagen de tu negocio.
Tamaños de logo para impresión
El formato de tu logotipo es lo que más importa a la hora de imprimir.
Se prefieren formatos vectoriales como PDF, SVG y EPS para imprimir sobre ráster.
¿Por qué los formatos vectoriales?
Esto se debe a que es fácil editarlos y conservar la calidad cuando se amplía varias veces.
Por ejemplo, puede escalar un logotipo vectorial varias veces, pero la calidad del logotipo sigue siendo la misma.
Además, puede editar, como un logotipo (la imagen completa y sus partes separadas) sin esfuerzo.
Dicho esto, te recomendamos que utilices un logotipo de más de 500 px para letra pequeña y más de 1024 px para letra grande.
Tamaños de logotipos para redes sociales
Es muy importante asegurarse de que tu logotipo se muestre correctamente en diferentes plataformas de redes sociales.
Deseas asegurarte, a primera vista, de que tus clientes puedan discernir lo que dice su imagen corporativa.
La buena noticia es que tu logotipo puede mostrarse correctamente en todas las plataformas si se adhiere a las dimensiones correctas.
A continuación hay un desglose de los conceptos básicos que te ayudarán a comenzar:
Dimensiones del logo en Instagram:
Foto de perfil (circular): 110 x 110px
Dimensiones del logo en Facebook:
Foto de perfil (cuadrada): 160 х 160px
Foto de portada: 1640 x 624px
Dimensiones del logotipo en YouTube:
Foto de perfil (circular): 800 x 800px
Foto miniatura: 1280 x 720px
Foto de portada: 2560 x 1440px
Dimensiones del logo en Twitter:
Foto de perfil (circular): 400 x 400 px
Foto de portada: 1500 х 1500px
Dimensiones del logotipo en LinkedIn:
Foto de perfil (circular): 400 x 400 px
Foto de portada: 646 x 220px
Dimensiones del logo en Pinterest:
Foto de perfil (circular): 165 x 165 px
Al publicar en redes sociales, es mejor usar archivos PNG, ya que son un formato comprimido sin pérdidas.
Exportaciones similares como archivos JPG son comprimidos con pérdida.
Los archivos comprimidos con pérdida se vuelven pixelados o blandos una vez comprimidos; Por lo tanto, no es la mejor opción.
Cambiar el tamaño de tu logo
Es posible cambiar el tamaño de tu logotipo. ¿Cómo?
- Puedes usar editores de imágenes como Photoshop
- Utilice creadores de logotipos en línea como Logaster
- O contrata a un diseñador independiente, nuestra mejor recomendación.
Variaciones de logo y bloqueos
Una variación de logotipo es una versión modificada de su logotipo que utiliza en casos específicos.
Las variaciones del logotipo aumentan la versatilidad de dónde y cómo se puede mostrar tu marca.
Por ejemplo, el logotipo que imprime en tus camisetas puede variar del que tienes en tu Facebook, aunque todos representan a tu empresa.
¿De qué tipos de variaciones de logotipo estamos hablando?
Variaciones de color: negro, blanco, inverso, a todo color / múltiples variaciones de color o fondo transparente
Marcas de palabras y variaciones de símbolos (también llamadas bloqueos de logotipo): logotipo completo, un logotipo con eslogan, logotipo sin eslogan, símbolo, logotipo / marca de palabra o monograma.
Ve la imagen a continuación para más información.
En conclusión
Es posible que los logotipos grandes no sean los adecuados para tu diseño web.
Puede ser una distracción o puede confundirse, el objetivo principal del logotipo es ayudar a los usuarios a saber que están en el sitio web correcto.
La mayoría de los sitios web bien establecidos se adhieren a un logotipo de tamaño moderado, por ejemplo, piensan que Uber es simple y combina perfectamente.
Si tu logotipo es alto o grande, puedes considerar usar una sola letra o acrónimo para ayudar. Piensa en Blue Bunny, usando la letra “B” para unir dos palabras.
Sería mejor tener la letra “B” como su logotipo principal y en su sitio web pueden mencionar Blue Bunny.
Si tu logotipo es pequeño, asegúrate de que pueda leerse o reconocerse fácilmente.
Todo se resume a qué tipo de negocio tienes, tu nicho de mercado, tu productos y servicios que ofreces en tu sitio web, pero sobre todo la personalidad que imprime tu logotipo en tu marca.
Para nosotros en Soluciones Web Mty, los cuadros redondeados de colores representan los tipos de servicios que ofrecemos como soluciones integrales, por ello el tipo de logo que usamos.
Es por ello, que debe un profesional analizar que tipo de logotipo tienes en tu empresa para poderlo plasmar de forma correcta en tu ecosistema digital.
Otras publicaciones de interés:
Diferencias entre una página web y un sitio web
