# Variantes de logo: principal, apilada, icono y monocolor [Canonical HTML page](https://gradiently.design/es/guide/logo-variations) Un solo logo no cabe en un banner ancho, un círculo diminuto y un sello de caucho. Una pequeña familia de variantes de logo sí. Este es el conjunto que necesitan casi todas las marcas, y las reglas para que siga pareciendo un solo logo. ## The short version - Las variantes de logo son distintas disposiciones y coloraciones del mismo logo, creadas para que encaje en cada espacio donde aparece. - Un conjunto típico incluye un logo principal, una versión horizontal, una apilada, un icono o submarca y versiones a una tinta en blanco y negro. - Todas las variantes deberían compartir las mismas letras, el mismo símbolo y los mismos colores, para que se lean como un solo logo y no como varios. - El icono o submarca es la versión que se usa en fotos de perfil, favicons y otros espacios cuadrados pequeños. - Deja por escrito qué variante va en cada sitio, para que nadie tenga que adivinar ni estirar el logo principal para que quepa. Las **variantes de logo** son las distintas versiones de un mismo logo, dispuestas y coloreadas para adaptarse a espacios diferentes. La mayoría de marcas necesitan cinco: un logo principal, una composición horizontal para espacios anchos, una versión apilada para los cuadrados, un icono o submarca para espacios diminutos y versiones a una tinta en blanco y negro. Construidas a partir de las mismas piezas, permiten que el logo se vea bien en un banner, en una foto de perfil y en un sello a una tinta sin estirarlo ni aplastarlo nunca. ## Por qué un solo logo no basta Un logo diseñado para el rótulo de una tienda suele ser demasiado ancho para una foto de perfil y demasiado detallado para un favicon. Cuando solo hay un archivo, la gente improvisa: lo reduce hasta que no se lee, lo aplasta para que quepa o lo pone sobre un fondo donde desaparece. Las variantes lo resuelven de antemano. Decides una vez cómo se adapta el logo y todo el mundo sigue la misma respuesta. ## Las cinco variantes de logo que necesitan casi todas las marcas | Variante | Qué es | Úsala para | | --- | --- | --- | | Principal | El logo completo tal como se diseñó, normalmente símbolo más nombre | Cabecera web, rótulos, la primera página de documentos | | Horizontal | Símbolo a la izquierda del nombre, en una línea | Banners, cabeceras de email, barras de navegación estrechas | | Apilada | Símbolo encima del nombre, centrado | Posts cuadrados, etiquetas de envase, merchandising | | Icono o submarca | El símbolo o las iniciales solos | Fotos de perfil, favicons, iconos de app, marcas de agua, pegatinas | | A una tinta | Cualquiera de las anteriores en negro sólido o blanco sólido | Impresión a una tinta, fotos, relieve seco, sellos, fondos oscuros o cargados | Puede que tu logo principal ya sea horizontal o apilado. En ese caso necesitas la otra disposición, más el icono y las versiones a una tinta. Algunas marcas añaden una versión **solo logotipo**, el nombre sin el símbolo, para sitios donde el símbolo quedaría demasiado pequeño para leerse. Y una versión de **insignia** o emblema puede ser útil para pegatinas y precintos de envase. Ninguna es imprescindible desde el primer día. ## Cómo asignar cada variante a su espacio La forma del espacio decide la variante. Los espacios anchos llevan la composición horizontal, los cuadrados la versión apilada o el icono, y todo lo que sea más pequeño que una miniatura lleva solo el icono. - Cabecera de email 1200×600: horizontal: 1200 × 600 - Instagram cuadrado 1080×1080: apilada: 1080 × 1080 - Story 1080×1920: apilada o icono: 1080 × 1920 - Banner de LinkedIn 1584×396: horizontal: 1584 × 396 La forma del lienzo te dice qué versión usar. Un logo apilado en un banner estrecho desperdicia casi todo el espacio; uno horizontal en un cuadrado se queda diminuto. Una cabecera de email ancha con el nombre Fern Studio en una línea y una frase corta sobre las novedades, sobre un degradado verde En una cabecera de email ancha, el nombre va en una línea y el espacio se lee con naturalidad. Un post cuadrado de Instagram con la palabra Studio encima de un Fern grande, apilados y centrados sobre el mismo degradado verde En un cuadrado, la disposición apilada llena el marco y se mantiene lo bastante grande para leerse. ## Variantes de color: a todo color, invertida y monocolor Cada disposición necesita también versiones de color. No te hacen falta todas las combinaciones, pero sí estas cuatro, para que el logo tenga respuesta en fondos claros, fondos oscuros e impresión a una tinta. - A color sobre claro: #14532d - Invertido sobre oscuro: #f7f3ea - Negro monocolor: #111111 - Blanco monocolor: #ffffff Verde helecho para el uso diario, una versión papel cálido para fondos oscuros y negro y blanco puros para sellos, fotos y trabajos a una tinta. Sobre degradados y fotos, la versión a una tinta en blanco o negro suele ser la acertada, porque un logo a dos colores puede chocar con lo que tiene detrás. [Logo sobre fondo degradado](https://gradiently.design/es/guide/logo-on-gradient-background) muestra cómo elegir entre ellas, e [ideas de fondo para logos](https://gradiently.design/es/guide/logo-background-ideas) tiene fondos que le sientan bien a un logo sencillo. ## Cómo crear un conjunto de variantes de logo 1. **Parte del logo principal en vectorial** Cada variante se reorganiza a partir de las mismas piezas maestras. Nunca redibujes el símbolo ni vuelvas a componer el nombre con otro peso. 2. **Crea las composiciones horizontal y apilada** Mueve el símbolo al lado o encima del nombre. Fija la separación entre ambos como una medida, por ejemplo la altura de las mayúsculas del nombre. 3. **Simplifica el icono** Toma el símbolo o las iniciales solos, quita el detalle fino y engrosa las líneas finas. Tiene que leerse a tamaños muy pequeños, así que pruébalo como [favicon](https://gradiently.design/es/guide/favicon-design). 4. **Crea las versiones de color** A todo color, invertida, negra y blanca para cada disposición. Revisa la versión invertida sobre tu color de marca más oscuro. 5. **Define el espacio de respeto y los tamaños mínimos** Establece el margen vacío alrededor de cada versión y el tamaño mínimo al que puede usarse, en píxeles para pantalla y en milímetros para imprenta. 6. **Exporta y nombra bien los archivos** SVG, PDF y PNG transparente para cada una, con nombres como `fern-stacked-reversed.svg` para que la gente elija el correcto sin abrirlo. ## Reglas para que las variantes parezcan un solo logo ### Evita - Estirar o aplastar una versión para que quepa en un espacio - Redibujar el icono de forma distinta para cada plataforma - Colores nuevos que solo aparecen en una variante - Añadir el eslogan a algunas versiones y a otras no, al azar - Usar el logo principal donde corresponde el icono ### Haz - Elige la variante cuya forma coincide con el espacio - Un único icono, usado en todos los sitios que piden un cuadrado pequeño - La misma paleta en todo el conjunto - Trata la composición con eslogan como una variante documentada propia - Respeta el espacio de respeto y los tamaños mínimos Documenta el conjunto en una sola página de tu [guía de estilo de marca](https://gradiently.design/es/guide/brand-style-guide): cada variante, sus versiones de color, el espacio de respeto, el tamaño mínimo y dónde se usa. Luego pon los archivos donde la gente diseña de verdad. En Gradiently el kit de marca guarda varios logos uno junto a otro, así que la versión apilada, el icono y el archivo invertido están a un clic en el Studio, y el Designer puede aplicar el kit al maquetar un diseño. [Kit de marca](https://gradiently.design/es/guide/brand-kit) cubre todo lo demás que debería ir con ellos. ## FAQ ### ¿Qué son las variantes de logo? Son versiones alternativas de un mismo logo, como la horizontal, la apilada, el icono y la versión a una tinta, creadas para que el logo encaje en cualquier espacio sin deformarse. ### ¿Cuántas variantes de logo necesito? La mayoría de marcas necesitan unas cinco: principal, horizontal, apilada, un icono o submarca y versiones en blanco y negro. Añade más solo cuando un uso real lo pida. ### ¿Qué es una submarca de logo? Una submarca es una versión simplificada y normalmente compacta del logo, a menudo las iniciales o el símbolo solo, que se usa en espacios pequeños como fotos de perfil, favicons y pegatinas. ### ¿Qué es un logo responsive? Un logo responsive es un conjunto de variantes que se simplifican a medida que el espacio se reduce, desde la composición completa en pantallas grandes hasta solo el icono en los tamaños más pequeños. ### ¿Qué variante de logo debo usar para una foto de perfil? Usa el icono o submarca, o la versión apilada si es corta, sobre un fondo cuadrado. Los logos horizontales anchos se vuelven ilegibles en un círculo pequeño.