Marca
La pestaña Configuración → Marca es donde estableces el logo, favicon, colores primario y de acento, tipografía y texto de pie de página. Todo lo que cambias aquí aparece en la cabecera de la barra lateral, la pestaña del navegador, la pantalla de inicio de sesión, los correos transaccionales y el formulario público de visitantes.
Abre la pestaña Marca
Desde la barra lateral, haz clic en Configuración. La primera pestaña — Marca — está seleccionada por defecto. El formulario está dividido en cuatro secciones: Tipografía, Logo e Imágenes, Colores y Pie de página.
Tipografía
Título de la plataforma
El texto que aparece junto al logo en la cabecera de la barra lateral y la pestaña del navegador. La mayoría de las iglesias usan su nombre de marca — "Iglesia Gracia", "Hope City", "Eschatos". Mantenlo corto; los títulos largos se ajustan de forma incómoda en la barra lateral móvil.
Subtítulo
Una segunda línea bajo el título en la barra lateral — útil para "Colombia", "Sede principal", o cualquier cosa que diferencie esta organización de sus hermanas. Déjalo vacío si no quieres una segunda línea.
Logo e imágenes
Logo
Haz clic en Subir para elegir un archivo de tu computadora, o Biblioteca de medios para reutilizar una imagen ya en almacenamiento. De cualquier forma, la imagen pasa por un diálogo de recorte cuadrado antes de guardarse — arrastra el marco de recorte para centrar tu logo y haz clic en Aplicar.
TIP
Usa un PNG transparente o SVG. PNG es más compatible (cada navegador, cada cliente de correo); SVG es más nítido en pantallas retina pero algunos clientes de correo antiguos lo renderizan como un ícono de imagen rota. En caso de duda, sube un PNG.
Tamaño recomendado: al menos 256×256. La barra lateral muestra el logo a 14×14 (unidades de Tailwind, ~56px); la cabecera del correo usa 80×80. Cualquier cosa más pequeña que 128px se ve borrosa en pantallas retina.
Favicon
Mismo flujo de subida, pero recortado a 32×32 o 64×64. El favicon es lo que se muestra en las pestañas del navegador y los marcadores. También es lo que iOS usa como ícono de la pantalla de inicio si el manifest de PWA no está configurado — consulta Configuración PWA para la mejor respuesta.
Formatos aceptados: PNG, ICO, SVG. El diálogo de recorte limita la salida a 192px para que el archivo se mantenga pequeño.
Colores
Color primario
El color usado para botones, enlaces, el elemento activo de la barra lateral y las pestañas activas. Elige algo que contraste bien con texto blanco — las etiquetas de los botones son blancas con peso de fuente ~14px, así que los colores primarios muy pálidos fallarán las verificaciones de accesibilidad.
Color de acento
Un color secundario para insignias, estados hover de la barra lateral y botones de acción no primarios. A menudo una sombra más clara del primario — ej. primario #3563a8 con acento #6b94d6. La vista previa en vivo en la parte inferior de la sección Colores muestra ambos lado a lado para que puedas verificar el par.
Puedes escribir un código hex directamente o usar la muestra del selector de color. Ambos campos se mantienen sincronizados.
Vista previa en vivo
Una pequeña tarjeta en la parte inferior de la sección Colores muestra un botón primario, un botón de acento y dos círculos rellenos usando lo que esté en las entradas. Se actualiza a medida que escribes — no se requiere guardar para previsualizar.
Pie de página
El pie de página aparece en la parte inferior de cada página en la aplicación de administración y en algunos correos transaccionales. Hay cuatro campos:
| Campo | Ejemplo | Notas |
|---|---|---|
| Línea de copyright | "© Y Todos los derechos reservados." | Y se reemplaza con el año actual automáticamente. |
| Prefijo construido por | "Construido por" | El texto introductorio antes del nombre de tu empresa. |
| Nombre de la empresa | "Genio Del Comercio Digital SAS" | Se muestra como un hipervínculo. |
| URL de la empresa | https://geniodelcomerciodigital.com/ | A dónde enlaza el nombre de la empresa. Abre en una nueva pestaña. |
La mayoría de las iglesias dejan la línea de construido por como el predeterminado de GCM para dar crédito a la plataforma. Si haces white-label, reemplázalo con tu propia consultoría u omítelo borrando los cuatro campos.
Guardar y ver el cambio
Haz clic en Guardar marca en la parte inferior de la tarjeta de Marca. El toast confirma; la barra lateral se actualiza inmediatamente para ti, pero otras pestañas y otros usuarios ven el cambio solo después de una recarga forzada (el toast te lo dice). El navegador almacena en caché el favicon de forma agresiva, así que puede tomar unos minutos para que el nuevo ícono aparezca en la pestaña de todos.
Qué se guarda dónde
Todos los valores de marca aterrizan en app_settings bajo las claves brand_* y footer_*:
brand_title,brand_subtitlebrand_logo,brand_favicon(rutas de almacenamiento)brand_primary_color,brand_accent_colorfooter_line1,footer_line2_prefix,footer_link_text,footer_link_url
El frontend lee estos vía BrandingContext en el inicio de la aplicación, lo que significa que una nueva pestaña se abre con tu marca ya aplicada — sin parpadeo de contenido sin estilo.
Marca del sitio público
El constructor de sitios web tiene su propio logo y paleta de colores, separados de la marca de la aplicación de administración. Consulta Marca del Constructor de Sitios Web para configurar esos — están separados intencionalmente para que tu sitio orientado a miembros pueda verse diferente de tu administración orientada al personal.
Errores comunes
"Subí un nuevo logo y el antiguo sigue apareciendo." Recarga la página de forma forzada (Cmd+Shift+R / Ctrl+Shift+R). El navegador almacena en caché la imagen del logo; la URL cambia cuando subes uno nuevo pero las páginas en caché mantienen la antigua hasta el refresco.
"Mi color primario es difícil de leer en fondos claros." La aplicación de administración usa tu primario como fondo de botón con texto blanco. Si la proporción de contraste está por debajo de 4.5:1, los usuarios de lectores de pantalla y cualquiera bajo luz solar brillante tendrán dificultades. Pasa tu color por un verificador de contraste antes de guardar.
"El favicon nunca se actualiza." Los navegadores almacenan favicons de forma agresiva — a veces durante días. Prueba una ventana privada para verificar que el nuevo favicon esté realmente activo antes de asumir que el guardado falló.
Próximos pasos
- Datos básicos de la organización — establece la configuración regional antes de la marca para que se renderice el idioma correcto.
- Configuración PWA — la aplicación instalable tiene su propio esquema de colores.
- Marca del Constructor de Sitios Web — colores del sitio público.