Nuxt용 파비콘
Nuxt 3 sert les fichiers statiques de /public à la racine du site. Configurez les balises <link> dans nuxt.config.ts sous app.head.link pour une configuration de favicon centralisée et compatible SSR.
Placez favicon.ico dans public/favicon.ico — Nuxt le sert automatiquement sans configuration supplémentaire.
Dans nuxt.config.ts, étendez app.head.link avec les entrées d'icône : { rel : 'icon', tapez : 'image/png', tailles : '32x32', href : '/favicon-32x32.png' }.
Utilisez useHead() dans une mise en page uniquement lorsque les icônes varient selon l'itinéraire — la plupart des sites définissent des icônes globales une fois dans nuxt.config.
Pour les modules @nuxtjs/seo ou de configuration de site, suivez leur champ favicon s'il est présent — il enveloppe les mêmes balises de lien.
Nuxt L'image ne traite pas les favicons ; télécharger les tailles finales sur public/.
Lorsque vous utilisez l'hébergement statique prédéfini de Nitro, vérifiez que les chemins de favicon existent dans .output/public après la génération de Nuxi.
작동 방식
- 1
Ajouter des fichiers au public/
Tailles favicon.ico, PNG, SVG en option.
- 2
Configurer app.head.link
Centralisez les liens des icônes dans nuxt.config.ts.
- 3
Générer et inspecter HTML
Affichez la source sur une page déployée pour connaître les balises correctes.
지금 사용해 보기
Créez votre package d'icônes Nuxt
파비콘 패키지 생성기자주 묻는 질문
Nuxt affiche toujours l'icône par défaut – pourquoi ?+
Effacez le cache .nuxt, remplacez public/favicon.ico et redémarrez le serveur de développement.
Comment ajouter une icône Apple-Touch dans Nuxt 3 ?+
Ajoutez { rel : 'apple-touch-icon', tailles : '180x180', href : '/apple-touch-icon.png' } à app.head.link.
SSR duplique-t-il les balises de favicon ?+
Évitez de définir le même lien dans nuxt.config et dans un appel useHead au niveau de la page.