Favicon für Vue.js
Vue-Apps versenden statische Assets von /public (Vite) oder /public (Vue CLI). Platzieren Sie favicon.ico dort und referenzieren Sie es in index.html – der Entwicklungsserver und der Produktions-Build stellen es im Stammverzeichnis der Site bereit.
Hinweis: Fügen Sie favicon.ico in /public/favicon.ico ein. Fügen Sie <link rel="icon" href="/favicon.ico"> in index.html innerhalb von <head> hinzu.
Bei gehashten Builds erhält /favicon.ico auf Root-Ebene keinen Inhalts-Hash – ideal für stabile Browseranfragen.
Die Vue-CLI verwendet dieselbe öffentliche/Konvention. Ersetzen Sie die Standarddatei „public/favicon.ico“ durch Ihre Datei mit mehreren Größen.
Fügen Sie PNG- und Apple-Touch-Icon-Links für Mobilgeräte hinzu. Halten Sie die Pfade absolut (/apple-touch-icon.png), damit der Vue-Router-Verlaufsmodus verschachtelte Routen nicht unterbricht.
Stellen Sie bei der Bereitstellung auf Netlify oder Vercel sicher, dass Favicon-Dateien in der dist-Ausgabe enthalten sind – sie werden automatisch von public/kopiert.
Deklarieren Sie für vite-plugin-pwa Symbole im Manifestabschnitt von vite.config.ts – 192×192 und 512×512 PNG-Einträge.
So funktioniert es
- 1
Symbole nach öffentlich/ kopieren
favicon.ico, apple-touch-icon.png, optional favicon.svg.
- 2
Bearbeiten Sie index.html
Fügen Sie die Tags <link rel="icon"> und apple-touch-icon hinzu.
- 3
Erstellen und bereitstellen
Bestätigen Sie, dass /favicon.ico bei der Produktion 200 zurückgibt.
Jetzt ausprobieren
Generieren Sie Vue-Favicon-Assets
Favicon-GeneratorFAQ
Warum zeigt der Vue-Entwicklungsserver das Vite-Logo an?+
Ersetzen Sie public/favicon.ico und starten Sie den Entwicklungsserver neu.
Wohin gehen SVG-Favicons in Vue?+
public/favicon.svg plus <link rel="icon" type="image/svg+xml" href="/favicon.svg"> in index.html.
Beeinflusst der Vue-Router Favicon-Pfade?+
Nur wenn Sie relative hrefs verwenden – verwenden Sie immer root-relative /-Pfade.