Favicon pentru Nuxt
Nuxt 3 servește fișiere statice din /public la rădăcina site-ului. Configurați etichetele <link> în nuxt.config.ts sub app.head.link pentru o configurare centralizată a faviconului SSR.
Plasați favicon.ico în public/favicon.ico — Nuxt îl servește automat fără configurare suplimentară.
În nuxt.config.ts, extindeți app.head.link cu intrări de pictograme: { rel: „icoană”, tip: „image/png”, dimensiuni: „32x32”, href: „/favicon-32x32.png” }.
Utilizați useHead() într-un aspect numai atunci când pictogramele variază în funcție de rută - majoritatea site-urilor setează pictograme globale o dată în nuxt.config.
Pentru modulele @nuxtjs/seo sau de configurare a site-ului, urmați câmpul de favicon al acestora, dacă este prezent - include aceleași etichete de link.
Nuxt Imaginea nu procesează favicon-urile; încărcați dimensiunile finale în public/.
Când utilizați găzduirea statică prestabilită Nitro, verificați căile faviconului există în .output/public după generarea nuxi.
Cum funcționează
- 1
Adăugați fișiere în public/
favicon.ico, PNG dimensiuni, opțional SVG.
- 2
Configurați app.head.link
Centralizați linkurile pictogramelor în nuxt.config.ts.
- 3
Generați și inspectați HTML
Vizualizați sursa pe o pagină implementată pentru etichetele corecte.
Încearcă acum
Creați pachetul dvs. de pictograme Nuxt
Generator pachet faviconÎntrebări frecvente
Nuxt afișează în continuare pictograma implicită — de ce?+
Goliți memoria cache .nuxt, înlocuiți public/favicon.ico și reporniți serverul de dezvoltare.
Cum adaug pictograma apple-touch în Nuxt 3?+
Adăugați { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' } la app.head.link.
SSR duplică etichetele favicon?+
Evitați definirea aceluiași link atât în nuxt.config, cât și în apelul useHead la nivel de pagină.