Icona PWA che non cambia: manifest, percorsi e cache

Se l’icona di una PWA non si aggiorna, controlla prima il manifest e le immagini ricevute davvero dal browser. Sostituire il favicon della scheda non aggiorna necessariamente l’icona di un’applicazione installata. Le risorse possono dipendere da dichiarazioni e cache differenti.

Il generatore di favicon e PWA prepara immagini e un manifest iniziale. Per pubblicarli nel sito devi allineare i percorsi dichiarati con la posizione effettiva dei file.

Separa il favicon dall’icona installata

La dichiarazione favicon nell’HTML serve alla scheda del browser. Le voci del manifest descrivono le immagini dell’applicazione web. Una pagina può quindi mostrare il nuovo favicon mentre un collegamento installato conserva un altro disegno.

Annota dove si presenta il problema: scheda, richiesta di installazione, launcher o app già installata. Registra anche browser e sistema operativo. Questi dati trasformano una segnalazione vaga in una prova ripetibile e aiutano a evitare modifiche alla risorsa sbagliata.

Apri il manifest collegato dalla pagina

Ispeziona il collegamento al manifest e apri direttamente quell’URL. Deve restituire il JSON previsto, non una pagina di accesso, un ciclo di reindirizzamenti o un ripiego HTML generico. Verifica la risposta pubblicata oltre al file nel tuo editor.

L’esportazione attuale include Web/site.webmanifest, android-chrome-192x192.png e android-chrome-512x512.png. Il manifest iniziale usa percorsi delle icone relativi alla radice. Se metti le immagini in un’altra cartella, aggiorna le voci invece di lasciarle riferite a file assenti nella radice.

Quando l’applicazione vive in una sottocartella, un percorso che inizia con / torna comunque alla radice dell’origine. Non parte dal percorso della pagina.

Segui ogni URL di immagine

La documentazione MDN delle icone nel manifest spiega src, sizes, type e purpose. Un percorso relativo si risolve dall’URL del manifest; uno con / iniziale, dalla radice dell’origine.

Apri ogni immagine dichiarata e controlla la risposta. Una pagina d’errore non diventa un’immagine perché l’URL termina in .png. Un file presente localmente può mancare nel deployment o essere bloccato dalla politica delle immagini della pagina.

Confronta poi dimensioni dichiarate e pixel reali. Se hai ridimensionato il file dopo la generazione, aggiorna anche il manifest. Il nome non dimostra che l’immagine misuri 192 o 512 pixel.

Dichiara solo gli usi supportati dal disegno

L’output attuale prepara icone normali. Non crea una sorgente maskable separata e verificata. Aggiungere purpose: "maskable" a un’immagine esistente non ne modifica il disegno né l’area sicura.

Se ti serve un’icona maskable, prepara il motivo per quel ritaglio e provalo. Mantieni anche l’icona normale quando opportuno. La guida alle dimensioni aiuta a identificare le uscite disponibili; consulta poi i requisiti del browser previsto.

Un manifest e icone verificati nel browser

Il 1º ottobre 2026 Chrome 154 ha aperto un sito locale originale con manifest e icone esportati. Il manifest ha risposto 200 con application/manifest+json; i valori relativi start_url e scope puntavano alla radice di prova. Entrambe le icone hanno risposto 200 e la decodifica ha confermato 192 × 192 e 512 × 512 px. Favicon e Apple touch icon sono stati controllati separatamente.

Scarica il sito originale di prova delle icone PWA

Esegui questo comando nella cartella estratta e apri http://localhost:8892/. Se sposti i file in una sottocartella, aggiorna gli URL delle icone relativi alla radice.

python3 -m http.server 8892 --bind localhost

Ispeziona il browser prima di cancellare dati

Apri gli strumenti dedicati all’applicazione o al manifest. Cerca il JSON interpretato, le anteprime e gli errori di recupero. Controlla quindi le risposte di rete per immagini e manifest. Potrai distinguere un percorso sbagliato da una vecchia risposta in cache.

Con un’installazione di prova eliminabile, rimuovi l’app e reinstallala dopo avere verificato le nuove risorse. Cancellare anche i dati del sito può eliminare informazioni locali dell’applicazione. Preferisci controlli mirati prima di rimuovere dati reali di un utente.

Un URL volutamente versionato facilita il collegamento tra pubblicazione e cache. Aggiorna il riferimento e annota quale versione hai installato. Evita URL casuali a ogni richiesta: risorse stabili e versionate sono più semplici da diagnosticare e memorizzare.

Verifica l’installazione separatamente

La guida MDN all’installabilità delle PWA descrive altri requisiti. Le icone sono una parte del processo; esportarle non rende il sito installabile in ogni browser e sistema.

Usa un sito controllato e il browser che vuoi supportare. Registra caricamento del manifest, recupero delle immagini e aspetto dell’app installata. Una verifica desktop non equivale a un’installazione su telefono.

Un’installazione reale in Safari

Il 2 ottobre 2026 lo stesso sito è stato aggiunto alla schermata Home di un simulatore iPhone 17 isolato con Safari su iOS 26.5. L’apertura come app web era attiva. My App mostrava il disegno XY originale e apriva il sito in un’applicazione Web separata, senza barra degli indirizzi Safari. È verificato quel flusso locale, non l’installazione Chromium, il funzionamento offline o un dispositivo fisico.

Segui le istruzioni Apple per Safari: apri il sito, poi Altro → Condividi → Aggiungi alla schermata Home. Mantieni attiva l’apertura come app web e tocca Aggiungi. Avvia quindi l’icona e controlla disegno e destinazione. Il sito non fornisce ancora service worker o immagini maskable dedicate.

Domande sulle icone nel manifest PWA

Perché è cambiato il favicon ma non l’icona installata?

Controlla le dichiarazioni separate, poi la cache dell’installazione esistente. Il favicon può essere corretto mentre il manifest punta ancora a un’altra immagine.

Basta rinominare il file?

Puoi allineare il nome, ma controlla anche formato e dimensioni. Rinominare non converte o ridimensiona i byte dell’immagine.

Tutti i browser dovrebbero mostrare lo stesso risultato?

No. Interfacce di installazione e usi delle icone variano. Prova il browser e il dispositivo previsti.

Lascia una verifica ripetibile della PWA

Conferma l’URL del manifest, segui i riferimenti e controlla i file prima di una nuova installazione di prova. Per generare risorse sostitutive, torna al generatore PWA.