Favicon pour Next.js
Next.js 14+ App Router a introduit des conventions d'icônes basées sur les fichiers : déposez favicon.ico ou icon.png dans le répertoire /app et Next.js émet automatiquement les balises `<link>` correctes - aucun composant Head manuel n'est nécessaire. Pour les projets Pages Router, placez favicon.ico dans /public et liez-le à partir de _document.tsx. Le favicon generator produit l'ensemble complet de fichiers à partir d'une seule image source, et le best favicon size guide couvre les tailles importantes pour chaque contexte.
Next.js 13+ avec App Router traite les noms de fichiers spéciaux du répertoire /app comme des conventions de métadonnées. Les fichiers nommés favicon.ico, icon.png, icon.svg et apple-icon.png sont automatiquement reconnus par le système de métadonnées Next.js et servis avec les en-têtes de réponse et les balises `<link>` corrects, sans aucune configuration dans layout.tsx ou exportations de métadonnées.
Pour utiliser la convention de fichier, placez votre favicon.ico dans le répertoire /app (et non /public). Next.js le sert sur la route /favicon.ico et injecte la balise de lien dans chaque page qui partage cette mise en page. Le fichier icône doit être au même niveau que votre layout.tsx racine pour qu'il s'applique globalement.
Pour les icônes haute résolution utilisant le App Router, placez un icon.png à l'intérieur du /app. Next.js lit ses dimensions et génère la balise « <link rel='icon' sizes='...' href='...'> » appropriée. Pour servir plusieurs tailles, exportez plusieurs fichiers d'icônes avec différents suffixes numériques : icon.png (32 × 32), icon@2x.png (64 × 64) ou utilisez icon.svg pour un seul fichier évolutif à l'infini.
App Router prend également en charge un fichier apple-icon.png dédié pour l'icône de l'écran d'accueil du iOS. Placez apple-icon.png (180×180) à l'intérieur de /app et Next.js émet automatiquement `<link rel='apple-touch-icon' href='...'>`. Il s’agit de l’approche la plus propre : aucune exportation manuelle de métadonnées n’est requise.
Si vous préférez déclarer des favicons dans le code plutôt que via des conventions de fichiers, exportez un objet de métadonnées depuis layout.tsx. La propriété Icons accepte un objet avec des champs de raccourci, d'icône, de pomme et d'autres. Exemple : `exporter les métadonnées const : Metadata = { icônes : { icône : '/favicon.ico', pomme : '/apple-touch-icon.png' } }`. Cette méthode est utile lorsque vous avez besoin de chemins d'icônes dynamiques basés sur les paramètres régionaux ou l'environnement.
Pour les projets Pages Router (Next.js 12 et versions antérieures, ou les projets qui n'ont pas migré vers App Router), la gestion des favicon fonctionne différemment. Placez favicon.ico dans le répertoire /public — Next.js sert /public à l'URL racine. Ajoutez la balise de lien dans pages/_document.tsx à l'intérieur du composant `<Head>` : `<link rel='icon' href='/favicon.ico' />`. Ce `<Head>` est l'en-tête au niveau du document, et non l'importation suivante/en-tête par page.
Le composant next/head (importer Head depuis 'next/head') fonctionne pour les remplacements d'icônes par page dans Pages Router. Si vous souhaitez un favicon différent sur une page spécifique, incluez un « <link rel='icon'> » à l'intérieur de `<Head>` dans ce composant de page. La balise par page remplace celle au niveau du document. Ceci est utile pour les sites multimarques servis à partir d’un seul déploiement Next.js.
Les favicons SVG sont entièrement prises en charge par les conventions Next.js App Router. Nommez le fichier icon.svg et placez-le dans /app. Next.js émet « <link rel='icon' type='image/svg+xml' href='/_next/static/media/icon.svg...'> ». Étant donné que Next.js hache les noms de fichiers statiques pour le contournement du cache, vous n'avez pas à vous soucier de l'invalidation du cache des favicon : la modification du fichier modifie le hachage et oblige les navigateurs à effectuer une nouvelle récupération.
Le manifeste Web dans Next.js App Router est configuré via le fichier manifest.ts dans /app. Exportez une fonction par défaut renvoyant un objet MetadataRoute.Manifest qui inclut la taille de vos icônes. Next.js le restitue sous la forme application/manifest+json dans /manifest.webmanifest. Les PNG 192×192 et 512×512 référencés dans le manifeste doivent être placés dans /public.
Turbopack (le bundler expérimental de Next.js 14+) gère les actifs statiques dans /public de la même manière que Webpack. Les fichiers Favicon dans /public sont servis sans regroupement. Pour les fichiers /app (la convention des icônes), Turbopack les traite comme des actifs de métadonnées — aucun changement de configuration n'est nécessaire lors du basculement entre Turbopack et Webpack.
Next.js ISR (Incremental Static Regeneration) et les déploiements Edge n'affectent pas la diffusion de favicon. Les fichiers Favicon sont des actifs statiques servis depuis le bord CDN, et non depuis le cache ISR. Cela signifie que les mises à jour des favicon se propagent immédiatement après le déploiement sans attendre la revalidation de la page.
Les applications Next.js multilocales nécessitent souvent des icônes adaptées aux paramètres régionaux. Utilisez la fonction generateMetadata dans layout.tsx pour renvoyer les chemins d'icônes spécifiques aux paramètres régionaux en fonction de l'objet params. Il s'agit d'une fonctionnalité réservée à App Router : les sites Pages Router nécessitent une logique _document.tsx personnalisée ou un serveur personnalisé pour obtenir des favicons par région.
Après le déploiement, vérifiez vos favicons Next.js à l'aide du favicon tester. Vérifiez que /favicon.ico, /icon.svg et /apple-touch-icon.png renvoient tous 200 réponses avec les en-têtes de type de contenu corrects. Inspectez également le `<head>` HTML de votre site déployé pour confirmer que Next.js a émis toutes les balises de lien attendues.
Comment ça marche
- 1
Générez votre package favicon
Téléchargez un PNG ou SVG 512 × 512 sur le [favicon generator](tool:favicon-generator). Téléchargez favicon.ico, icon.svg, apple-touch-icon.png (180×180) et les manifestes PNG.
- 2
Placez favicon.ico dans /app (App Router)
Copiez favicon.ico dans le répertoire /app de votre projet à côté de layout.tsx. Next.js le sert automatiquement et injecte la balise de lien. Pour Pages Router, placez-le plutôt dans /public.
- 3
Ajoutez icon.svg pour un rendu net
Renommez votre SVG en icon.svg et placez-le dans /app (App Router). Next.js émet automatiquement une balise de lien SVG. Pour Pages Router, placez-le dans /public et ajoutez la balise de lien dans _document.tsx.
- 4
Ajouter apple-icon.png pour les installations iOS
Renommez votre 180×180 PNG en apple-icon.png et placez-le dans /app (App Router). Pour Pages Router, placez apple-touch-icon.png dans /public et ajoutez la balise de lien dans _document.tsx.
- 5
Configurer le manifeste Web
Pour App Router, créez /app/manifest.ts et exportez les métadonnées du manifeste, y compris les entrées d'icônes 192 × 192 et 512 × 512. Placez les PNG dans /public. Pour Pages Router, placez site.webmanifest dans /public et ajoutez la balise de lien manifeste dans _document.tsx.
- 6
Vérifier en production
Après le déploiement, affichez la source sur votre URL en direct et confirmez que toutes les balises de lien sont présentes. Utilisez le [favicon tester](utility:favicon-tester) pour vérifier que chaque URL d'icône renvoie 200 avec le type de contenu correct.
Essayez maintenant
Générer un favicon prêt pour Next.js
Générateur de FaviconFAQ
Où vont les favicons dans Next.js App Router ?+
Dans le répertoire /app. Les fichiers nommés favicon.ico, icon.png, icon.svg et apple-icon.png sont automatiquement reconnus et liés. Un favicon global apparaît dans /app ; un spécifique à la mise en page va dans le sous-répertoire de mise en page correspondant.
Où vont les favicons dans le Next.js Pages Router ?+
Dans le répertoire /public. Ajoutez la balise de lien dans pages/_document.tsx à l'intérieur du composant `<Head>`. Next.js sert les fichiers /public à l'URL racine — /public/favicon.ico est accessible sur https://votredomaine.com/favicon.ico.
Dois-je modifier layout.tsx pour ajouter un favicon dans App Router ?+
Non, si vous utilisez la convention de fichier (favicon.ico dans /app). Si vous préférez le code, exportez un objet de métadonnées avec une propriété d'icônes. Les deux approches produisent des balises `<link>` identiques dans le HTML rendu.
Next.js prend-il en charge les favicons SVG ?+
Oui. Placez icon.svg dans /app pour App Router, ou ajoutez `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` dans _document.tsx pour Pages Router. App Router émet automatiquement la balise de lien SVG à partir de la convention de fichier.
Comment ajouter apple-touch-icon dans Next.js ?+
Pour App Router : placez apple-icon.png (180×180) dans /app. Next.js émet automatiquement la balise de lien apple-touch-icon. Pour Pages Router : placez apple-touch-icon.png dans /public et ajoutez la balise de lien dans _document.tsx.
Next.js cache-t-il automatiquement les favicons ?+
Pour les fichiers dans /app, oui – Next.js ajoute un hachage de contenu au nom de fichier servi, de sorte que chaque modification de fichier déclenche une nouvelle récupération. Pour les fichiers /public, pas de contournement automatique du cache ; ajoutez une chaîne de requête manuellement si nécessaire.
Puis-je utiliser un favicon différent par page dans Next.js ?+
Oui. Dans App Router, exportez une fonction generateMetadata dans le page.tsx de l'itinéraire spécifique avec une valeur d'icônes personnalisée. Dans Pages Router, ajoutez un « <link rel='icon'> » à l'intérieur du composant `<Head>` par page — il remplace la valeur par défaut au niveau du document.