App Router voi tuottaa kuvaketunnisteet nimeämiskäytäntöjä noudattavista tiedostoista tai metadata-oliosta. Molemmat tavat toimivat, mutta niiden sekoittaminen ilman selkeää sääntöä luo helposti kilpailevia määrityksiä.
Valitse tiedostokäytännöt
Sijoita favicon.ico app-kansion juureen. Tuetun päätteen icon-tiedostot voivat sijaita reittisegmentissä, kun taas apple-icon määrittää Apple-laitteille tarkoitetun kuvakkeen.
Next.js tunnistaa tiedostot, määrittää tarvittavat attribuutit ja lisää vastaavat link-elementit head-osaan. Segmenttiin sijoitettu kuvake koskee kyseisen segmentin reittejä.
| Tiedosto | Sijainti | Käyttötarkoitus |
|---|---|---|
| favicon.ico | app/ | Sivuston varakuvake |
| icon.svg | app/-segmentti | Selaimen kuvake |
| apple-icon.png | app/-segmentti | Apple-kuvake |
| manifest.webmanifest | app/-segmentti | Asennuksen manifesti |
Käytä metadataa tarkkoihin polkuihin
Jos tiedostot ovat public-kansiossa tai kuvapalvelimella, määritä metadata.icons layoutissa tai sivulla. Määritä icon, apple ja tarvittaessa shortcut johdonmukaisilla URL-osoitteilla.
Alisegmentin metadata voi korvata ylemmältä segmentiltä perittyjä yhdistelmäkenttiä. Tarkista siksi usean reitin lopullinen head sen sijaan, että olettaisit kaikkien ylemmän tason määritysten yhdistyneen.
Tarvittaessa luotavaa kuvaketta varten Next.js tukee myös tiedostoja icon.tsx ja icon.js. Funktio palauttaa kuvatiedot, koon ja sisältötyypin. Käytä tätä tapaa vain aidosti dynaamisiin kuviin: staattinen tiedosto on helpompi välimuistittaa ja tarkistaa.
Yhdistä manifesti ja sen kuvakkeet
Staattinen manifest-tiedosto tai manifest.ts-funktio voi määrittää sovelluksen nimen, värit ja asennuskuvakkeet. Manifestin kuvakeosoitteiden on oltava julkisia ja viitattava määritettyjä mittoja vastaaviin kuviin.
Pidä manifestin tehtävä erillään välilehden faviconista: asennukseen tarkoitettu 512×512-kuvake ei automaattisesti korvaa icon.svg- tai favicon.ico-tiedostoa.
Testaa tuotannossa
Luo tuotantokoonti, avaa jokaisesta muutetusta segmentistä yksi reitti ja tarkista link-elementit. Avaa sitten jokaisen tiedoston URL suoraan ja varmista, ettei middleware sieppaa sitä.
Jos käytät basePath-asetusta tai CDN:ää, testaa tuotetut URL-osoitteet julkaistussa ympäristössä. Paikallinen toiminta ei aina paljasta virheellistä julkista peruspolkua tai uudelleenkirjoitussääntöä.
Alkuperäislähteet
Usein kysytyt kysymykset
Pitääkö link-tunnisteet kirjoittaa käsin?
Ei. Tiedostokäytännöt tai metadata.icons voivat luoda ne. Valitse yksi selkeä määritystapa.
Minne favicon.ico sijoitetaan?
App Routerissa favicon.ico-käytäntöä tuetaan app-kansion juuressa.
Korvaako manifest.ts tiedoston icon.svg?
Ei. Manifesti kuvaa muun muassa asennuskuvakkeet, kun taas icon.svg toimii suoraan selaimen kuvakkeena.