Favicon สำหรับ 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
เครื่องมือสร้างแพ็ก faviconคำถามที่พบบ่อย
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.