Recomendado: Usa el nombre corto del sitio con su dominio real
Un nombre breve y reconocible más el dominio oficial refuerza que se trata de un sitio del Estado.
Logo
El Logo es el lockup tipográfico del sitio (nombre + dominio) que identifica al servicio en el header y el footer. La Franja es la barra bicolor azul y roja de la bandera que acompaña al lockup y a otras piezas de marca del kit.
Anatomía del componente
Cargando anatomía…
- Contenedor
- Franja de marca
- Texto
- Nombre
- Dominio
Propiedades y configuraciones
Variante
Elige la variante según el header y el tamaño de pantalla.
Para el header de escritorio.
Nombre del sitio
El lockup no hace salto de línea: usa un nombre corto o la sigla, siempre con el dominio oficial.
Cuando usarlo
Úsalo para identificar el sitio o servicio en el header (.cl-header__brand) y en el footer (.cl-footer__logo), siempre como enlace al inicio.
Si necesitas mostrar logos de otras instituciones que colaboran o administran un servicio, usa imágenes institucionales en el contexto que corresponda (p. ej. el Footer ClaveÚnica), no el lockup .cl-logo.
Buenas prácticas
Recomendado: Elige la variante según el espacio disponible
La vertical grande funciona en headers amplios; la pequeña, en headers compactos. Mantén la misma en todo el sitio.
Recomendado: Reserva el escudo para sitios institucionales
La variante horizontal con escudo corresponde a ministerios e instituciones. Servicios y programas usan el lockup tipográfico.
Recomendado: Enlaza el logo al inicio del sitio
Por convención, el logo lleva a la portada del servicio: es la vía de escape que la persona espera si se pierde.
Malas prácticas
No recomendado: No uses nombres largos como logo
El lockup no hace salto de línea: los nombres completos se cortan o desbordan el header. Usa la sigla o el nombre corto.
No recomendado: No uses la Franja como decoración o separador
La Franja es un elemento de identidad. Usarla como divisor entre secciones o como viñeta le quita significado.
No recomendado: No omitas ni alteres el dominio
Un dominio que no es el oficial o un logo sin dominio debilitan la señal de sitio del Estado, clave para prevenir fraudes.
No recomendado: No pongas dos logos en el mismo header
El programa y el servicio compitiendo en la misma barra confunden sobre quién es responsable del sitio.
Recomendaciones de accesibilidad
Da al enlace un nombre claro
El logo es un <a> con aria-label="Ir al inicio". Si el sitio convive con otros servicios, puedes precisarlo (“Ir al inicio de ChileAtiende”).
Oculta la Franja a tecnologías de asistencia
La Franja es decorativa: mantenla con aria-hidden="true" para que no se anuncie como contenido vacío.
Trata el escudo como decorativo cuando el texto ya nombra el sitio
En la variante horizontal, la imagen del escudo va con alt="" y aria-hidden="true", porque el nombre del sitio ya está en el texto o en el aria-label.
Usa texto real, no una imagen del nombre
El nombre y el dominio son texto: se pueden ampliar, traducir y leer con lector de pantalla. No los reemplaces por una imagen del lockup.
No dependas solo del color de la Franja
El azul y rojo identifican la marca, pero el nombre del sitio debe bastar por sí solo para reconocer el servicio.
Última actualización: Octubre de 2026