App Router परंपरागत फ़ाइलों या metadata ऑब्जेक्ट से आइकन तत्व बना सकता है। दोनों तरीके सही हैं, लेकिन स्पष्ट नियम के बिना उन्हें मिलाने से आसानी से परस्पर विरोधी घोषणाएँ बन सकती हैं।
फ़ाइलों के नियम चुनें
favicon.ico को app के रूट में रखें। समर्थित icon फ़ाइलें किसी रूट सेगमेंट में रखी जा सकती हैं, जबकि apple-icon Apple डिवाइस के लिए आइकन बताता है।
Next.js इन फ़ाइलों को पहचानता है, उपयोगी एट्रिब्यूट तय करता है और संबंधित link तत्व head में जोड़ता है। किसी सेगमेंट में रखा आइकन उसी सेगमेंट के रूट पर लागू होता है।
| फ़ाइल | स्थान | उद्देश्य |
|---|---|---|
| favicon.ico | app/ | साइट का वैकल्पिक आइकन |
| icon.svg | app सेगमेंट | ब्राउज़र आइकन |
| apple-icon.png | app सेगमेंट | Apple आइकन |
| manifest.webmanifest | app सेगमेंट | इंस्टॉल करने योग्य मैनिफ़ेस्ट |
स्पष्ट पथ के लिए metadata इस्तेमाल करें
फ़ाइलें public में या किसी चित्र होस्ट पर हों तो layout या page में metadata.icons घोषित करें। एकसमान URL से icon, apple और ज़रूरत पर shortcut तय करें।
भीतर के सेगमेंट का metadata अपने पैरेंट से मिले संयुक्त फ़ील्ड बदल सकता है। यह मानने के बजाय कि पैरेंट की हर प्रविष्टि जुड़ गई है, कई रूट पर अंतिम head जाँचें।
ज़रूरत पर बनाए जाने वाले आइकन के लिए Next.js, icon.tsx या icon.js भी समर्थन देता है। फ़ंक्शन स्पष्ट आकार और सामग्री प्रकार के साथ चित्र डेटा लौटाता है। इसे सचमुच बदलते रहने वाले चित्रों के लिए रखें: स्थिर फ़ाइल को कैश करना, जाँचना और अलग-अलग डिप्लॉयमेंट में एकसमान देना आसान है।
मैनिफ़ेस्ट और उसके आइकन जोड़ें
स्थिर मैनिफ़ेस्ट फ़ाइल या manifest.ts फ़ंक्शन ऐप का नाम, रंग और इंस्टॉल करने योग्य आइकन बता सकता है। मैनिफ़ेस्ट के आइकन URL सार्वजनिक हों और घोषित आकार वाली फ़ाइलों पर जाएँ।
मैनिफ़ेस्ट का काम टैब के फ़ेविकॉन से अलग रखें: 512×512 का इंस्टॉलेशन आइकन अपने आप icon.svg या favicon.ico की जगह नहीं लेता।
प्रोडक्शन में जाँचें
प्रोडक्शन बिल्ड चलाएँ, हर प्रभावित सेगमेंट का एक रूट खोलें और link तत्व जाँचें। फिर हर फ़ाइल का URL सीधे खोलकर पुष्टि करें कि middleware उसे बीच में नहीं रोकता।
basePath या CDN इस्तेमाल करते हों तो डिप्लॉय किए वातावरण में बने URL जाँचें। स्थानीय व्यवहार से हमेशा गलत सार्वजनिक बेस या rewrite नियम पता नहीं चलता।
प्राथमिक स्रोत
अक्सर पूछे जाने वाले सवाल
क्या link तत्व हाथ से लिखने पड़ते हैं?
नहीं। फ़ाइलों के नियम या metadata.icons उन्हें बना सकते हैं। एक स्पष्ट मुख्य स्रोत चुनें।
favicon.ico कहाँ रखना चाहिए?
App Router में favicon.ico का नियम app डायरेक्टरी के रूट में समर्थित है।
क्या manifest.ts, icon.svg की जगह लेता है?
नहीं। मैनिफ़ेस्ट अन्य डेटा के साथ इंस्टॉल करने योग्य आइकन बताता है, जबकि icon.svg सीधे ब्राउज़र आइकन देता है।