App Router saab luua ikoonielemente kokkuleppeliste failide või metadata-objekti põhjal. Mõlemad lähenemised sobivad, kuid nende selge reeglita segamine võib kergesti tekitada omavahel konkureerivaid deklaratsioone.
Vali failikokkulepped
Paiguta favicon.ico kausta app juurkausta. Toetatud ikoonifailid võivad asuda marsruudisegmendis ning apple-icon kirjeldab Apple'i seadmetele mõeldud ikooni.
Next.js tuvastab need failid, määrab vajalikud atribuudid ja lisab vastavad link-elemendid head-ossa. Segmenti paigutatud ikoon kehtib selle segmendi marsruutidele.
| Fail | Asukoht | Otstarve |
|---|---|---|
| favicon.ico | app/ | Saidi varuvariant |
| icon.svg | app-segment | Brauseri ikoon |
| apple-icon.png | app-segment | Apple'i ikoon |
| manifest.webmanifest | app-segment | Paigaldatava rakenduse manifest |
Kasuta täpsete asukohtade jaoks metaandmeid
Kui failid asuvad kaustas public või pildimajutuses, deklareeri paigutuses või lehel metadata.icons. Määra icon, apple ja vajaduse korral shortcut, kasutades ühtseid URL-e.
Alamsegmendi metaandmed võivad asendada vanemalt päritud liitvälju. Kontrolli lõplikku head-osa mitmel marsruudil, selle asemel et eeldada kõigi vanema kirjete ühendamist.
Vajaduse korral loodava ikooni jaoks toetab Next.js ka faile icon.tsx ja icon.js. Funktsioon tagastab pildiandmed koos selgelt määratud mõõtmete ning sisutüübiga. Kasuta seda tõeliselt dünaamiliste kujunduste jaoks: staatilist faili on lihtsam vahemällu salvestada, kontrollida ja eri avaldamiste vahel ühtmoodi serveerida.
Ühenda manifest ja selle ikoonid
Staatiline manifestifail või funktsioon manifest.ts võib kirjeldada rakenduse nime, värve ja paigaldatavaid ikoone. Manifesti ikoonide URL-id peavad olema avalikud ning viitama deklareeritud mõõtmetega failidele.
Hoia manifesti roll vahekaardi faviconist eraldi: 512×512 paigaldusikoon ei asenda automaatselt faile icon.svg ega favicon.ico.
Testi tootmiskeskkonnas
Käivita tootmiskeskkonna järk, ava igast mõjutatud segmendist üks marsruut ja uuri link-elemente. Seejärel ava iga faili URL otse ning veendu, et vahevara seda kinni ei püüa.
Kui kasutad basePath-i või CDN-i, testi loodud URL-e avaldatud keskkonnas. Kohalik käitumine ei paljasta alati vale avalikku baasaadressi ega ümberkirjutusreeglit.
Algallikad
Korduma kippuvad küsimused
Kas link-elemendid tuleb käsitsi kirjutada?
Ei. Failikokkulepped või metadata.icons saavad need luua. Vali üks selge tõeallikas.
Kuhu favicon.ico paigutada?
App Routeri puhul toetatakse favicon.ico-kokkulepet kausta app juurkaustas.
Kas manifest.ts asendab icon.svg-d?
Ei. Manifest kirjeldab muu hulgas paigaldatavaid ikoone, icon.svg aga pakub otse brauseri ikooni.