L'App Router pot generar elements d'icona a partir de fitxers convencionals o de l'objecte metadata. Tots dos enfocaments són vàlids, però barrejar-los sense una regla clara pot crear fàcilment declaracions en conflicte.
Tria les convencions de fitxers
Col·loca favicon.ico a l'arrel d'app. Els fitxers icon compatibles poden estar dins d'un segment de ruta, mentre que apple-icon descriu la icona destinada als dispositius Apple.
Next.js detecta aquests fitxers, determina els atributs útils i afegeix els elements link corresponents al head. Una icona col·locada en un segment s'aplica a les rutes d'aquell segment.
| Fitxer | Ubicació | Finalitat |
|---|---|---|
| favicon.ico | app/ | Alternativa del lloc web |
| icon.svg | segment d'app | Icona del navegador |
| apple-icon.png | segment d'app | Icona d'Apple |
| manifest.webmanifest | segment d'app | Manifest instal·lable |
Fes servir metadata per als camins explícits
Si els recursos són a public o en un allotjament d'imatges, declara metadata.icons en un layout o una pàgina. Especifica icon, apple i, quan calgui, shortcut amb URL coherents.
Les metadades d'un segment fill poden substituir camps compostos heretats del pare. Inspecciona el head final en diverses rutes en lloc de donar per fet que totes les entrades del pare s'han fusionat.
Per a una icona generada a petició, Next.js també admet icon.tsx o icon.js. La funció retorna dades d'imatge amb una mida i un tipus de contingut explícits. Reserva aquest enfocament per a composicions realment dinàmiques: un fitxer estàtic és més senzill de desar a la memòria cau, inspeccionar i servir de manera coherent entre desplegaments.
Connecta el manifest i les seves icones
Un manifest estàtic o una funció manifest.ts pot descriure el nom de l'aplicació, els colors i les icones instal·lables. Els URL de les icones del manifest han de ser públics i apuntar a fitxers amb les dimensions declarades.
Mantén separada la funció del manifest de la del favicon de la pestanya: una icona d'instal·lació de 512×512 no substitueix automàticament icon.svg o favicon.ico.
Prova en producció
Executa una compilació de producció, obre una ruta de cada segment afectat i inspecciona els elements link. Després obre directament l'URL de cada recurs i confirma que el middleware no l'intercepti.
Si fas servir basePath o una CDN, prova els URL generats a l'entorn desplegat. El comportament local no sempre revela una base pública incorrecta o una regla de reescriptura errònia.
Fonts primàries
Preguntes freqüents
Cal escriure els elements link a mà?
No. Les convencions de fitxers o metadata.icons els poden generar. Tria una única font de veritat clara.
On s'ha de posar favicon.ico?
Amb l'App Router, la convenció favicon.ico és compatible amb l'arrel del directori app.
manifest.ts substitueix icon.svg?
No. El manifest descriu les icones instal·lables i altres dades, mentre que icon.svg serveix directament la icona del navegador.