App Router umí vytvářet značky ikon ze souborů podle konvencí nebo z objektu metadata. Oba postupy jsou správné, ale jejich kombinování bez jasných pravidel snadno vede ke konkurenčním deklaracím.
Zvolte souborové konvence
Umístěte favicon.ico do kořene app. Soubory icon s podporovanou příponou mohou být v segmentu cesty, zatímco apple-icon popisuje ikonu pro zařízení Apple.
Next.js tyto soubory rozpozná, vypočítá potřebné atributy a přidá odpovídající prvky link do head. Ikona umístěná v segmentu platí pro cesty tohoto segmentu.
| Soubor | Umístění | Použití |
|---|---|---|
| favicon.ico | app/ | Záložní ikona webu |
| icon.svg | segment app/ | Ikona prohlížeče |
| apple-icon.png | segment app/ | Ikona Apple |
| manifest.webmanifest | segment app/ | Manifest pro instalaci |
Použijte metadata pro explicitní cesty
Pokud jsou soubory v public nebo na obrazovém serveru, deklarujte metadata.icons v layoutu či stránce. Zadejte icon, apple a případně shortcut s konzistentními URL.
Metadata podřízeného segmentu mohou přepsat zděděná složená pole. Prohlédněte proto výsledný head na více cestách a nepředpokládejte, že se všechny položky nadřazeného segmentu sloučily.
Pro ikonu generovanou na vyžádání Next.js podporuje také icon.tsx nebo icon.js. Funkce vrací obrazová data s explicitní velikostí a typem. Tento postup využívejte pro skutečně dynamické návrhy: statický soubor se snáze ukládá do mezipaměti a kontroluje.
Propojte manifest s ikonami
Statický soubor manifest nebo funkce manifest.ts mohou popsat název aplikace, barvy a instalační ikony. URL ikon v manifestu musí být veřejné a odkazovat na soubory s deklarovanými rozměry.
Oddělujte roli manifestu od favicon v kartě: ikona 512×512 určená pro instalaci automaticky nenahrazuje icon.svg ani favicon.ico.
Testujte v produkci
Spusťte produkční sestavení, otevřete cestu z každého dotčeného segmentu a prohlédněte prvky link. Poté otevřete přímo URL každého souboru a ověřte, že požadavek nezachytává middleware.
Pokud používáte basePath nebo CDN, otestujte vytvořené URL v nasazeném prostředí. Místní chování nemusí odhalit chybnou veřejnou základní cestu nebo pravidlo přepisu.
Primární zdroje
Časté otázky
Musím značky link psát ručně?
Ne. Mohou je vygenerovat souborové konvence nebo metadata.icons. Zvolte jeden jasný zdroj definic.
Kam umístit favicon.ico?
V App Routeru je konvence favicon.ico podporována v kořeni složky app.
Nahrazuje manifest.ts soubor icon.svg?
Ne. Manifest mimo jiné popisuje instalační ikony, zatímco icon.svg slouží přímo jako ikona prohlížeče.