40 · Lo pequeño que se lee
Códigos QR y favicons
Dos piezas diminutas con reglas estrictas: un QR que se escanea a la primera y un conjunto de íconos que se reconoce en cualquier pestaña.
Código QR
Ejemplo ilustrativo
- Colores
- Negro (#0B0C0D) sobre blanco. Si el fondo es oscuro, un cuadro blanco alrededor.
- Zona de silencio
- 4 módulos libres alrededor.
- Tamaño impreso
- Mínimo 20 × 20 mm. Distancia de lectura × 0,1 como guía.
- Corrección de errores
- Nivel M (15 %).
- Centro
- Sin logo en el centro. Un QR limpio falla menos.
- Destino
- Una dirección corta de nitente.com, sin parámetros de seguimiento.
- Rótulo
- Siempre un texto cerca: «Escanea para ver el manual» y la dirección escrita.
- Prueba
- Se escanea con dos teléfonos distintos, a tamaño real, antes de imprimir.
Favicons e íconos de app
| Archivo | Tamaño | Versión del símbolo |
|---|---|---|
| favicon.svg | Vectorial | 5 franjas, fondo grafito |
| favicon.ico | 48 × 48 | 5 franjas |
| favicon-16/32/48.png | 16, 32, 48 px | 5 franjas |
| apple-touch-icon.png | 180 × 180 | Ícono Reflect a pantalla completa |
| pwa-192.png / pwa-512.png | 192 y 512 px | Ícono Reflect con margen seguro del 10 % |
| og.png | 1200 × 630 | Fondo negro, logo y titular |
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#08090a" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)">Sí
- El fondo grafito hace que el favicon se vea en pestañas claras y oscuras
- Probar en una pestaña de cada tema
No
- Usar la versión de siete franjas a 16 px
- Recolorear el favicon según el producto de la página