Favikona dla Nuxt
Nuxt udostępnia pliki statyczne z /public w katalogu głównym Twojej witryny, więc /public/favicon.ico automatycznie zmienia się na /favicon.ico. W przypadku ikon o wielu rozmiarach lub SVG dodaj znaczniki linków poprzez nuxt.config.ts lub useHead() w app.vue.
Quick answer
To add a favicon in Nuxt 3, place favicon.ico in /public (served at /favicon.ico), add link tags in nuxt.config.ts app.head if needed, deploy, and verify with the Favicon Checker — use the Favicon Generator to create the icon files first.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Utwórz pakiet ulubionych ikon za pomocą Favicon Generator — wyeksportuj pliki favicon.ico, favicon.svg i apple-touch-icon.png ze źródła 512×512. Upuść je w folderze /public projektu Nuxt.
Nuxt 3 obsługuje wszystko w /public w katalogu głównym domeny bez dodatkowej konfiguracji. Przeglądarki domyślnie żądają /favicon.ico, więc umieszczenie tam pliku obejmuje najczęstszy przypadek.
Aby uzyskać wyraźną kontrolę nad każdym wariantem ikony, dodaj znaczniki linków w nuxt.config.ts pod app.head.link — lub wywołaj useHead({link: [...] }) w app.vue. Obydwa podejścia wstawiają tagi do <head> każdej strony.
Po wdrożeniu otwórz produkcyjny adres URL w prywatnym oknie i uruchom Favicon Checker, aby potwierdzić /favicon.ico, a ścieżki <link rel="icon"> zwrócą 200. Ikony deweloperów w pamięci podręcznej są częstym powodem, dla którego favikona Nuxt nie jest wyświetlana po wdrożeniu.
Jeśli ikona karty działa, ale Google Search nadal wyświetla pustą ikonę ulubionych, sprawdź, czy Twoja aktywna strona główna łączy się z kwadratową ikoną o wymiarach co najmniej 48 × 48. Zobacz nasz przewodnik po wymaganiach dotyczących ikon favicon Google, aby zapoznać się z regułami indeksowania i rozmiaru.
Nuxt nie generuje automatycznie plików .ico o wielu rozmiarach — należy je dostarczyć. Użyj opcji awaryjnych PNG połączonych w app.head dla monitów instalacyjnych PWA i kart o wysokim DPI.
Jak to działa
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
Dodaj do /public
Skopiuj favicon.ico (i opcjonalnie favicon.svg, apple-touch-icon.png) do swojego folderu Nuxt /public.
- 3
Skonfiguruj i zweryfikuj
W razie potrzeby dodaj wpisy app.head.link w nuxt.config.ts, wdróż, a następnie uruchom Favicon Checker na aktywnym adresie URL.
Wypróbuj teraz
Generate a Nuxt-ready favicon
Generator FaviconFAQ
Jak dodać favikonę w Nuxt 3?+
Umieść favicon.ico w /public, następnie opcjonalnie dodaj tagi <link rel="icon"> w nuxt.config.ts pod app.head.link lub poprzez useHead() w app.vue.
Gdzie znajduje się favikona w projekcie Nuxt?+
Katalog /public. Pliki tam są dostarczane z katalogu głównego Twojej domeny — /publicXX/favicon.ico jest dostępny pod adresem /favicon.ico.
Dlaczego moja ikona favicon Nuxt nie jest wyświetlana?+
Typowe przyczyny: plik inny niż /public, zła ścieżka w app.head, pamięć podręczna przeglądarki od dewelopera lub sprawdzanie hosta lokalnego zamiast wdrożonego adresu URL. Przetestuj w oknie incognito.
Czy powinienem używać nuxt.config.ts lub useHead() dla faviconów?+
Albo działa. nuxt.config.ts jest najlepszy w przypadku statycznych ikon obejmujących całą witrynę; useHead() w app.vue, jeśli ikony zależą od stanu środowiska wykonawczego lub logiki danej trasy.
Czy mogę używać favikony SVG w Nuxt?+
Tak — umieść favicon.svg w /public i dodaj { rel: 'icon', wpisz: 'image/svg+xml', href: '/favicon.svg' } do app.head.link.