Favicon voor Nuxt
Nuxt 3 levert statische bestanden van /public in de hoofdmap van de site. Configureer <link>-tags in nuxt.config.ts onder app.head.link voor een gecentraliseerde, SSR-vriendelijke favicon-installatie.
Plaats favicon.ico in het openbaar/favicon.ico — Nuxt bedient het automatisch zonder extra configuratie.
In nuxt.config.ts breidt u app.head.link uit met pictogramvermeldingen: { rel: 'icon', type: 'image/png', afmetingen: '32x32', href: '/favicon-32x32.png' }.
Gebruik useHead() alleen in een lay-out als de pictogrammen per route verschillen; de meeste sites stellen globale pictogrammen één keer in nuxt.config in.
Voor @nuxtjs/seo- of siteconfiguratiemodules volgt u hun faviconveld, indien aanwezig; het bevat dezelfde linktags.
Nuxt Afbeelding verwerkt geen favicons; upload de uiteindelijke formaten naar public/.
Wanneer u Nitro preset static hosting gebruikt, controleer dan of er favicon-paden bestaan in .output/public nadat nuxi is gegenereerd.
Hoe het werkt
- 1
Bestanden toevoegen aan openbaar/
favicon.ico, PNG maten, optioneel SVG.
- 2
Configureer app.head.link
Centraliseer pictogramlinks in nuxt.config.ts.
- 3
Genereer en inspecteer HTML
Bekijk de bron op een geïmplementeerde pagina voor de juiste tags.
Probeer het nu
Bouw uw Nuxt-pictogrampakket
Favicon-pakketgeneratorVeelgestelde vragen
Nuxt toont nog steeds het standaardpictogram – waarom?+
Wis de .nuxt-cache, vervang public/favicon.ico en start de ontwikkelaarsserver opnieuw op.
Hoe voeg ik een Apple-Touch-pictogram toe in Nuxt 3?+
Voeg { rel: 'apple-touch-icon', formaten: '180x180', href: '/apple-touch-icon.png' } toe aan app.head.link.
Dupliceert SSR favicon-tags?+
Vermijd het definiëren van dezelfde link in zowel nuxt.config als een useHead-oproep op paginaniveau.