Favicon für Nuxt
Nuxt stellt statische Dateien von /public im Stammverzeichnis Ihrer Site bereit, sodass /public/favicon.ico automatisch zu /favicon.ico wird. Für Symbole mit mehreren Größen oder SVG fügen Sie Link-Tags über nuxt.config.ts oder useHead() in app.vue hinzu.
Kurzantwort
Um ein Favicon in Nuxt 3 hinzuzufügen, legen Sie favicon.ico in /public ab, fügen Sie bei Bedarf link-Tags in app.head von nuxt.config.ts hinzu, stellen Sie bereit und prüfen Sie mit dem Favicon-Checker — nutzen Sie den Generator für die Icon-Dateien.
Favicons auf jeder Website prüfen
Installieren Sie die FetchFavicon Chrome-Erweiterung, um Favicons sofort zu extrahieren, vorzuschauen und zu validieren.
Erstellen Sie Ihr Favicon-Paket mit Favicon Generator – exportieren Sie favicon.ico, favicon.svg und apple-touch-icon.png aus einer 512×512-Quelle. Legen Sie sie im /public-Ordner Ihres Nuxt-Projekts ab.
Nuxt 3 stellt alles in /public im Domänenstamm ohne zusätzliche Konfiguration bereit. Browser fordern standardmäßig /favicon.ico an, sodass das Platzieren der Datei dort den häufigsten Fall abdeckt.
Um jede Symbolvariante explizit zu steuern, fügen Sie Link-Tags in nuxt.config.ts unter app.head.link hinzu – oder rufen Sie useHead({ link: [...] }) in app.vue auf. Bei beiden Ansätzen werden Tags in den <head> jeder Seite eingefügt.
Öffnen Sie nach der Bereitstellung Ihre Produktions-URL in einem privaten Fenster und führen Sie Favicon Checker aus, um zu bestätigen, dass /favicon.ico und Ihre <link rel="icon">-Pfade 200 zurückgeben. Zwischengespeicherte Entwicklersymbole sind ein häufiger Grund dafür, dass ein Nuxt-Favicon nach der Bereitstellung nicht angezeigt wird.
Wenn das Tab-Symbol funktioniert, Google Search jedoch immer noch ein leeres Favicon anzeigt, überprüfen Sie, ob auf Ihrer Live-Startseite ein quadratisches Symbol von mindestens 48 × 48 Zoll verlinkt ist. Informationen zu Crawling- und Größenregeln finden Sie in unserem Google Favicon-Anforderungsleitfaden.
Nuxt generiert nicht automatisch .ico-Dateien in mehreren Größen – Sie müssen sie bereitstellen. Verwenden Sie die in app.head verlinkten PNG-Fallbacks für PWA-Installationsaufforderungen und Registerkarten mit hoher DPI.
So funktioniert es
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
Zu /public hinzufügen
Kopieren Sie favicon.ico (und optional favicon.svg, apple-touch-icon.png) in Ihren Nuxt /public-Ordner.
- 3
Konfigurieren und überprüfen
Fügen Sie bei Bedarf app.head.link-Einträge in nuxt.config.ts hinzu, stellen Sie sie bereit und führen Sie dann Favicon Checker auf Ihrer Live-URL aus.
Jetzt ausprobieren
Generate a Nuxt-ready favicon
Favicon-GeneratorFAQ
Wie füge ich ein Favicon in Nuxt 3 hinzu?+
Platzieren Sie favicon.ico in /public und fügen Sie dann optional <link rel="icon">-Tags in nuxt.config.ts unter app.head.link oder über useHead() in app.vue hinzu.
Wohin geht das Favicon in einem Nuxt-Projekt?+
Das /public-Verzeichnis. Die dortigen Dateien werden von Ihrem Domänenstamm aus bereitgestellt – /public/favicon.ico ist unter /favicon.ico verfügbar.
Warum wird mein Nuxt-Favicon nicht angezeigt?+
Häufige Ursachen: Datei nicht in /public, falscher Pfad in app.head, Browser-Cache von Entwickler oder Überprüfung von localhost anstelle der bereitgestellten URL. Testen Sie in einem Inkognito-Fenster.
Sollte ich nuxt.config.ts oder useHead() für Favicons verwenden?+
Beides funktioniert. nuxt.config.ts eignet sich am besten für statische Site-weite Symbole. useHead() in app.vue, wenn Symbole vom Laufzeitstatus oder der Pro-Route-Logik abhängen.
Kann ich ein SVG-Favicon in Nuxt verwenden?+
Ja – platzieren Sie favicon.svg in /public und fügen Sie { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' } zu app.head.link hinzu.