Favikona dla Nuxta
Nuxt 3 udostępnia pliki statyczne z /public w katalogu głównym witryny. Skonfiguruj tagi <link> w nuxt.config.ts pod app.head.link, aby uzyskać scentralizowaną, przyjazną SSR konfigurację favicon.
Umieść favicon.ico w public/favicon.ico — Nuxt obsługuje go automatycznie, bez dodatkowej konfiguracji.
W nuxt.config.ts rozszerz app.head.link o wpisy ikon: { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' }.
Użyj useHead() w układzie tylko wtedy, gdy ikony różnią się w zależności od trasy — większość witryn ustawia ikony globalne raz w nuxt.config.
W przypadku modułów @nuxtjs/seo lub konfiguracji witryny postępuj zgodnie z ich polem favicon, jeśli jest obecne — otacza te same znaczniki linków.
Nuxt Obraz nie przetwarza ikon ulubionych; prześlij ostateczne rozmiary do public/.
Używając predefiniowanego hostingu statycznego Nitro, po wygenerowaniu nuxi sprawdź, czy ścieżki favicon istnieją w .output/public.
Jak to działa
- 1
Dodaj pliki do publicznego/
Rozmiary favicon.ico, PNG, opcjonalnie SVG.
- 2
Skonfiguruj app.head.link
Scentralizuj łącza ikon w nuxt.config.ts.
- 3
Wygeneruj i sprawdź HTML
Wyświetl źródło na wdrożonej stronie pod kątem poprawnych tagów.
Wypróbuj teraz
Zbuduj swój pakiet ikon Nuxt
Generator pakietu faviconFAQ
Nuxt nadal wyświetla domyślną ikonę — dlaczego?+
Wyczyść pamięć podręczną .nuxt, zamień public/favicon.ico i zrestartuj serwer deweloperski.
Jak dodać ikonę Apple-Touch w Nuxt 3?+
Dodaj { rel: 'apple-touch-icon', rozmiary: '180x180', href: '/apple-touch-icon.png' } do app.head.link.
Czy SSR duplikuje tagi favicon?+
Unikaj definiowania tego samego łącza zarówno w nuxt.config, jak i wywołaniu useHead na poziomie strony.