Si alguna vez has añadido un sitio web a tu pantalla de inicio de Android y has visto un diminuto icono atrapado dentro de un círculo blanco gigante y feo, has sido testigo de un fallo del manifiesto. Aunque la mayoría de los desarrolladores se centran mucho en el apple-touch-icon para los usuarios de iOS, el ecosistema de Android se basa en un enfoque mucho más estructurado: el Web App Manifest. En 2026, tener simplemente un archivo ICO de 16x16 no es suficiente para parecer profesional en los miles de millones de dispositivos que ejecutan Chrome y otros navegadores basados en Chromium.
Un favicon de manifiesto de aplicación web no es técnicamente un único archivo, sino una declaración dentro de un archivo JSON que le dice al navegador cómo debe comportarse tu sitio cuando se instala como una aplicación. Esto incluye el icono, el color del tema e incluso la pantalla de bienvenida (splash screen) que aparece mientras se carga tu sitio. Si quieres que tu sitio se sienta como una aplicación nativa de primer nivel en el móvil, necesitas hacer esto bien.
El núcleo del Web App Manifest
El manifiesto es un simple archivo JSON, normalmente llamado manifest.json o site.webmanifest. Se encuentra en tu directorio raíz y actúa como un registro central para los metadatos de tu sitio. A diferencia de los favicons estándar que se enlazan directamente en el HTML, el manifiesto te permite proporcionar una variedad de tamaños y propósitos de iconos en un solo bloque de código.
Google y el equipo de Chromium han estandarizado esto para asegurar que las Progressive Web Apps (PWAs) e incluso los sitios web estándar tengan una apariencia consistente. Cuando un usuario hace clic en "Añadir a la pantalla de inicio", el navegador busca este archivo para determinar qué imagen usar. Si falta, Chrome a menudo generará un icono genérico basado en la primera letra de tu dominio o una captura de pantalla de baja resolución de la página, y ambas opciones se ven terribles.
Requisitos previos para una configuración moderna
Antes de que toquemos el código, necesitas imágenes fuente de alta calidad. Recomendamos empezar con un PNG de 512x512 píxeles. Este tamaño es lo suficientemente grande como para cubrir las pantallas móviles de mayor densidad y las pantallas de bienvenida de las PWA. También deberías tener una versión de tu icono que funcione bien como un icono "maskable" (más sobre esto en un momento). Si estás empezando desde cero, quizás quieras leer nuestra guía sobre las mejores prácticas para favicons en 2026 para asegurarte de que tu diseño está listo para escalar.
Paso 1: Crear el archivo manifest.json
Crea un archivo llamado manifest.json en la raíz de tu proyecto. Este archivo debe servirse con el tipo MIME application/manifest+json, aunque la mayoría de los servidores modernos lo manejan automáticamente si usas la extensión .json. Aquí tienes una configuración básica centrada en los iconos:
{
"name": "Mzu favicondl Pro Tool",
"short_name": "Mzu",
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000"
}El array icons es donde ocurre la magia. El icono de 192x192 se usa típicamente para la pantalla de inicio, mientras que el icono de 512x512 se usa para la pantalla de bienvenida que aparece cuando la aplicación se está lanzando. Hemos visto a muchos desarrolladores omitir la versión de 512px, lo que resulta en una pantalla de bienvenida borrosa en dispositivos de gama alta como los últimos teléfonos Pixel o Galaxy.
Paso 2: El ingrediente secreto — Iconos adaptables (Maskable Icons)
Aquí es donde la mayoría de la gente se equivoca. Android usa diferentes formas para los iconos: círculos, cuadrados, rectángulos redondeados o incluso "squiurcles". Si tu icono es un simple PNG cuadrado con un fondo transparente, Android lo encogerá y lo colocará dentro de una forma blanca para asegurarse de que se ajuste al tema del sistema. Esto parece de aficionado.
Para solucionar esto, necesitas un icono adaptable (maskable icon). Este es un icono donde el diseño está contenido dentro de una "zona segura" (el 80% interior de la imagen), y el fondo se extiende hasta los bordes. Luego le dices al navegador que este icono es seguro para recortar añadiendo "purpose": "maskable" al objeto del icono.
{
"src": "/icons/maskable-icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}Al proporcionar tanto un icono estándar como uno adaptable, le das al sistema operativo la flexibilidad de mostrar tu marca perfectamente sin importar la configuración de la interfaz de usuario del usuario. (Consejo profesional: en realidad puedes combinarlos usando "purpose": "any maskable", pero preferimos archivos separados para un mejor control sobre el relleno).
Paso 3: Enlazar el manifiesto en HTML
Una vez que tu archivo JSON y tus imágenes estén listos, debes decirle al navegador dónde encontrarlos. Añade la siguiente línea en el <head> de tus documentos HTML:
<link rel="manifest" href="/manifest.json">Espera, ¿eso es todo? No exactamente. Aunque el manifiesto se encarga de Android y las PWAs, todavía necesitas el apple-touch-icon para Safari. Para una inmersión profunda en ese requisito específico, echa un vistazo a nuestra guía completa de configuración del Apple Touch Icon. Los dos sistemas trabajan juntos para cubrir todo el mercado móvil.
Paso 4: Pruebas y validación
No asumas que funciona solo porque el código se ve limpio. Abre tu sitio en Chrome, presiona F12 para abrir las DevTools y ve a la pestaña Application. En la barra lateral izquierda, haz clic en Manifest. Chrome te dirá si se encontró el manifiesto, si los iconos tienen el tamaño correcto e incluso te mostrará una vista previa de la zona segura del icono adaptable.
| Tamaño del icono | Caso de uso principal | ¿Requerido? |
|---|---|---|
| 192x192 | Icono de la pantalla de inicio de Android | Sí |
| 512x512 | Pantalla de bienvenida de PWA | Sí |
| Cualquiera (SVG) | Elementos de UI escalables | Recomendado |
Errores comunes que debes evitar
Uno de los problemas más frecuentes que vemos en Mzu favicondl es el problema de caché. Los navegadores son increíblemente agresivos al almacenar en caché el archivo manifest.json. Si actualizas tus iconos pero no cambias los nombres de los archivos o el contenido del manifiesto, es posible que los usuarios no vean la actualización durante semanas. Siempre usa versionado (p. ej., icon-192x192.png?v=2) si estás lanzando una actualización de marca.
Otro error es descuidar el theme_color. Esta propiedad no solo afecta al manifiesto; le dice al navegador móvil de qué color pintar la barra de direcciones y la barra de estado del sistema. Si tu icono es azul oscuro pero tu theme_color es blanco, la transición desde la pantalla de inicio a tu aplicación se sentirá discordante y poco pulida.
Finalmente, asegúrate de que tus rutas sean correctas. Las rutas relativas en un archivo de manifiesto son relativas a la ubicación del archivo de manifiesto, no a la página HTML. Siempre recomendamos usar rutas relativas a la raíz (que comienzan con /) para evitar confusiones, especialmente en sitios con estructuras de URL profundas.
Configurar un favicon de manifiesto de aplicación web puede parecer un trabajo adicional en comparación con los viejos tiempos de simplemente soltar un favicon.ico en la raíz. Sin embargo, la recompensa es una presencia profesional y con una sensación nativa en el sistema operativo móvil más popular del mundo. Tómate los diez minutos para hacerlo bien; tus usuarios notarán la diferencia, incluso si no pueden explicar exactamente por qué tu sitio se ve mucho mejor que el de la competencia.