Has pasado semanas perfeccionando la interfaz de tu sitio. Se ve increíble en tu monitor 5K. Pero luego lo abres en un Android de gama media, lo fijas a la pantalla de inicio y... desastre. En lugar de tu hermoso logo, hay un cuadrado diminuto y borroso dentro de un círculo blanco gigante. Esto sucede porque estás tratando tu favicon como una imagen estática en lugar de una pieza de JSON de metadatos de favicon.

En 2026, un favicon ya no es solo un archivo llamado favicon.ico en tu directorio raíz. Es un conjunto de instrucciones. Los navegadores y los sistemas operativos son más inteligentes ahora; no quieren que les digas qué imagen mostrar, quieren saber cómo mostrar tu marca en una docena de contextos diferentes. Ahí es donde entra el JSON.

¿Qué es exactamente el JSON de metadatos de favicon?

Cuando hablamos de esto, nos referimos principalmente al archivo manifest.json (o site.webmanifest). Es un archivo de texto simple que le dice al navegador todo lo que necesita saber sobre la identidad visual de tu web app. Antes llenábamos el <head> de HTML con veinte etiquetas <link>; ahora usamos una sola línea que apunta a un archivo JSON que hace el trabajo sucio.

Piénsalo como el 'DNI' de tu sitio web. Define el nombre de tu app, los colores de la interfaz y, lo más importante, un array de iconos para diferentes resoluciones. Si quieres ver cómo lo hacen los profesionales, echa un vistazo a nuestra guía sobre site.webmanifest.

La lógica detrás de la estructura JSON

¿Por qué usar JSON en lugar de más etiquetas HTML? Porque el JSON es estructurado, extensible y fácil de leer para agentes que no son navegadores (como crawlers de buscadores o lanzadores de SO) sin cargar todo el DOM. Un archivo típico incluye claves como icons, theme_color y background_color. Esto permite que el SO personalice la 'pantalla de carga' para que coincida con tu marca antes de que el sitio termine de cargar.

{
  'name': 'Mzu favicondl',
  'short_name': 'favicondl',
  'icons': [
    {
      'src': '/icons/icon-192.png',
      'sizes': '192x192',
      'type': 'image/png'
    },
    {
      'src': '/icons/maskable-512.png',
      'sizes': '512x512',
      'type': 'image/png',
      'purpose': 'maskable'
    }
  ],
  'theme_color': '#ffffff',
  'background_color': '#ffffff',
  'display': 'standalone'
}

El secreto del icono 'Maskable'

Si algo debes aprender hoy, es la propiedad purpose: 'maskable'. A Android le encanta aplicar sus propias formas a los iconos (círculos, cuadrados redondeados). Si tu icono no es 'maskable', el SO simplemente encogerá tu logo y lo pondrá sobre un fondo blanco. Se ve fatal. Un icono adaptable tiene un margen extra para que el SO pueda recortarlo como quiera sin cortar tu logo. Aprende más en nuestro artículo sobre iconos adaptables.

Mejores prácticas para 2026

Al final del día, tu favicon es la parte más pequeña de tu marca, pero es la que se queda con el usuario cuando cierra la pestaña. Está en sus marcadores y en su pantalla de inicio. Usar Mzu favicondl para generar tus recursos asegura que tu metadato esté limpio y tu marca se vea profesional en cada dispositivo. No dejes que un JSON mal hecho sea la razón por la que tu sitio parezca un proyecto de aficionados.