App Router może tworzyć elementy ikon na podstawie konwencjonalnych plików lub obiektu metadata. Obie metody są poprawne, ale mieszanie ich bez jasnej zasady łatwo prowadzi do konkurujących deklaracji.
Wybierz konwencje plików
Umieść favicon.ico w katalogu głównym app. Obsługiwane pliki icon mogą znajdować się w segmencie trasy, natomiast apple-icon opisuje ikonę dla urządzeń Apple.
Next.js wykrywa te pliki, określa przydatne atrybuty i dodaje odpowiednie elementy link do head. Ikona umieszczona w segmencie dotyczy tras w tym segmencie.
| Plik | Lokalizacja | Przeznaczenie |
|---|---|---|
| favicon.ico | app/ | Zapasowa ikona witryny |
| icon.svg | segment app | Ikona przeglądarki |
| apple-icon.png | segment app | Ikona Apple |
| manifest.webmanifest | segment app | Manifest instalowanej aplikacji |
Użyj metadanych dla jawnych ścieżek
Jeśli pliki znajdują się w public lub na serwerze obrazów, zadeklaruj metadata.icons w układzie lub stronie. Określ icon, apple oraz, gdy potrzebne, shortcut, używając spójnych adresów URL.
Metadane segmentu potomnego mogą zastąpić złożone pola odziedziczone po rodzicu. Sprawdź końcowy head na kilku trasach, zamiast zakładać, że wszystkie wpisy rodzica zostały połączone.
Dla ikony generowanej na żądanie Next.js obsługuje też icon.tsx lub icon.js. Funkcja zwraca dane obrazu z jawnym rozmiarem i typem zawartości. Zachowaj tę metodę dla naprawdę dynamicznych kompozycji: statyczny plik łatwiej buforować, sprawdzać i udostępniać spójnie między wdrożeniami.
Połącz manifest i jego ikony
Statyczny plik manifestu lub funkcja manifest.ts może opisywać nazwę aplikacji, kolory i instalowane ikony. Adresy ikon manifestu muszą być publiczne i wskazywać pliki o zadeklarowanych wymiarach.
Oddziel rolę manifestu od favicon karty: ikona instalacji 512×512 nie zastępuje automatycznie icon.svg ani favicon.ico.
Przetestuj w środowisku produkcyjnym
Uruchom kompilację produkcyjną, otwórz po jednej trasie z każdego objętego zmianą segmentu i sprawdź elementy link. Następnie otwórz bezpośrednio każdy URL pliku i potwierdź, że middleware go nie przechwytuje.
Jeśli korzystasz z basePath lub CDN, przetestuj wygenerowane adresy w środowisku wdrożeniowym. Zachowanie lokalne nie zawsze ujawnia błędną publiczną ścieżkę bazową lub regułę przepisywania.
Źródła pierwotne
Najczęstsze pytania
Czy trzeba ręcznie pisać elementy link?
Nie. Konwencje plików lub metadata.icons mogą je wygenerować. Wybierz jedno jasne źródło konfiguracji.
Gdzie umieścić favicon.ico?
W App Router konwencja favicon.ico jest obsługiwana w katalogu głównym app.
Czy manifest.ts zastępuje icon.svg?
Nie. Manifest opisuje między innymi instalowane ikony, natomiast icon.svg bezpośrednio dostarcza ikonę przeglądarki.