Icône de favori pour Nuxt
Nuxt sert les fichiers statiques de /public à la racine de votre site, donc /public/favicon.ico devient automatiquement /favicon.ico. Pour les icônes multi-tailles ou SVG, ajoutez des balises de lien via nuxt.config.ts ou useHead() dans app.vue.
Réponse rapide
Pour ajouter un favicon dans Nuxt 3, placez favicon.ico dans /public, ajoutez les balises link dans app.head de nuxt.config.ts si besoin, déployez et vérifiez avec le vérificateur de favicon — utilisez le générateur pour créer les fichiers d'icône.
Vérifiez les favicons de n'importe quel site
Installez l'extension Chrome FetchFavicon pour extraire, prévisualiser et valider les favicons instantanément.
Créez votre pack favicon avec le Favicon Generator — exportez favicon.ico, favicon.svg et apple-touch-icon.png à partir d'une source 512×512. Déposez-les dans le dossier /public de votre projet Nuxt.
Nuxt 3 sert tout dans /public à la racine du domaine sans configuration supplémentaire. Les navigateurs demandent /favicon.ico par défaut, donc y placer le fichier couvre le cas le plus courant.
Pour un contrôle explicite sur chaque variante d'icône, ajoutez des balises de lien dans nuxt.config.ts sous app.head.link - ou appelez useHead({ link: [...] }) dans app.vue. Les deux approches injectent des balises dans le <head> de chaque page.
Après le déploiement, ouvrez votre URL de production dans une fenêtre privée et exécutez Favicon Checker pour confirmer /favicon.ico et vos chemins <link rel="icon"> renvoient 200. Les icônes de développement mises en cache sont une raison courante pour laquelle un favicon Nuxt ne s'affiche pas après le déploiement.
Si l'icône de l'onglet fonctionne mais que Google Search affiche toujours une favicon vide, vérifiez que votre page d'accueil en direct lie une icône carrée d'au moins 48 × 48. Consultez notre guide des exigences relatives aux favicon Google pour connaître les règles d'exploration et de taille.
Nuxt ne génère pas automatiquement de fichiers .ico multi-tailles — vous devez les fournir. Utilisez les solutions de secours PNG liées dans app.head pour les invites d'installation PWA et les onglets haute résolution.
Comment ça marche
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
Ajouter à /public
Copiez favicon.ico (et favicon.svg, apple-touch-icon.png en option) dans votre dossier Nuxt /public.
- 3
Configurer et vérifier
Ajoutez des entrées app.head.link dans nuxt.config.ts si nécessaire, déployez, puis exécutez Favicon Checker sur votre URL en direct.
Essayez maintenant
Generate a Nuxt-ready favicon
Générateur de FaviconFAQ
Comment ajouter une favicon dans Nuxt 3 ?+
Placez favicon.ico dans /public, puis ajoutez éventuellement des balises <link rel="icon"> dans nuxt.config.ts sous app.head.link ou via useHead() dans app.vue.
Où va le favicon dans un projet Nuxt ?+
Le répertoire /public. Les fichiers y sont servis à partir de la racine de votre domaine — /public/favicon.ico est disponible sur /favicon.ico.
Pourquoi mon favicon Nuxt ne s'affiche-t-il pas ?+
Causes courantes : fichier absent de /public, chemin incorrect dans app.head, cache du navigateur du développeur ou vérification de l'hôte local au lieu de l'URL déployée. Testez dans une fenêtre de navigation privée.
Dois-je utiliser nuxt.config.ts ou useHead() pour les favicons ?+
L’un ou l’autre fonctionne. nuxt.config.ts est idéal pour les icônes statiques à l'échelle du site ; useHead() dans app.vue si les icônes dépendent de l'état d'exécution ou de la logique par route.
Puis-je utiliser un favicon SVG dans Nuxt ?+
Oui — placez favicon.svg dans /public et ajoutez { rel: 'icon', tapez: 'image/svg+xml', href: '/favicon.svg' } à app.head.link.