Marca — Logo, colores y SEO
Sub-tab Marca con 3 zonas internas — identidad (logo + nombre + slogan), colores (8 paletas curadas o 4 colores custom) y SEO (título, descripción, analytics).
La sub-tab Marca es donde defines la identidad visible de tu negocio: tu logo, tu slogan, los colores principales que se aplican en toda tu home, y los datos de SEO que Google y las redes sociales usan para mostrar tu sitio. Es lo primero que personalizas después de crear el sitio porque marca el tono de todo lo demás.
Tiene 3 zonas internas: Identidad (nombre, slogan, ocultar nombre, logo), Colores (elige una de 8 paletas curadas con un click o personaliza los 4 colores a mano), y SEO (título y descripción para Google, imagen para compartir en redes, tipo de negocio Schema.org, analytics de GA4/GTM/Pixel, y un score SEO en vivo del 0 al 100).
Cuando subes un logo, MYPES detecta automáticamente los 4 colores principales del logo (principal, acento, fondo y texto) y los sugiere como tu paleta. También puedes recortar tu logo desde el panel si tiene mucho espacio en blanco alrededor (común cuando descargas un logo profesional con padding). El recorte se aplica inmediatamente y la home se actualiza.
El SEO trae un score live del 0 al 100 que evalúa 8 puntos: título, descripción, imagen para compartir, tipo de negocio Schema, slogan, sección «Sobre mí» llena, WhatsApp configurado y visibilidad pública sin noindex. Sube cada punto al guardar la información correspondiente. Es una guía rápida para que tu sitio aparezca bien en Google.
Manual completo
Identidad
Es la zona principal. Campos:
- Nombre del negocio (obligatorio, máx 120 chars). El nombre que aparece en la cabecera y en el título del navegador. Por defecto se toma del slug que elegiste al crear el sitio.
- Slogan (opcional, máx 255 chars). Frase corta que va debajo del nombre o como texto secundario en el hero. Ejemplos: «Hecho a mano en Lima», «Sabor casero desde 1995», «Confianza que se nota».
- Ocultar el nombre en la cabecera: si tu logo ya incluye el nombre del negocio escrito, activa este toggle para no duplicarlo. La cabecera mostrará solo el logo (sin el texto al lado).
URL de la web
En Identidad ves tu dirección pública: mypes.pe/tu-sitio. Por defecto está bloqueada (no la cambias por accidente). Si necesitas cambiarla, activa la casilla «Cambiar la URL de mi web (avanzado)» y escribe la nueva URL; MYPES te dice al momento si está disponible.
Al cambiar la URL, tu dirección anterior seguirá redirigiendo a la nueva por un tiempo (unos días), y después dejará de funcionar. Por eso el panel te avisa: actualiza tus links, códigos QR y bio de redes con la nueva dirección. Hay un límite de cambios por mes (te muestra cuántos te quedan). Al guardar, el panel te lleva a la nueva dirección.
Cambia la URL solo si de verdad lo necesitas (ej. cambiaste el nombre del negocio). Una URL estable es mejor para tus clientes y para Google.
Logo
Subes el logo desde el botón «Subir nuevo logo». Formatos aceptados: JPG, PNG, WebP, AVIF y HEIC/HEIF (máx 5 MB). Los archivos SVG no se aceptan (por seguridad). El logo se muestra como circular o rectangular según el ajuste «Forma del logo» en Diseño.
Recortar el logo
Después de subir, presiona «Recortar logo» para abrir un editor de recorte. Útil si tu logo profesional viene con mucho padding interno (ej. logo cuadrado pero el dibujo ocupa solo el centro). Arrastras el recuadro para definir el área, presionas Aplicar y MYPES guarda el recorte como tu logo definitivo.
Quitar el logo
Marca el checkbox «Quitar logo actual» y guarda. La cabecera vuelve a mostrar solo el nombre del negocio en texto.
Colores
Tu home se pinta con 4 colores que aplican a toda la plantilla. Tienes 3 formas de elegirlos: una paleta sugerida, custom mano a mano, o restablecer desde tu logo.
Los 4 colores y dónde se aplica cada uno:
- Principal: botones, links, CTAs y acentos importantes.
- Acento: badges, precios destacados, highlights, callouts.
- Fondo: el color de fondo de las páginas del sitio público.
- Texto: el color del texto principal sobre el fondo.
Por defecto: principal #0F172A (azul oscuro), acento #F59E0B (ámbar), fondo #FFFFFF (blanco), texto #0F172A.
Paletas sugeridas (8 opciones curadas)
Es la forma más rápida. Click en una paleta y los 4 colores se aplican de inmediato. Cada paleta tiene su preview de 4 swatches y un nombre — la que esté activa queda marcada con un check.
| Paleta | Vibe / rubro recomendado |
|---|---|
| Minimalista | Blanco y negro con acentos sutiles. Elegante, atemporal. |
| Cálido | Naranjas y cremas. Acogedor, bueno para artesanales y panaderías. |
| Profesional | Azules corporativos. Confiable, B2B, consultorías, clínicas serias. |
| Boutique | Rosas y morados. Moda femenina, belleza, salones, accesorios. |
| Tech | Negro y verde neón sobre fondo oscuro. Modernidad, tecnología, gaming. |
| Natural | Verdes y beige. Eco-friendly, orgánico, viveros, comida saludable. |
| Vibrante | Morado vivo + ámbar. Joven, dinámico, restaurantes, eventos. |
| Monocromo | Un solo tono gris. Limpio, fotográfico, portfolios. |
Cada paleta está validada para que el texto contraste bien con el fondo (legibilidad mínima WCAG AA). Si después editas un color a mano, la paleta se marca como personalizada.
Personalizar los 4 colores
Si las paletas no te convencen, abre la zona «Personalizar colores» y ajusta cada color con su selector. Cambiar cualquiera deja la paleta en modo custom (sin marca de paleta activa). Útil cuando tienes una identidad de marca específica con colores corporativos definidos.
Cuidado con el contraste fondo/texto: si pones ambos muy parecidos el sitio queda ilegible. Apóyate en la vista previa de abajo del form antes de guardar.
Vista previa en vivo
Debajo del form hay un mini-thumbnail que simula tu home con los 4 colores aplicados (un hero con título, texto y un botón). Cambia cualquier color o paleta y la preview se actualiza al instante — sin tener que guardar para ver cómo queda.
Restablecer desde el logo
El botón «Restablecer desde el logo» analiza tu logo actual y propone los 4 colores: el dominante como principal, el más contrastante como acento, el fondo del propio logo (si es plano) como fondo del sitio, y un texto que contraste bien con ese fondo (cálculo WCAG AA). Útil cuando cambias el logo y quieres alinear toda la paleta de un golpe. Si no tienes logo, vuelve a los 4 defaults.
Buen uso del color
- Apóyate en una de las 8 paletas si no eres diseñador — están curadas para que se vean bien sin esfuerzo.
- Mantén alto contraste entre texto y fondo. Texto oscuro sobre fondo claro o texto claro sobre fondo oscuro.
- El acento debe ser distinto del principal para que los badges y precios destaquen.
- Si tu negocio es premium / lujo, prueba Minimalista o Monocromo con un acento dorado custom.
- Si tu negocio es vibrante / divertido, Vibrante o Cálido funcionan bien.
- Si tu rubro es tecnológico o nocturno, Tech (fondo oscuro) destaca.
SEO
Los datos que Google y las redes sociales usan para mostrar tu sitio en buscadores y previews al compartir el link.
Título SEO
Máx 70 caracteres. Lo que aparece como título azul cuando alguien busca tu negocio en Google. Si lo dejas vacío, se usa el nombre del negocio + el slogan.
Buenas prácticas:
- Incluye tu negocio + tu rubro + tu ciudad/distrito. Ejemplo: «Panadería Don José — Pan artesanal en San Juan de Lurigancho».
- Entre 30 y 60 caracteres para que no se corte en los resultados.
Descripción SEO
Máx 170 caracteres. La frase debajo del título azul en Google. Convence a la gente de hacer clic.
Buenas prácticas:
- Entre 120 y 160 caracteres ideal.
- Incluye lo que ofreces, dónde, y una razón para confiar. «Pan de yema artesanal con masa madre, horneado diariamente. Reparto en San Juan de Lurigancho. Pedidos por WhatsApp».
Imagen para compartir
Lo que ve la gente cuando comparte tu link por WhatsApp, Facebook o Instagram. Recomendado 1200×630 px (formato horizontal). Si no subes una, MYPES usa tu logo. Sube tu foto más representativa para que se vea atractiva al compartir.
Tipo de negocio (Schema.org)
Selector con categorías: Restaurante, Cafetería, Salón de belleza, Clínica dental, Tienda, Taller mecánico, etc. Le dice a Google qué tipo de negocio eres para que aparezca con datos enriquecidos (estrellas, horarios, dirección). Si tu negocio no está en la lista, déjalo vacío.
Analytics
Tres campos opcionales para integrar herramientas de análisis:
- Google Analytics 4 (
GA4): formatoG-XXXXXXXX. Crea la cuenta en analytics.google.com. - Google Tag Manager (
GTM): formatoGTM-XXXXXXX. Solo si manejas múltiples scripts. - Meta Pixel (Facebook): solo el ID numérico. Útil si haces publicidad en Facebook/Instagram Ads.
Si no usas ninguno, déjalos vacíos. Tu sitio funciona perfecto sin analytics.
Visibilidad pública (noindex)
Toggle «Ocultar de Google» (noindex). Por defecto apagado (tu sitio aparece en Google). Si lo enciendes, Google ignora tu sitio. Útil cuando estás recién armando el sitio y no quieres que aparezca aún. Recuerda apagarlo cuando termines.
Generar SEO con IA
En la zona SEO encuentras un botón «Generar con IA» que escribe automáticamente el título, la descripción y el tipo de negocio Schema.org leyendo tu información existente (nombre, slogan, sobre mí, servicios). Consume 1 crédito de IA de tu plan. La IA propone valores, tú los revisas, y si te gustan los guardas. Si no, los descartas y nada se perdió.
Sirve cuando no sabes qué poner. La IA conoce las buenas prácticas SEO y adapta al tono de tu negocio.
Score SEO en vivo
Score del 0 al 100 que mide:
| Check | Peso |
|---|---|
| Título SEO entre 30 y 60 caracteres | 20 |
| Descripción SEO entre 120 y 160 caracteres | 20 |
| Imagen para compartir (o logo) | 15 |
| Tipo de negocio (Schema) seleccionado | 15 |
| Slogan del negocio | 10 |
| Sección «Sobre mí» con contenido | 10 |
| WhatsApp configurado | 5 |
| Sitio visible al público (sin noindex) | 5 |
El score se actualiza solo a medida que vas llenando datos. Apunta a 80+. Detalle 100% no es indispensable; lo importante es que los datos críticos estén.
FAQ
¿Qué pasa si no tengo logo profesional? MYPES funciona sin logo. Tu home mostrará el nombre del negocio en texto. Cuando consigas un logo (Canva, Fiverr, diseñador local) lo subes y la home se actualiza.
¿El logo se ve siempre circular? No necesariamente. La forma la decides en Diseño → «Forma del logo»: cuadrado (1:1), apaisado (2:1) o adaptable (ancho fluye con la imagen).
¿Por qué los colores no cambian al guardar? Si guardaste y el preview no refleja el cambio, refresca el navegador (Ctrl+Shift+R) para limpiar caché. Si persiste, escríbenos por WhatsApp.
¿Puedo volver a una paleta sugerida después de personalizar? Sí. Solo haz click sobre la paleta que quieras y los 4 colores se reescriben con los valores curados. No pierdes el logo ni el resto de la configuración.
¿Las paletas se ven igual en todas las plantillas? Sí. Las 12 plantillas consumen los mismos 4 colores como variables CSS, así que la paleta que elijas se aplica de forma consistente en todo el sitio.
¿El SEO funciona inmediatamente? Los datos quedan en tu sitio al guardar. Google los lee en su próximo crawl (puede tardar de unas horas a días). Para acelerar, registra tu sitio en Google Search Console.
¿Hago analytics en GA4 o Meta Pixel? Depende. GA4 es gratuito y de propósito general (ver qué páginas se visitan más). Meta Pixel es necesario si haces Facebook/Instagram Ads. Pueden coexistir.
¿La IA escribe en español peruano? Sí. Los prompts están afinados para usar tuteo y vocabulario peruano. Si te genera algo raro, regenera con un mensaje específico («usar tono más cercano» o «menciona mi distrito»).