Favicon pour Next.js
Next.js 14+ App Router traite /app/icon.png et /app/favicon.ico comme des conventions — déposez-les et Next génère automatiquement les balises appropriées.
Vérifiez les favicons de n'importe quel site
Installez l'extension Chrome FetchFavicon pour extraire, prévisualiser et valider les favicons instantanément.
Placez favicon.ico dans /app et Next le servira à /favicon.ico tout en injectant la balise link correspondante.
Pour des icônes multi-tailles ou thématiques, utilisez les conventions de nommage : icon.png, icon.svg, apple-icon.png dans /app. Next génère les balises <link> à partir des métadonnées du fichier.
Comment ça marche
- 1
Générer favicon.ico
Multi-tailles 16/32/48/64 à partir d'une source 512×512.
- 2
Placer dans /app
/app/favicon.ico est servi automatiquement. Ajoutez icon.png pour la haute définition.
- 3
Vérifier
Ouvrez /favicon.ico dans votre navigateur — Next le sert sans aucune configuration.
Essayez maintenant
Générer un favicon prêt pour Next.js
Générateur de FaviconFAQ
Où placer les icônes dans Next.js App Router ?+
Dans le répertoire /app. Le nom du fichier (icon, apple-icon, favicon) détermine son rôle.
Et avec le Pages Router ?+
Placez favicon.ico dans /public et déclarez-le dans _document.tsx.
Ai-je toujours besoin d'un .ico multi-tailles ?+
C'est recommandé pour la rétrocompatibilité, notamment Edge et les raccourcis en mode IE.
Outils associés
Générateur de Favicon
Générez un pack complet de favicons (ICO + PNG) pour chaque appareil et navigateur.
Convertisseur PNG en ICO
Convertisseur PNG vers ICO en ligne gratuit pour icônes Windows, applications et favicons de sites web.
Convertisseur SVG en PNG
Pixellisez des graphiques vectoriels SVG en PNG à n'importe quelle résolution.