Iconos de PWA que no cambian: manifiesto, rutas y caché

Si el icono de una PWA no se actualiza, empieza por el manifiesto y las imágenes que recibe realmente el navegador. Sustituir el favicon de la pestaña no implica actualizar el icono de una aplicación instalada. Pueden depender de declaraciones y cachés distintas.

El generador de favicon y PWA prepara las imágenes y un manifiesto inicial. Al publicarlos en tu web, debes hacer que las rutas del manifiesto coincidan con la ubicación de esos archivos.

Separa el icono de la pestaña del icono instalado

La declaración de favicon del HTML sirve para la pestaña. Las entradas del manifiesto describen los iconos de la aplicación web. Por eso una página puede mostrar el nuevo favicon mientras un acceso instalado conserva otra imagen.

Anota dónde ocurre el problema: pestaña, diálogo de instalación, lanzador o aplicación ya instalada. Registra también el navegador y el sistema operativo. Con esos datos puedes repetir el fallo y evitar cambios que afectan a un recurso distinto del que quieres corregir.

Abre el manifiesto enlazado por la página

Inspecciona el enlace al manifiesto en el HTML y abre su URL directamente. Debe devolver el JSON previsto, no una página de acceso, una cadena de redirecciones o el HTML genérico de la web. Comprueba la respuesta publicada además del archivo del editor.

La salida actual incluye Web/site.webmanifest, android-chrome-192x192.png y android-chrome-512x512.png. El manifiesto inicial utiliza rutas de iconos relativas a la raíz. Si colocas las imágenes en otra carpeta, actualiza esas entradas; dejar las rutas originales puede apuntar a archivos inexistentes.

Cuando la aplicación vive bajo un subdirectorio, presta especial atención a las rutas que empiezan por /. Estas vuelven a la raíz del origen y no al directorio donde se encuentra la página.

Sigue cada URL de imagen y comprueba sus propiedades

La referencia de iconos del manifiesto de MDN explica src, sizes, type y purpose. Una ruta relativa se resuelve desde la URL del manifiesto; una ruta que empieza por /, desde la raíz del origen.

Abre todas las imágenes declaradas y revisa la respuesta. Una página de error no es una imagen válida aunque la dirección termine en .png. Un archivo que funciona localmente puede faltar en la publicación o quedar bloqueado por la política de imágenes de la página.

Compara las dimensiones declaradas con los píxeles reales. Si modificaste el archivo después de exportarlo, actualiza también el manifiesto. El nombre de archivo no demuestra que una imagen tenga 192 o 512 píxeles.

Declara únicamente los usos que admite el diseño

La exportación actual crea iconos normales. No produce una imagen maskable independiente y probada. Añadir purpose: "maskable" a un icono existente no cambia su composición ni su zona segura.

Si necesitas un recurso maskable, prepara el diseño para ese recorte y compruébalo. Conserva también el icono normal cuando corresponda. La guía de tamaños ayuda a identificar lo que ya has exportado; consulta después los requisitos del navegador que quieres admitir.

Un manifest y unos iconos comprobados en el navegador

El 1 de octubre de 2026, Chrome 154 abrió un sitio local original con el manifest y los iconos exportados. El manifest respondió 200 con application/manifest+json; start_url y scope relativos se resolvieron a la raíz del sitio de prueba. Ambos iconos respondieron 200 y su decodificación confirmó 192 × 192 y 512 × 512 px. Se comprobaron por separado favicon y Apple touch icon.

Descargar el sitio original de prueba de iconos PWA

Ejecuta el comando desde la carpeta extraída y abre http://localhost:8892/. Si mueves los archivos a un subdirectorio, actualiza las URL de iconos relativas a la raíz.

python3 -m http.server 8892 --bind localhost

Inspecciona el navegador antes de borrar datos

Abre las herramientas de inspección de aplicación o manifiesto del navegador. Busca el manifiesto interpretado, las vistas de iconos y los errores de descarga. En la pestaña de red, revisa las respuestas de JSON e imágenes. Esto distingue una ruta incorrecta de una respuesta antigua en caché.

Con una instalación desechable, elimina la aplicación de prueba y vuelve a instalarla una vez verificados los recursos. Si borras los datos del sitio, puedes perder información local de la aplicación. Haz primero comprobaciones específicas, especialmente si se trata de datos reales de un usuario.

Una URL de recurso con una versión deliberada facilita seguir la publicación y la caché. Actualiza la referencia en el manifiesto y registra qué versión instalaste. No generes una URL aleatoria en cada petición: las rutas estables y versionadas son más fáciles de almacenar y diagnosticar.

Comprueba la instalación como un flujo independiente

La guía de instalación de PWA de MDN describe otros requisitos. Los iconos son parte del proceso, pero exportarlos no hace instalable una web en todos los navegadores o sistemas operativos.

Usa un sitio de prueba controlado y el navegador de destino. Registra si se cargó el manifiesto, si se descargaron sus imágenes y si la instalación mostró el diseño esperado. Una prueba de escritorio no equivale a instalar la aplicación en un teléfono.

Una instalación real en Safari

El 2 de octubre de 2026 se añadió el mismo sitio a la pantalla de inicio de un simulador iPhone 17 aislado con Safari en iOS 26.5. Estaba activada la opción Abrir como app web. My App mostró el dibujo XY original y abrió el sitio en una aplicación Web separada, sin la barra de direcciones de Safari. Esto verifica ese flujo local, no la instalación en Chromium, el uso sin conexión ni un dispositivo físico.

Según las instrucciones de Apple para Safari, abre el sitio y elige Más → Compartir → Añadir a pantalla de inicio. Mantén activado Abrir como app web y toca Añadir. Abre después el icono y comprueba el dibujo y el destino. El sitio sigue sin incluir un service worker ni imágenes maskable específicas.

Preguntas sobre iconos de PWA

¿Por qué cambió el favicon, pero no el icono instalado?

Revisa por separado las declaraciones de favicon y manifiesto, y después la caché de la instalación. El favicon puede ser correcto mientras el manifiesto sigue apuntando a otro archivo.

¿Basta con renombrar el archivo para que coincida?

Puedes alinear el nombre, pero también debes comprobar formato y dimensiones reales. Renombrar no convierte ni redimensiona la imagen.

¿Todos los navegadores deberían mostrar lo mismo?

No. Las interfaces de instalación y los usos de iconos admitidos varían. Comprueba el navegador y el dispositivo previstos.

Deja una comprobación reproducible

Confirma la URL del manifiesto, sigue las referencias de imagen y verifica los archivos antes de realizar una instalación nueva de prueba. Para generar recursos de sustitución, vuelve al generador de PWA.