App Router môže vytvárať značky ikon z konvenčne pomenovaných súborov alebo z objektu metadata. Oba prístupy sú platné, no ich miešanie bez jasných pravidiel ľahko vytvorí konkurenčné deklarácie.
Vyberte konvencie súborov
Umiestnite favicon.ico do koreňového adresára app. Súbory icon s podporovanou príponou môžu byť v segmente trasy, zatiaľ čo apple-icon opisuje ikonu pre zariadenia Apple.
Next.js tieto súbory rozpozná, vypočíta potrebné atribúty a pridá príslušné prvky link do head. Ikona umiestnená v segmente platí pre trasy daného segmentu.
| Súbor | Umiestnenie | Použitie |
|---|---|---|
| favicon.ico | app/ | Záložná ikona webu |
| icon.svg | segment app/ | Ikona prehliadača |
| apple-icon.png | segment app/ | Ikona Apple |
| manifest.webmanifest | segment app/ | Manifest na inštaláciu |
Použite metadata pre explicitné cesty
Ak súbory ukladáte do public alebo na obrazový server, deklarujte metadata.icons v layoute alebo na stránke. Uveďte icon, apple a podľa potreby shortcut s konzistentnými URL.
Metadáta podradeného segmentu môžu nahradiť zdedené zložené polia. Preto skontrolujte výsledný head viacerých trás a nepredpokladajte, že každá nadradená položka bola zlúčená.
Pre ikonu generovanú na požiadanie Next.js prijíma aj icon.tsx alebo icon.js. Funkcia vracia obrazové dáta s explicitným rozmerom a typom. Tento prístup používajte pre skutočne dynamické kompozície: statický súbor sa jednoduchšie ukladá do vyrovnávacej pamäte a kontroluje.
Prepojte manifest s ikonami
Statický súbor manifest alebo funkcia manifest.ts môže opisovať názov aplikácie, farby a inštalovateľné ikony. URL ikon v manifeste musia byť verejné a odkazovať na deklarované rozmery.
Rozlišujte úlohu manifestu a faviconu karty: ikona 512×512 určená na inštaláciu automaticky nenahrádza icon.svg ani favicon.ico.
Testujte v produkcii
Spustite produkčné zostavenie, otvorte trasu z každého príslušného segmentu a skontrolujte prvky link. Potom priamo overte každú URL súboru a uistite sa, že ju nezachytáva middleware.
Ak používate basePath alebo CDN, otestujte vytvorené URL v nasadenom prostredí. Lokálne správanie nemusí odhaliť nesprávnu verejnú základnú cestu či pravidlo prepisovania.
Primárne zdroje
Časté otázky
Treba značky link písať ručne?
Nie. Môžu ich vytvoriť konvencie súborov alebo metadata.icons. Zvoľte jeden jasný zdroj pravdy.
Kam umiestniť favicon.ico?
V App Router je konvencia favicon.ico podporovaná v koreňovom adresári priečinka app.
Nahrádza manifest.ts súbor icon.svg?
Nie. Manifest opisuje okrem iného inštalovateľné ikony, zatiaľ čo icon.svg priamo poskytuje ikonu prehliadača.