La mayoría de los favicons reconocibles son solo dos letras. Mira la pestaña del navegador ahora mismo — HN, GH, MDN, AWS. Los monogramas sobreviven a la cuadrícula de 16x16 píxeles porque las formas de las letras se mantienen legibles cuando los logos completos se convierten en ruido.
Esta guía te lleva paso a paso por la creación de un favicon a partir de iniciales que se vea nítido en cada pestaña, en cada dispositivo y en modo oscuro.
Por qué las iniciales funcionan como favicons
Las iniciales comprimen la identidad de marca en la unidad visual más pequeña posible. Dos caracteres a 16x16 siguen leyéndose con claridad, mientras que un logo detallado se vuelve irreconocible. Para MVPs, proyectos secundarios o herramientas internas sin un sistema de diseño, un favicon basado en iniciales es el camino más rápido hacia una presencia profesional en la pestaña.
También evita el error común de subir tu logo completo como favicon, que rara vez sobrevive a la reducción de tamaño.
Lo que necesitarás
- 1–3 caracteres que representen tu proyecto o marca
- Un par de colores con alto contraste (uno para la letra, otro para el fondo)
- Mzu favicondl para generar el paquete completo de iconos
Paso a paso: construye tu favicon de iniciales
1. Elige tus formas de letras
Una letra es lo más rápido. Dos letras se leen con mayor claridad. Tres es el límite práctico antes de que los píxeles a 16x16 se saturen. Evita formas visualmente parecidas (como 'Il' o 'rn') a tamaños pequeños — se fusionan en ruido.
2. Elige un enfoque tipográfico
Tienes dos caminos: una pila de fuentes del sistema que renderiza de forma nativa, o una forma de letra personalizada que diseñes tú mismo. Para la mayoría de proyectos, un sans-serif en negrita (Inter, SF Pro, Helvetica) funciona porque los trazos gruesos sobreviven mejor a la reducción de tamaño que las serifas finas.
3. Prototipa el monograma con HTML y CSS
La forma más rápida de prototipar un monograma es un elemento HTML con CSS y luego hacer una captura como SVG:
<div style='width:64px;height:64px;background:#0a0a0a;color:#fff;display:grid;place-items:center;font:700 32px/1 system-ui;border-radius:12px;'>HN</div>Renderízalo en un navegador, hazle una captura y úsalo como punto de partida en Mzu favicondl.
4. Genera el paquete completo de favicons
Abre Mzu favicondl, sube tu monograma y exporta la pila completa: SVG para navegadores modernos, PNG como fallback, ICO para escritorio legacy y Apple Touch Icon para iOS. La herramienta se encarga automáticamente de todos los tamaños requeridos.
5. Añade una variante para modo oscuro
Las letras claras sobre fondos oscuros pueden desaparecer cuando los usuarios activan el chrome oscuro del navegador. Crea una combinación de colores invertida y enlaza ambas versiones usando la media query prefers-color-scheme, definida en la especificación de rel=icon del HTML living standard:
<link rel='icon' href='/favicon.svg' type='image/svg+xml' media='(prefers-color-scheme: light)'>
<link rel='icon' href='/favicon-dark.svg' type='image/svg+xml' media='(prefers-color-scheme: dark)'>6. Coloca el HTML dentro de tu <head>
Coloca las etiquetas <link> como los primeros elementos dentro del <head> de tu documento para que los navegadores las detecten antes de procesar el resto de la página.
Errores comunes
- Fuentes finas: los trazos por debajo de 2px desaparecen a 16x16. Elige siempre un peso 600 o superior.
- Bajo contraste: gris claro sobre blanco es invisible en las pestañas del navegador. Apunta a al menos 4.5:1 de contraste.
- Demasiado padding: los monogramas necesitan una bounding box ajustada. Deja un 10–15% de padding, no un 30%.
- Olvidar el modo oscuro: tu favicon en modo claro puede volverse invisible en el chrome oscuro del navegador. Configura los iconos de modo oscuro desde el inicio.
Cierre
Un favicon a partir de iniciales es el movimiento profesional más barato que puedes hacer para cualquier proyecto web. Dos letras, un par de colores y cinco minutos con Mzu favicondl te dan un icono de pestaña que sobrevive a los 16x16 píxeles, al modo oscuro y a cualquier navegador.