# ipv6.sx · Kit de marca A1

Versión final del concepto entrelazado: un seis clásico con el remate superior más recto y «.s» y «x» integrados a ambos lados. El logotipo completo conserva «ipv»; el símbolo para favicon y avatar utiliza únicamente el seis con «.sx».

## Elegir la variante

**`light` y `dark` indican el fondo de destino**, no el color de la tinta:

| Variante | Uso | Colores |
| --- | --- | --- |
| `light` | Fondos claros | Tinta `#232722` y verde `#236333` |
| `dark` | Fondos oscuros o negros | Marfil `#fafaf7` y verde `#76b77e` |
| `black` | Reproducción en una sola tinta negra | Negro |
| `white` | Reproducción en una sola tinta blanca | Blanco |

Los logotipos y símbolos sueltos tienen fondo transparente. Las variantes `on-light` y `on-black` incorporan un fondo sólido, al igual que las composiciones sociales y los iconos de aplicación. Para una cabecera web, utiliza preferentemente el SVG transparente adecuado al fondo real de la cabecera.

## Contenido

- **`svg/`**: logotipos `logo-light.svg`, `logo-dark.svg`, `logo-black.svg` y `logo-white.svg`; símbolos `mark-light.svg` y `mark-dark.svg`; composiciones con fondo `logo-on-light.svg` y `logo-on-black.svg`.
- **`png/`**: logotipos para fondo claro y oscuro en anchos de 256, 512, 1024 y 2048 px; símbolos para fondo claro y oscuro en tamaños de 128, 256, 512 y 1024 px.
- **`favicon/`**: `favicon.svg` adaptable al tema, `favicon.ico` con tamaños de 16, 24, 32, 48 y 64 px, y PNG individuales `favicon-16x16.png`, `favicon-32x32.png`, `favicon-48x48.png` y `favicon-64x64.png`.
- **`favicon/`** también contiene `apple-touch-icon.png` de 180 px, `android-chrome-192x192.png`, `android-chrome-512x512.png` y `maskable-icon-512x512.png`.
- **`site.webmanifest`**: manifiesto en la raíz del kit, con los iconos de aplicación en `favicon/`.
- **`social/`**: `og-light.png` y `og-dark.png` de 1200 × 630 px; `avatar-light.png` y `avatar-dark.png` de 512 × 512 px.
- **`web-buttons/`**: botones `ipv6-sx-light-88x31.png` e `ipv6-sx-dark-88x31.png`.
- **`index.html`**: galería para comparar las variantes y verlas sobre sus fondos de destino.

Los SVG usan trazados vectoriales: no requieren fuentes instaladas ni contienen imágenes raster incrustadas. Pueden escalarse sin perder definición. Los PNG están preparados para los usos que requieren una imagen raster.

El favicon tiene un ajuste óptico para tamaños pequeños, con el punto, la «s» y la «x» reforzados. A 16 px el espacio es muy limitado: comprueba el resultado en la pestaña del navegador y no esperes el mismo detalle que en el logotipo grande.

## Instalación en la web

Copia el contenido del kit a **`/assets/brand/`**, manteniendo las carpetas. Este paquete entrega los archivos; no despliega cambios en la web.

Añade al `<head>`:

```html
<link rel="icon" href="/assets/brand/favicon/favicon.ico" sizes="any">
<link rel="icon" href="/assets/brand/favicon/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/assets/brand/favicon/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/assets/brand/favicon/favicon-16x16.png" type="image/png" sizes="16x16">
<link rel="apple-touch-icon" href="/assets/brand/favicon/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/assets/brand/site.webmanifest">
```

El favicon SVG responde a `prefers-color-scheme`. El archivo ICO y los PNG sirven como alternativas estáticas.

Para un logotipo que acompañe al tema del sistema:

```html
<a href="/" aria-label="ipv6.sx, inicio">
  <picture>
    <source
      media="(prefers-color-scheme: dark)"
      srcset="/assets/brand/svg/logo-dark.svg"
      type="image/svg+xml">
    <img
      src="/assets/brand/svg/logo-light.svg"
      alt="ipv6.sx"
      width="256"
      style="display: block; max-width: 100%; height: auto;">
  </picture>
</a>
```

Si la web tiene un selector de tema propio, selecciona el archivo según el tema activo de la web. Si la cabecera siempre es negra, usa siempre `logo-dark.svg`, aunque el sistema esté en modo claro.

Para compartir la web con una imagen de vista previa:

```html
<meta property="og:image" content="https://ipv6.sx/assets/brand/social/og-light.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Logotipo de ipv6.sx">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://ipv6.sx/assets/brand/social/og-light.png">
```

Puedes sustituir `og-light.png` por `og-dark.png` si prefieres la composición negra. Las vistas previas sociales no cambian automáticamente con el tema del visitante.

## Uso del logo

Conserva las proporciones y deja espacio libre alrededor del conjunto. Usa el símbolo aislado en avatares, iconos y espacios cuadrados; reserva el logotipo completo para cabeceras, firmas y composiciones horizontales. Para impresión o nuevos tamaños, parte de los SVG originales.