Favikona dla Next.js
Next.js 14+ App Router wprowadził konwencję ikon opartą na plikach: upuść favicon.ico lub icon.png w katalogu /app, a Next.js automatycznie wyemituje prawidłowe znaczniki `<link>` — nie jest potrzebny ręczny komponent Head. W przypadku projektów Pages Router umieść favicon.ico w /public i połącz go z _document.tsx. favicon generator tworzy kompletny zestaw plików z jednego obrazu źródłowego, a best favicon size guide obejmuje rozmiary istotne dla każdego kontekstu.
Next.js 13+ z App Router traktuje specjalne nazwy plików w katalogu /app jako konwencje metadanych. Pliki o nazwach favicon.ico, icon.png, icon.svg i apple-icon.png są automatycznie rozpoznawane przez system metadanych Next.js i podawane z poprawnymi nagłówkami odpowiedzi i tagami `<link>`, bez żadnej konfiguracji w pliku Layout.tsx lub eksportu metadanych.
Aby zastosować konwencję plików, umieść favicon.ico w katalogu /app (nie /public). Next.js udostępnia go na trasie /favicon.ico i wstawia znacznik linku do każdej strony, która ma ten sam układ. Aby można było zastosować go globalnie, plik ikony musi znajdować się na tym samym poziomie, co plik główny układu.tsx.
W przypadku ikon o wysokiej rozdzielczości przy użyciu App Router, umieść plik icon.png wewnątrz /app. Next.js odczytuje jego wymiary i generuje odpowiedni tag `<link rel='icon' sizes='...' href='...'>`. Aby wyświetlić wiele rozmiarów, wyeksportuj wiele plików ikon z różnymi przyrostkami numerycznymi: icon.png (32×32), icon@2x.png (64×64) lub użyj icon.svg, aby utworzyć pojedynczy, nieskończenie skalowalny plik.
App Router obsługuje także dedykowany plik apple-icon.png dla ikony iOS na ekranie głównym. Umieść plik apple-icon.png (180×180) wewnątrz /app, a Next.js automatycznie wyemituje `<link rel='apple-touch-icon' href='...'>`. To najczystsze podejście — nie jest wymagany ręczny eksport metadanych.
Jeśli wolisz deklarować favicony w kodzie, a nie za pomocą konwencji plikowych, wyeksportuj obiekt metadanych z pliku układu.tsx. Właściwość ikon akceptuje obiekt ze skrótem, ikoną, jabłkiem i innymi polami. Przykład: `eksportuj metadane stałe: Metadane = { ikony: { ikona: '/favicon.ico', jabłko: '/apple-touch-icon.png' } }`. Ta metoda jest przydatna, gdy potrzebujesz dynamicznych ścieżek ikon w oparciu o ustawienia regionalne lub środowisko.
W przypadku projektów Pages Router (Next.js 12 i starszych lub projektów, które nie zostały przeniesione do App Router), obsługa favicon działa inaczej. Umieść favicon.ico w katalogu /public — Next.js wyświetla /public pod głównym adresem URL. Dodaj znacznik linku w pages/_document.tsx wewnątrz komponentu `<Head>`: `<link rel='icon' href='/favicon.ico' />`. Ten `<Head>` jest nagłówkiem na poziomie dokumentu, a nie importem następnej/nagłówka na stronę.
Komponent next/head (import Head z „next/head”) działa w przypadku zastąpień ikon na stronie w Pages Router. Jeśli chcesz mieć inną ikonę ulubionych na określonej stronie, umieść „<link rel='icon'>” wewnątrz `<Head>` w tym komponencie strony. Znacznik na stronie zastępuje znacznik na poziomie dokumentu. Jest to przydatne w przypadku witryn obejmujących wiele marek obsługiwanych w ramach jednego wdrożenia Next.js.
Favicony SVG są w pełni obsługiwane przez konwencje Next.js App Router. Nazwij plik icon.svg i umieść go w /app. Next.js emituje „<link rel='icon' type='image/svg+xml' href='/_next/static/media/icon.svg...'>”. Ponieważ Next.js miesza statyczne nazwy plików na potrzeby pomijania pamięci podręcznej, nie musisz się martwić o unieważnienie pamięci podręcznej favicon — zmiana pliku zmienia hash i zmusza przeglądarki do ponownego pobrania.
Manifest internetowy w Next.js App Router jest konfigurowany za pomocą pliku manifest.ts w /app. Wyeksportuj funkcję domyślną zwracającą obiekt MetadataRoute.Manifest zawierający rozmiary ikon. Next.js renderuje to jako aplikacja/manifest+json w /manifest.webmanifest. Rozmiary 192×192 i 512×512 PNG, o których mowa w manifeście, należy umieścić w /public.
Turbopack (eksperymentalny pakiet w Next.js 14+) obsługuje zasoby statyczne w /public identycznie jak pakiet internetowy. Pliki Favicon w /public są dostarczane bez pakietowania. W przypadku plików w formacie /app (konwencja ikon) Turbopack przetwarza je jako zasoby metadanych — nie jest wymagana żadna zmiana konfiguracji podczas przełączania między Turbopackiem a pakietem internetowym.
Next.js ISR (przyrostowa regeneracja statyczna) i wdrożenia brzegowe nie wpływają na wyświetlanie favikon. Pliki Favicon to zasoby statyczne udostępniane z krawędzi CDN, a nie z pamięci podręcznej ISR. Oznacza to, że aktualizacje ikon favicon są rozpowszechniane natychmiast po wdrożeniu, bez czekania na ponowną weryfikację strony.
Aplikacje Next.js obsługujące wiele ustawień regionalnych często wymagają ikon obsługujących ustawienia regionalne. Użyj funkcji generateMetadata w pliku układ.tsx, aby zwrócić ścieżki ikon specyficzne dla ustawień regionalnych na podstawie obiektu params. Jest to funkcja dostępna tylko dla App Router — witryny Pages Router wymagają niestandardowej logiki _document.tsx lub niestandardowego serwera, aby uzyskać ulubione ikony dla poszczególnych ustawień regionalnych.
Po wdrożeniu sprawdź ulubione ikony Next.js za pomocą favicon tester. Sprawdź, czy /favicon.ico, /icon.svg i /apple-touch-icon.png zwracają 200 odpowiedzi z prawidłowymi nagłówkami typu treści. Sprawdź także `<head>` HTML wdrożonej witryny, aby upewnić się, że Next.js wyemitował wszystkie oczekiwane tagi łączy.
Jak to działa
- 1
Wygeneruj swój pakiet favicon
Prześlij plik 512×512 PNG lub SVG do [favicon generator](tool:favicon-generator). Pobierz favicon.ico, icon.svg, apple-touch-icon.png (180×180) i manifest PNG.
- 2
Umieść favicon.ico w /app (App Router)
Skopiuj favicon.ico do katalogu /app swojego projektu wraz z plikiem Layout.tsx. Next.js automatycznie go obsługuje i wstrzykuje tag linku. Zamiast tego w przypadku Pages Router umieść go w /public.
- 3
Dodaj plik icon.svg, aby uzyskać ostre renderowanie
Zmień nazwę SVG na icon.svg i umieść go w /app (App Router). Next.js automatycznie emituje znacznik łącza SVG. W przypadku Pages Router umieść /public i dodaj znacznik łącza w _document.tsx.
- 4
Dodaj plik apple-icon.png dla instalacji iOS
Zmień nazwę swojego pliku 180×180 PNG na apple-icon.png i umieść go w /app (App Router). W przypadku Pages Router umieść plik apple-touch-icon.png w /public i dodaj znacznik łącza w _document.tsx.
- 5
Skonfiguruj manifest internetowy
W przypadku App Router utwórz plik /app/manifest.ts i wyeksportuj metadane manifestu, w tym wpisy ikon o wymiarach 192 × 192 i 512 × 512. Umieść PNG w /public. W przypadku Pages Router umieść site.webmanifest w /public i dodaj tag łącza manifestu w _document.tsx.
- 6
Sprawdź na produkcji
Po wdrożeniu wyświetl źródło na aktywnym adresie URL i potwierdź obecność wszystkich tagów linków. Użyj [favicon tester](utility:favicon-tester), aby sprawdzić, czy adres URL każdej ikony zwraca 200 z prawidłowym typem zawartości.
Wypróbuj teraz
Wygeneruj favikonę gotową do Next.js
Generator FaviconFAQ
Gdzie idą favicony w Next.js App Router?+
Wewnątrz katalogu /app. Pliki o nazwach favicon.ico, icon.png, icon.svg i apple-icon.png są automatycznie rozpoznawane i łączone. Globalna favikona pojawia się w /app; plik specyficzny dla układu znajduje się w odpowiednim podkatalogu układu.
Gdzie idą favicony w Next.js Pages Router?+
W katalogu /public. Dodaj tag linku w pages/_document.tsx wewnątrz komponentu `<Head>`. Next.js udostępnia pliki /public pod głównym adresem URL — /public/favicon.ico jest dostępny pod adresem https://yourdomain.com/favicon.ico.
Czy muszę edytować plik układu.tsx, aby dodać favikonę w App Router?+
Nie, jeśli używasz konwencji pliku (favicon.ico w /app). Jeśli wolisz kod, wyeksportuj obiekt metadanych z właściwością ikon. Obydwa podejścia dają identyczne znaczniki `<link>` w renderowanym HTML.
Czy Next.js obsługuje ulubione ikony SVG?+
Tak. Umieść plik icon.svg w /app dla App Router lub dodaj `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` w _document.tsx dla Pages Router. App Router automatycznie emituje znacznik łącza SVG zgodnie z konwencją pliku.
Jak dodać apple-touch-icon do Next.js?+
Dla App Router: umieść apple-icon.png (180×180) w /app. Next.js automatycznie emituje znacznik łącza apple-touch-icon. Dla Pages Router: umieść apple-touch-icon.png w /public i dodaj tag linku w _document.tsx.
Czy Next.js automatycznie usuwa ulubione ikony z pamięci podręcznej?+
W przypadku plików w /app tak — Next.js dodaje skrót treści do udostępnianej nazwy pliku, więc każda zmiana pliku powoduje ponowne pobranie. W przypadku plików w formacie /public brak automatycznego pomijania pamięci podręcznej; w razie potrzeby ręcznie dodaj ciąg zapytania.
Czy mogę użyć innej favikony na stronę w Next.js?+
Tak. W App Router wyeksportuj funkcję generateMetadata w pliku page.tsx określonej trasy z niestandardową wartością ikon. W Pages Router dodaj `<link rel='icon'>` wewnątrz komponentu `<Head>` na stronę — zastępuje to ustawienie domyślne na poziomie dokumentu.