Favicon pentru Nuxt
Nuxt difuzează fișiere statice de la /public la rădăcina site-ului dvs., așa că /public/favicon.ico devine automat /favicon.ico. Pentru pictogramele cu dimensiuni multiple sau SVG, adăugați etichete de link prin nuxt.config.ts sau useHead() în app.vue.
Quick answer
To add a favicon in Nuxt 3, place favicon.ico in /public (served at /favicon.ico), add link tags in nuxt.config.ts app.head if needed, deploy, and verify with the Favicon Checker — use the Favicon Generator to create the icon files first.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Creați-vă pachetul de favicon cu Favicon Generator — exportați favicon.ico, favicon.svg și apple-touch-icon.png dintr-o sursă de 512×512. Introduceți-le în folderul /public al proiectului dvs. Nuxt.
Nuxt 3 deservește totul în /public la rădăcina domeniului fără configurare suplimentară. Browserele solicită /favicon.ico în mod implicit, așa că plasarea fișierului acolo acoperă cel mai frecvent caz.
Pentru control explicit asupra fiecărei variante de pictogramă, adăugați etichete de link în nuxt.config.ts sub app.head.link - sau apelați useHead({ link: [...] }) în app.vue. Ambele abordări injectează etichete în <head> al fiecărei pagini.
După implementare, deschideți adresa URL de producție într-o fereastră privată și rulați Favicon Checker pentru a confirma /favicon.ico și căile dvs. <link rel="icon"> returnează 200. Pictogramele dev-ului stocate în cache sunt un motiv comun pentru care o favicon Nuxt nu este afișată după implementare.
Dacă pictograma filă funcționează, dar Google Search afișează în continuare o favicon necompletată, verificați că pagina dvs. de pornire live conectează o pictogramă pătrată de cel puțin 48×48. Consultați ghidul nostru de cerințe Google favicon pentru regulile de accesare cu crawlere și dimensiune.
Nuxt nu generează automat fișiere .ico cu dimensiuni multiple — trebuie să le furnizați. Utilizați alternative PNG conectate în app.head pentru solicitări de instalare PWA și file cu DPI ridicat.
Cum funcționează
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
Adăugați la /public
Copiați favicon.ico (și opțional favicon.svg, apple-touch-icon.png) în folderul Nuxt /public.
- 3
Configurați și verificați
Adăugați intrări app.head.link în nuxt.config.ts dacă este necesar, implementați, apoi executați Favicon Checker pe adresa URL live.
Încearcă acum
Generate a Nuxt-ready favicon
Generator de FaviconÎntrebări frecvente
Cum adaug o favicon în Nuxt 3?+
Plasați favicon.ico în /public, apoi adăugați opțional etichete <link rel="icon"> în nuxt.config.ts sub app.head.link sau prin useHead() în app.vue.
Unde merge favicon-ul într-un proiect Nuxt?+
Directorul /public. Fișierele sunt difuzate de la rădăcina domeniului dvs. — /public/favicon.ico este disponibil la /favicon.ico.
De ce nu apare faviconul meu Nuxt?+
Cauze frecvente: fișierul nu se află în /public, cale greșită în app.head, memoria cache a browserului de la dev sau verificarea localhost în loc de adresa URL implementată. Testați într-o fereastră incognito.
Ar trebui să folosesc nuxt.config.ts sau useHead() pentru favicons?+
Ori functioneaza. nuxt.config.ts este cel mai bun pentru pictogramele statice la nivelul întregului site; useHead() în app.vue dacă pictogramele depind de starea de rulare sau de logica pe rută.
Pot folosi o favicon SVG în Nuxt?+
Da — plasați favicon.svg în /public și adăugați { rel: 'icoana', tip: 'image/svg+xml', href: '/favicon.svg' } la app.head.link.