Favicon στο Next.js App Router

Τοποθετήστε το favicon.ico στη ρίζα του app. Τα υποστηριζόμενα αρχεία icon μπορούν να βρίσκονται σε τμήμα διαδρομής, ενώ το apple-icon περιγράφει το εικονίδιο για συσκευές Apple.

Το Next.js εντοπίζει αυτά τα αρχεία, προσδιορίζει χρήσιμα γνωρίσματα και προσθέτει τα αντίστοιχα στοιχεία link στο head. Ένα εικονίδιο μέσα σε τμήμα εφαρμόζεται στις διαδρομές εκείνου του τμήματος.

Αν τα αρχεία βρίσκονται στο public ή σε διακομιστή εικόνων, δηλώστε metadata.icons σε layout ή σελίδα. Ορίστε icon, apple και, όπου χρειάζεται, shortcut με συνεπείς URL.

Τα metadata θυγατρικού τμήματος μπορούν να αντικαταστήσουν σύνθετα πεδία που κληρονομούνται από το γονικό. Εξετάστε το τελικό head σε διάφορες διαδρομές αντί να θεωρήσετε ότι όλες οι γονικές εγγραφές συγχωνεύτηκαν.

Για εικονίδιο που δημιουργείται κατ’ απαίτηση, το Next.js υποστηρίζει επίσης icon.tsx ή icon.js. Η συνάρτηση επιστρέφει δεδομένα εικόνας με ρητό μέγεθος και τύπο περιεχομένου. Κρατήστε αυτή την προσέγγιση για πραγματικά δυναμικές συνθέσεις: ένα στατικό αρχείο αποθηκεύεται, εξετάζεται και σερβίρεται πιο απλά και με συνέπεια μεταξύ δημοσιεύσεων.

Ένα στατικό manifest ή μια συνάρτηση manifest.ts μπορεί να περιγράφει όνομα εφαρμογής, χρώματα και εικονίδια εγκατάστασης. Οι URL των εικονιδίων manifest πρέπει να είναι δημόσιες και να δείχνουν σε αρχεία με τις δηλωμένες διαστάσεις.

Κρατήστε ξεχωριστό τον ρόλο του manifest από το favicon καρτέλας: ένα εικονίδιο εγκατάστασης 512×512 δεν αντικαθιστά αυτόματα τα icon.svg ή favicon.ico.

Εκτελέστε build παραγωγής, ανοίξτε μία διαδρομή από κάθε επηρεαζόμενο τμήμα και εξετάστε τα στοιχεία link. Έπειτα ανοίξτε απευθείας κάθε URL αρχείου και επιβεβαιώστε ότι το middleware δεν παρεμβαίνει.

Αν χρησιμοποιείτε basePath ή CDN, δοκιμάστε τις παραγόμενες URL στο δημοσιευμένο περιβάλλον. Η τοπική συμπεριφορά δεν αποκαλύπτει πάντα λανθασμένη δημόσια βάση ή κανόνα επανεγγραφής.