Favicon voor Nuxt
Nuxt levert statische bestanden van /public in de root van uw site, dus /public/favicon.ico wordt automatisch /favicon.ico. Voor pictogrammen met meerdere formaten of SVG voegt u linktags toe via nuxt.config.ts of useHead() in 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.
Maak uw favicon-pakket met de Favicon Generator — exporteer favicon.ico, favicon.svg en apple-touch-icon.png vanuit een 512×512-bron. Plaats ze in de map /public van uw Nuxt-project.
Nuxt 3 bedient alles in /public in de domeinroot zonder extra configuratie. Browsers vragen standaard om /favicon.ico, dus als u het bestand daar plaatst, is dit het meest voorkomende geval.
Voor expliciete controle over elke pictogramvariant voegt u linktags toe in nuxt.config.ts onder app.head.link — of roept u useHead({ link: [...] }) aan in app.vue. Beide benaderingen injecteren tags in de <head> van elke pagina.
Na de implementatie opent u uw productie-URL in een privévenster en voert u Favicon Checker uit om /favicon.ico te bevestigen. Uw <link rel="icon">-paden retourneren 200. In de cache opgeslagen ontwikkelaarspictogrammen zijn een veelvoorkomende reden dat een Nuxt-favicon na de implementatie niet wordt weergegeven.
Als het tabbladpictogram werkt, maar Google Search nog steeds een lege favicon toont, controleer dan of uw live startpagina een vierkant pictogram van minimaal 48×48 linkt. Zie onze Google favicon-vereistengids voor crawl- en grootteregels.
Nuxt genereert niet automatisch .ico-bestanden met meerdere formaten; u moet deze aanleveren. Gebruik PNG fallbacks gekoppeld in app.head voor PWA installatieprompts en tabbladen met hoge DPI.
Hoe het werkt
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
Toevoegen aan /public
Kopieer favicon.ico (en optioneel favicon.svg, apple-touch-icon.png) naar uw map Nuxt /public.
- 3
Configureer en verifieer
Voeg indien nodig app.head.link-vermeldingen toe aan nuxt.config.ts, implementeer en voer vervolgens Favicon Checker uit op uw live URL.
Probeer het nu
Generate a Nuxt-ready favicon
Favicon-generatorVeelgestelde vragen
Hoe voeg ik een favicon toe in Nuxt 3?+
Plaats favicon.ico in /public en voeg vervolgens optioneel <link rel="icon">-tags toe in nuxt.config.ts onder app.head.link of via useHead() in app.vue.
Waar komt de favicon terecht in een Nuxt-project?+
De /public-map. Bestanden daar worden geleverd vanuit uw domeinroot – /public/favicon.ico is beschikbaar op /favicon.ico.
Waarom wordt mijn Nuxt favicon niet weergegeven?+
Veelvoorkomende oorzaken: bestand niet in /public, verkeerd pad in app.head, browsercache van dev, of het controleren van localhost in plaats van de geïmplementeerde URL. Test in een incognitovenster.
Moet ik nuxt.config.ts of useHead() gebruiken voor favicons?+
Ofwel werkt. nuxt.config.ts is het beste voor statische pictogrammen voor de hele site; useHead() in app.vue als pictogrammen afhankelijk zijn van de runtimestatus of logica per route.
Kan ik een SVG favicon gebruiken in Nuxt?+
Ja — plaats favicon.svg in /public en voeg { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' } toe aan app.head.link.