Estás preparando la cabecera de tu web y el símbolo que queda bien en grande se vuelve ilegible dentro del avatar. Para una marca que aún necesita que la reconozcan por su nombre, suele funcionar mejor un logotipo tipográfico o combinado, aunque la longitud del nombre y los tamaños de uso pueden cambiar la elección.
El tipo adecuado depende de cómo se usará la marca
- Logotipo: el nombre se dibuja con letras.
- Isotipo: un símbolo representa la marca sin texto.
- Imagotipo: nombre y símbolo pueden separarse.
- Isologo: texto y símbolo forman una pieza integrada.
- Para una web: prepara versiones que funcionen en la cabecera, el móvil y el favicon.
Las cuatro formas se distinguen por cómo usan el nombre
Un rótulo puede llevar letras, un símbolo o ambos; la diferencia está en si el nombre aparece y si puede separarse del icono. En el uso diario se llama «logo» a casi cualquier marca gráfica, pero distinguir las estructuras ayuda a pedir las piezas adecuadas.
| Tipo | Cómo se construye | Ejemplo conocido |
|---|---|---|
| Logotipo | El nombre es el elemento gráfico principal. | Coca-Cola, reconocible por su escritura característica. |
| Isotipo | Un símbolo identifica sin escribir el nombre. | El swoosh de Nike. |
| Imagotipo | Nombre y símbolo aparecen juntos, pero pueden usarse por separado. | Adidas, con versiones que combinan el nombre y el símbolo. |
| Isologo | Texto y forma están integrados en una composición. | El emblema circular de Burger King. |
La terminología puede variar entre diseñadores y países; lo útil es describir qué elementos necesitas y cómo deben funcionar. Al encargar un diseño, pedir «el nombre, un símbolo y versiones con ambos» evita discusiones sobre si una pieza se llama imagotipo o isologo.
Una marca nueva suele necesitar que el nombre siga visible
Un símbolo aislado puede ocupar poco espacio, pero primero alguien tiene que asociarlo con tu negocio. Para una web que aún está dando a conocer la marca, yo priorizaría un nombre legible, acompañado de un símbolo si ese elemento también tiene un uso claro.
| Situación | Riesgo probable | Qué elegir o preparar |
|---|---|---|
| Nombre nuevo y poco conocido | El símbolo no explica quién está detrás. | Logotipo o combinación con el nombre visible. |
| Nombre largo en una cabecera estrecha | El texto se reduce demasiado. | Una composición horizontal y una versión compacta para móvil. |
| Avatar o favicon cuadrado | El nombre completo apenas se lee. | Un símbolo o monograma derivado de la identidad principal. |
| La marca necesita un sello para etiquetas o envases | Las piezas separadas pueden perder unidad. | Un emblema integrado, con una versión simplificada para tamaños pequeños. |
La decisión depende del soporte, no de cuál forma parezca más moderna. Si el símbolo funciona solo en un avatar pero desaparece en la cabecera, necesitas una familia de versiones, no obligar a una única composición a resolverlo todo.
La exención de contraste del logotipo no cubre toda la cabecera
Hay una excepción que suele confundirse con permiso para usar cualquier color: las WCAG 2.2 del W3C eximen del contraste mínimo al texto que forma parte de un logotipo o nombre de marca. Esa excepción se refiere al logotipo; el resto del texto de la web sigue necesitando contraste suficiente.
Si el logo enlaza con la página de inicio, comprueba también que el enlace pueda identificarse y usarse con teclado. El W3C explica que un SVG puede incluir un título accesible asociado al elemento gráfico; si el logo se inserta como imagen, el texto alternativo debe comunicar su función, por ejemplo, «Inicio de [nombre de marca]». Un color corporativo no sustituye esa información.
Sinceramente, no reduciría la accesibilidad a una casilla que el logo «cumple» por ser un logo. En una cabecera, el nombre, el enlace y el indicador de foco forman parte de la experiencia de navegación, aunque el símbolo tenga una excepción concreta.
Una versión adaptable evita que el logo se rompa en móvil
Una composición que funciona en una pantalla grande puede ocupar demasiado en un teléfono. La guía de Material Design de Google describe el uso adaptable de una marca que pasa de la versión completa a un símbolo reducido; para una web, esa lógica permite conservar la identidad cuando el espacio escasea.
Pide los archivos pensando en el uso, no solo en la presentación: un original vectorial para escalar, una versión horizontal para la cabecera y otra compacta para espacios cuadrados. Si una variante pierde legibilidad al reducirse, simplifica el detalle antes de encogerla más.
- Cabecera de escritorio: prueba la composición completa junto a la navegación.
- Móvil: revisa si el nombre sigue legible cuando la cabecera se estrecha.
- Favicon y avatar: usa un símbolo o iniciales reconocibles sin el nombre completo.
- Fondo claro y oscuro: comprueba que las variantes disponibles mantengan definición en ambos.
Elige una estructura y encarga sus versiones de uso
Para una marca que empieza en internet, mi elección sería un logotipo o imagotipo que mantenga visible el nombre, más un símbolo compacto si hace falta para el avatar. Si la marca ya se reconoce por un icono, el isotipo puede tomar más protagonismo; lo importante es que la versión pequeña conserve una relación clara con la identidad completa.
Antes de cerrar el diseño, coloca cada variante en una cabecera real y reduce el símbolo hasta el tamaño del favicon. Si el nombre desaparece o el icono se vuelve una mancha, todavía falta una versión útil para la web.