App Router può produrre gli elementi delle icone a partire da file convenzionali o dall’oggetto metadata. Entrambi gli approcci sono validi, ma mescolarli senza una regola chiara può facilmente creare dichiarazioni in conflitto.
Scegli le convenzioni dei file
Inserisci favicon.ico nella radice di app. I file icon supportati possono trovarsi in un segmento di percorso, mentre apple-icon descrive l’icona destinata ai dispositivi Apple.
Next.js rileva questi file, determina gli attributi utili e aggiunge i relativi elementi link nel head. Un’icona inserita in un segmento si applica ai percorsi di quel segmento.
| File | Posizione | Scopo |
|---|---|---|
| favicon.ico | app/ | Alternativa del sito |
| icon.svg | segmento app | Icona del browser |
| apple-icon.png | segmento app | Icona Apple |
| manifest.webmanifest | segmento app | Manifest per l’installazione |
Usa i metadati per percorsi espliciti
Se le risorse si trovano in public o su un host di immagini, dichiara metadata.icons in un layout o una pagina. Specifica icon, apple e, se necessario, shortcut usando URL coerenti.
I metadati di un segmento figlio possono sostituire campi composti ereditati dal padre. Controlla il head finale su più percorsi senza presumere che tutte le voci del padre siano state unite.
Per un’icona generata su richiesta, Next.js supporta anche icon.tsx o icon.js. La funzione restituisce dati immagine con dimensioni e tipo di contenuto espliciti. Riserva questo approccio a composizioni davvero dinamiche: un file statico è più semplice da memorizzare nella cache, controllare e servire in modo coerente tra le pubblicazioni.
Collega il manifest e le sue icone
Un file manifest statico o una funzione manifest.ts può descrivere il nome dell’applicazione, i colori e le icone installabili. Gli URL delle icone del manifest devono essere pubblici e puntare a file con le dimensioni dichiarate.
Mantieni distinto il ruolo del manifest da quello della favicon delle schede: un’icona di installazione 512×512 non sostituisce automaticamente icon.svg o favicon.ico.
Verifica in produzione
Esegui una build di produzione, apri un percorso per ogni segmento interessato e ispeziona gli elementi link. Apri poi direttamente l’URL di ogni risorsa e conferma che il middleware non la intercetti.
Se usi basePath o una CDN, verifica gli URL prodotti nell’ambiente pubblicato. Il comportamento locale non rivela sempre una base pubblica errata o una regola di riscrittura sbagliata.
Fonti primarie
Domande frequenti
Bisogna scrivere gli elementi link a mano?
No. Le convenzioni dei file o metadata.icons possono generarli. Scegli un’unica fonte chiara per le dichiarazioni.
Dove va inserito favicon.ico?
Con App Router, la convenzione favicon.ico è supportata nella radice della cartella app.
manifest.ts sostituisce icon.svg?
No. Il manifest descrive le icone installabili e altri dati, mentre icon.svg fornisce direttamente l’icona del browser.