Favicon dla Vue.js
Aplikacje Vue dostarczają zasoby statyczne z /public (Vite) lub /public (Vue CLI). Umieść tam favicon.ico i odwołaj się do niego w index.html — serwer deweloperski i wersja produkcyjna obsługują go w katalogu głównym witryny.
Vite: wstaw favicon.ico do /public/favicon.ico. Dodaj <link rel="icon" href="/favicon.ico"> w index.html wewnątrz <head>.
W przypadku kompilacji mieszanych poziom główny /favicon.ico nie pobiera skrótu zawartości — jest to idealne rozwiązanie w przypadku stabilnych żądań przeglądarki.
Vue CLI używa tej samej konwencji public/. Zastąp domyślny plik public/favicon.ico plikiem o wielu rozmiarach.
Dodaj linki PNG i ikony Apple Touch dla urządzeń mobilnych. Zachowaj ścieżki bezwzględne (/apple-touch-icon.png), aby tryb historii vue-router nie przerywał zagnieżdżonych tras.
Podczas wdrażania w Netlify lub Vercel upewnij się, że pliki favicon znajdują się w wynikach dist — kopiują się z public/ automatycznie.
W przypadku vite-plugin-pwa zadeklaruj ikony w sekcji manifestu wpisów vite.config.ts — 192×192 i 512×512 PNG.
Jak to działa
- 1
Skopiuj ikony do publicznego/
favicon.ico, apple-touch-icon.png, opcjonalnie favicon.svg.
- 2
Edytuj index.html
Dodaj tagi <link rel="icon"> i apple-touch-icon.
- 3
Kompiluj i wdrażaj
Potwierdź /favicon.ico zwraca 200 na produkcji.
Wypróbuj teraz
Wygeneruj zasoby favikon Vue
Generator FaviconFAQ
Dlaczego serwer deweloperski Vue wyświetla logo Vite?+
Zastąp public/favicon.ico i zrestartuj serwer deweloperski.
Gdzie znajdują się ulubione ikony SVG w Vue?+
public/favicon.svg plus <link rel="icon" type="image/svg+xml" href="/favicon.svg"> w index.html.
Czy vue-router wpływa na ścieżki favicon?+
Tylko jeśli używasz względnych hrefów — zawsze używaj ścieżek względnych/rootowych.