Favicon pentru Next.js
Next.js 14+ App Router a introdus convenții de pictogramă bazate pe fișiere: plasați favicon.ico sau icon.png în directorul /app și Next.js emite automat etichetele `<link>` corecte - nu este necesară componenta manuală Head. Pentru proiectele Pages Router, plasați favicon.ico în /public și conectați-l de la _document.tsx. favicon generator produce setul complet de fișiere dintr-o singură imagine sursă, iar best favicon size guide acoperă ce dimensiuni contează pentru fiecare context.
Next.js 13+ cu App Router tratează numele de fișiere speciale din directorul /app ca convenții de metadate. Fișierele denumite favicon.ico, icon.png, icon.svg și apple-icon.png sunt recunoscute automat de sistemul de metadate Next.js și difuzate cu anteturile de răspuns corecte și etichetele `<link>`, fără nicio configurație în layout.tsx sau exporturile de metadate.
Pentru a utiliza convenția de fișier, plasați favicon.ico în directorul /app (nu /public). Next.js îl servește pe ruta /favicon.ico și injectează eticheta de link în fiecare pagină care partajează acel aspect. Fișierul pictogramă trebuie să fie la același nivel cu layout-ul rădăcină.tsx pentru ca acesta să se aplice la nivel global.
Pentru pictogramele cu DPI ridicate care utilizează App Router, plasați un icon.png în interiorul /app. Next.js își citește dimensiunile și generează eticheta `<link rel='icon' sizes='...' href='...'>` corespunzătoare. Pentru a difuza mai multe dimensiuni, exportați mai multe fișiere pictograme cu sufixe numerice diferite: icon.png (32×32), icon@2x.png (64×64) sau utilizați icon.svg pentru un singur fișier scalabil la infinit.
App Router acceptă, de asemenea, un fișier dedicat apple-icon.png pentru pictograma iOS de pe ecranul de pornire. Plasați apple-icon.png (180×180) în interiorul /app și Next.js emite automat `<link rel='apple-touch-icon' href='...'>`. Aceasta este cea mai curată abordare - nu este necesar exportul manual de metadate.
Dacă preferați să declarați favicon-urile în cod decât prin convențiile fișierului, exportați un obiect de metadate din layout.tsx. Proprietatea pictograme acceptă un obiect cu comandă rapidă, pictogramă, măr și alte câmpuri. Exemplu: `export const metadata: Metadate = { pictograme: { pictogramă: '/favicon.ico', apple: '/apple-touch-icon.png' } }`. Această metodă este utilă atunci când aveți nevoie de căi dinamice pentru pictograme bazate pe local sau mediu.
Pentru proiectele Pages Router (Next.js 12 și mai mici sau proiectele care nu au migrat la App Router), gestionarea favicon funcționează diferit. Plasați favicon.ico în directorul /public — Next.js servește /public la adresa URL rădăcină. Adăugați eticheta de link în paginile/_document.tsx în interiorul componentei `<Head>`: `<link rel='icon' href='/favicon.ico' />`. Acest `<Head>` este capul la nivel de document, nu importul următor/cap pe pagină.
Componenta următor/cap (import Head din „next/head”) funcționează pentru înlocuirea pictogramelor pe pagină în Pages Router. Dacă doriți o altă favicon pe o anumită pagină, includeți un „<link rel='icon'>” în interiorul `<Head>` în acea componentă a paginii. Eticheta pe pagină o înlocuiește pe cea la nivel de document. Acest lucru este util pentru site-urile cu mai multe mărci oferite dintr-o implementare Next.js.
Favicon-urile SVG sunt pe deplin acceptate de convențiile Next.js App Router. Denumiți fișierul icon.svg și plasați-l în /app. Next.js emite `<link rel='icon' type='image/svg+xml' href='/_next/static/media/icon.svg...'>`. Deoarece Next.js hashează nume de fișiere statice pentru spargerea memoriei cache, nu trebuie să vă faceți griji cu privire la invalidarea cache-ului favicon - schimbarea fișierului modifică hash-ul și forțează browserele să revină.
Manifestul web din Next.js App Router este configurat prin fișierul manifest.ts din /app. Exportați o funcție implicită care returnează un obiect MetadataRoute.Manifest care include dimensiunile pictogramelor dvs. Next.js îl redă ca application/manifest+json la /manifest.webmanifest. PNG de 192×192 și 512×512 la care se face referire în manifest ar trebui plasate în /public.
Turbopack (bundler-ul experimental din Next.js 14+) gestionează activele statice din /public în mod identic cu webpack. Fișierele Favicon din /public sunt difuzate fără grupare. Pentru fișierele din /app (convenția pictogramelor), Turbopack le procesează ca active de metadate - nu este necesară modificarea configurației atunci când comutați între Turbopack și webpack.
Next.js ISR (Regenerare statică incrementală) și implementările edge nu afectează difuzarea favicon. Fișierele Favicon sunt active statice servite din marginea CDN, nu din memoria cache ISR. Aceasta înseamnă că actualizările favicon se propagă imediat după implementare, fără a aștepta revalidarea paginii.
Aplicațiile Next.js cu locații multiple au adesea nevoie de pictograme care țin cont de locație. Utilizați funcția generateMetadata din layout.tsx pentru a returna căile pictogramelor specifice localității bazate pe obiectul params. Aceasta este o caracteristică exclusivă pentru App Router — site-urile Pages Router au nevoie de logică personalizată _document.tsx sau de un server personalizat pentru a obține favicon-uri per-locale.
După implementare, verificați faviconurile Next.js folosind favicon tester. Verificați dacă /favicon.ico, /icon.svg și /apple-touch-icon.png returnează toate 200 de răspunsuri cu anteturile corecte de tip de conținut. Inspectați, de asemenea, `<head>` HTML al site-ului dvs. implementat pentru a confirma că Next.js a emis toate etichetele de link așteptate.
Cum funcționează
- 1
Generați pachetul de favicon
Încărcați un PNG sau SVG de 512×512 în [favicon generator](tool:favicon-generator). Descărcați favicon.ico, icon.svg, apple-touch-icon.png (180×180) și manifestul PNG.
- 2
Plasați favicon.ico în /app (App Router)
Copiați favicon.ico în directorul /app al proiectului dvs. alături de layout.tsx. Next.js îl servește automat și injectează eticheta de link. Pentru Pages Router, plasați-l în /public.
- 3
Adăugați icon.svg pentru o randare clară
Redenumiți SVG în icon.svg și plasați-l în /app (App Router). Next.js emite automat o etichetă de legătură SVG. Pentru Pages Router, plasați în /public și adăugați eticheta de link în _document.tsx.
- 4
Adăugați apple-icon.png pentru instalările iOS
Redenumiți-vă 180×180 PNG în apple-icon.png și plasați-l în /app (App Router). Pentru Pages Router, plasați apple-touch-icon.png în /public și adăugați eticheta de link în _document.tsx.
- 5
Configurați manifestul web
Pentru App Router, creați /app/manifest.ts și exportați metadatele Manifest, inclusiv intrările pictogramei 192×192 și 512×512. Plasați PNG-urile în /public. Pentru Pages Router, plasați site.webmanifest în /public și adăugați eticheta de link manifest în _document.tsx.
- 6
Verificați la producție
După implementare, vizualizați sursa pe adresa URL live și confirmați că toate etichetele de link sunt prezente. Utilizați [favicon tester](utility:favicon-tester) pentru a verifica fiecare pictogramă URL returnează 200 cu tipul de conținut corect.
Încearcă acum
Generați o favicon gata pentru Next.js
Generator de FaviconÎntrebări frecvente
Unde merg favicon-urile în Next.js App Router?+
În directorul /app. Fișierele denumite favicon.ico, icon.png, icon.svg și apple-icon.png sunt recunoscute și conectate automat. O favicon globală merge în /app; unul specific aspectului merge în subdirectorul de layout corespunzător.
Unde merg favicon-urile în Next.js Pages Router?+
În directorul /public. Adăugați eticheta de link în pagini/_document.tsx în interiorul componentei `<Head>`. Next.js servește fișiere /public la adresa URL rădăcină — /public/favicon.ico este accesibil la https://yourdomain.com/favicon.ico.
Trebuie să editez layout.tsx pentru a adăuga o favicon în App Router?+
Nu, dacă utilizați convenția de fișier (favicon.ico în /app). Dacă preferați codul, exportați un obiect de metadate cu o proprietate de pictograme. Ambele abordări produc etichete `<link>` identice în HTML redat.
Next.js acceptă favicon-urile SVG?+
Da. Plasați icon.svg în /app pentru App Router sau adăugați `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` în _document.tsx pentru Pages Router. App Router emite automat eticheta de legătură SVG din convenția de fișier.
Cum adaug apple-touch-icon în Next.js?+
Pentru App Router: plasați apple-icon.png (180×180) în /app. Next.js emite automat eticheta de legătură apple-touch-icon. Pentru Pages Router: plasați apple-touch-icon.png în /public și adăugați eticheta de link în _document.tsx.
Next.js elimină automat faviconurile cache-ului?+
Pentru fișierele din /app, da — Next.js adaugă un hash de conținut la numele fișierului difuzat, astfel încât fiecare modificare a fișierului declanșează o nouă preluare. Pentru fișierele din /public, nu este automată cache-busting; adăugați manual un șir de interogare dacă este necesar.
Pot folosi o altă favicon pentru fiecare pagină în Next.js?+
Da. În App Router, exportați o funcție generateMetadata în pagina.tsx a rutei specifice cu o valoare de pictograme personalizată. În Pages Router, adăugați un „<link rel='icon'>” în interiorul componentei `<Head>` pe pagină — înlocuiește valoarea prestabilită la nivel de document.