Favicon für Nuxt
Nuxt 3 stellt statische Dateien von /public im Stammverzeichnis der Site bereit. Konfigurieren Sie <link>-Tags in nuxt.config.ts unter app.head.link für eine zentralisierte, SSR-freundliche Favicon-Einrichtung.
Platzieren Sie favicon.ico in public/favicon.ico – Nuxt stellt es automatisch ohne zusätzliche Konfiguration bereit.
Erweitern Sie in nuxt.config.ts app.head.link mit Symboleinträgen: { rel: 'icon', type: 'image/png', size: '32x32', href: '/favicon-32x32.png' }.
Verwenden Sie useHead() in einem Layout nur, wenn die Symbole je nach Route variieren – die meisten Websites legen globale Symbole einmal in nuxt.config fest.
Folgen Sie für @nuxtjs/seo- oder Site-Konfigurationsmodule dem Favicon-Feld, falls vorhanden – es umschließt die gleichen Link-Tags.
Nuxt-Bild verarbeitet keine Favicons; Endgültige Größen auf public/ hochladen.
Wenn Sie voreingestelltes statisches Nitro-Hosting verwenden, überprüfen Sie nach der Nuxi-Generierung, ob Favicon-Pfade in .output/public vorhanden sind.
So funktioniert es
- 1
Dateien zur öffentlichen/öffentlichen Datei hinzufügen
Größen favicon.ico, PNG, optional SVG.
- 2
Konfigurieren Sie app.head.link
Symbol-Links in nuxt.config.ts zentralisieren.
- 3
Generieren und überprüfen Sie HTML
Sehen Sie sich die Quelle auf einer bereitgestellten Seite an, um die richtigen Tags zu finden.
Jetzt ausprobieren
Erstellen Sie Ihr Nuxt-Symbolpaket
Favicon-Paket-GeneratorFAQ
Nuxt zeigt immer noch das Standardsymbol – warum?+
Leeren Sie den .nuxt-Cache, ersetzen Sie public/favicon.ico und starten Sie den Entwicklungsserver neu.
Wie füge ich ein Apple-Touch-Symbol in Nuxt 3 hinzu?+
Fügen Sie { rel: 'apple-touch-icon', size: '180x180', href: '/apple-touch-icon.png' } zu app.head.link hinzu.
Dupliziert SSR Favicon-Tags?+
Vermeiden Sie es, denselben Link sowohl in nuxt.config als auch in einem useHead-Aufruf auf Seitenebene zu definieren.