Next.js के लिए फ़ेविकॉन
Next.js 14+ App Router ने फ़ाइल-आधारित आइकन परंपराएं पेश कीं: favicon.ico या आइकन.पीएनजी को /app निर्देशिका के अंदर छोड़ें और Next.js स्वचालित रूप से सही `<link>` टैग उत्सर्जित करता है - किसी मैन्युअल हेड घटक की आवश्यकता नहीं है। Pages Router परियोजनाओं के लिए, favicon.ico को /public में रखें और इसे _document.tsx से लिंक करें। favicon generator एक स्रोत छवि से संपूर्ण फ़ाइल सेट तैयार करता है, और best favicon size guide कवर करता है कि प्रत्येक संदर्भ के लिए कौन से आकार मायने रखते हैं।
Next.js 13+ App Router के साथ /app निर्देशिका में विशेष फ़ाइल नामों को मेटाडेटा सम्मेलनों के रूप में मानता है। favicon.ico, आइकन.पीएनजी, आइकन.एसवीजी, और ऐप्पल-आइकन.पीएनजी नाम की फ़ाइलें स्वचालित रूप से Next.js मेटाडेटा सिस्टम द्वारा पहचानी जाती हैं और लेआउट.टीएसएक्स या मेटाडेटा निर्यात में किसी भी कॉन्फ़िगरेशन के बिना, सही प्रतिक्रिया हेडर और `<link>` टैग के साथ परोसी जाती हैं।
फ़ाइल कन्वेंशन का उपयोग करने के लिए, अपने favicon.ico को /app निर्देशिका के अंदर रखें (/public नहीं)। Next.js इसे /favicon.ico रूट पर परोसता है और उस लेआउट को साझा करने वाले प्रत्येक पेज में लिंक टैग इंजेक्ट करता है। विश्व स्तर पर लागू करने के लिए आइकन फ़ाइल आपके रूट लेआउट.tsx के समान स्तर पर होनी चाहिए।
App Router का उपयोग करके उच्च-DPI आइकन के लिए, /app के अंदर एक आइकन.पीएनजी रखें। Next.js इसके आयामों को पढ़ता है और उचित `<link rel='icon' sizes='...' href='...'>` टैग उत्पन्न करता है। एकाधिक आकारों की सेवा के लिए, विभिन्न संख्यात्मक प्रत्ययों के साथ एकाधिक आइकन फ़ाइलें निर्यात करें: आइकन.पीएनजी (32×32), आइकन@2x.पीएनजी (64×64), या एकल असीम-स्केलेबल फ़ाइल के लिए आइकन.एसवीजी का उपयोग करें।
App Router, iOS होम-स्क्रीन आइकन के लिए एक समर्पित apple-icon.png फ़ाइल का भी समर्थन करता है। /app के अंदर apple-icon.png (180×180) रखें और Next.js स्वचालित रूप से `<link rel='apple-touch-icon' href='...'>` उत्सर्जित करता है। यह सबसे साफ़ तरीका है - मैन्युअल मेटाडेटा निर्यात की आवश्यकता नहीं है।
यदि आप फ़ाइल कन्वेंशन के बजाय कोड में फ़ेविकॉन घोषित करना पसंद करते हैं, तो लेआउट.tsx से मेटाडेटा ऑब्जेक्ट निर्यात करें। आइकन प्रॉपर्टी किसी ऑब्जेक्ट को शॉर्टकट, आइकन, ऐप्पल और अन्य फ़ील्ड के साथ स्वीकार करती है। उदाहरण: `निर्यात स्थिरांक मेटाडेटा: मेटाडेटा = {आइकॉन: {आइकन: '/favicon.ico', ऐप्पल: '/apple-touch-icon.png' } }`। यह विधि तब उपयोगी होती है जब आपको स्थानीय या पर्यावरण के आधार पर गतिशील आइकन पथ की आवश्यकता होती है।
Pages Router प्रोजेक्ट्स (Next.js 12 और नीचे, या प्रोजेक्ट्स जो App Router पर माइग्रेट नहीं हुए हैं) के लिए, फ़ेविकॉन हैंडलिंग अलग तरीके से काम करती है। favicon.ico को /public निर्देशिका में रखें - Next.js रूट URL पर /public परोसता है। `<Head>` घटक के अंदर पेज/_document.tsx में लिंक टैग जोड़ें: `<link rel='icon' href='/favicon.ico' />`। यह `<Head>` दस्तावेज़-स्तरीय शीर्ष है, न कि प्रति-पृष्ठ अगला/शीर्ष आयात।
अगला/हेड घटक ('नेक्स्ट/हेड' से हेड आयात करें) Pages Router में प्रति-पेज आइकन ओवरराइड के लिए काम करता है। यदि आप किसी विशिष्ट पृष्ठ पर एक अलग फ़ेविकॉन चाहते हैं, तो उस पृष्ठ घटक में `<Head>` के अंदर एक `<link rel='icon'>` शामिल करें। प्रति-पृष्ठ टैग दस्तावेज़-स्तर वाले टैग को ओवरराइड करता है। यह एक Next.js परिनियोजन से प्रदान की जाने वाली बहु-ब्रांड साइटों के लिए उपयोगी है।
SVG फ़ेविकॉन पूरी तरह से Next.js App Router कन्वेंशन द्वारा समर्थित हैं। फ़ाइल को आइकन.svg नाम दें और इसे /app में रखें। Next.js `<link rel='icon' type='image/svg+xml' href='/_next/static/media/icon.svg...'>` उत्सर्जित करता है। क्योंकि Next.js कैश बस्टिंग के लिए स्थिर फ़ाइल नामों को हैश करता है, आपको फ़ेविकॉन कैश अमान्यता के बारे में चिंता करने की ज़रूरत नहीं है - फ़ाइल बदलने से हैश बदल जाता है और ब्राउज़र को रीफ़ेच करने के लिए मजबूर होना पड़ता है।
Next.js App Router में वेब मेनिफेस्ट को /app में मेनिफेस्ट.ts फ़ाइल के माध्यम से कॉन्फ़िगर किया गया है। MetadataRoute.Manifest ऑब्जेक्ट लौटाने वाला एक डिफ़ॉल्ट फ़ंक्शन निर्यात करें जिसमें आपके आइकन आकार शामिल हों। Next.js इसे /manifest.webmanifest पर एप्लिकेशन/मैनिफ़ेस्ट+json के रूप में प्रस्तुत करता है। मेनिफेस्ट में संदर्भित 192×192 और 512×512 PNG को /public में रखा जाना चाहिए।
टर्बोपैक (Next.js 14+ में प्रायोगिक बंडलर) वेबपैक की तरह ही /public में स्थिर परिसंपत्तियों को संभालता है। /public में फ़ेविकॉन फ़ाइलें बिना बंडल किए परोसी जाती हैं। /app (आइकन कन्वेंशन) में फ़ाइलों के लिए, टर्बोपैक उन्हें मेटाडेटा संपत्तियों के रूप में संसाधित करता है - टर्बोपैक और वेबपैक के बीच स्विच करते समय कोई कॉन्फ़िगरेशन परिवर्तन की आवश्यकता नहीं होती है।
Next.js ISR (इंक्रीमेंटल स्टेटिक रिजनरेशन) और एज परिनियोजन फ़ेविकॉन सेवा को प्रभावित नहीं करते हैं। फ़ेविकॉन फ़ाइलें सीडीएन एज से प्रदान की जाने वाली स्थिर संपत्तियां हैं, आईएसआर कैश से नहीं। इसका मतलब यह है कि फ़ेविकॉन अपडेट पृष्ठ पुनर्वैधीकरण की प्रतीक्षा किए बिना परिनियोजन के तुरंत बाद प्रसारित हो जाते हैं।
मल्टी-लोकेल Next.js ऐप्स को अक्सर स्थानीय-जागरूक आइकन की आवश्यकता होती है। पैराम्स ऑब्जेक्ट के आधार पर स्थानीय-विशिष्ट आइकन पथ वापस करने के लिए लेआउट.tsx में जेनरेटमेटाडेटा फ़ंक्शन का उपयोग करें। यह एक App Router-केवल सुविधा है - Pages Router साइटों को प्रति-लोकेल फ़ेविकॉन प्राप्त करने के लिए कस्टम _document.tsx तर्क या एक कस्टम सर्वर की आवश्यकता होती है।
परिनियोजन के बाद, favicon tester का उपयोग करके अपने Next.js फ़ेविकॉन को सत्यापित करें। जांचें कि /favicon.ico, /icon.svg, और /apple-touch-icon.png सभी सही सामग्री-प्रकार हेडर के साथ 200 प्रतिक्रियाएँ लौटाते हैं। यह पुष्टि करने के लिए कि Next.js ने सभी अपेक्षित लिंक टैग उत्सर्जित किए हैं, अपनी तैनात साइट के `<head>` HTML का भी निरीक्षण करें।
यह कैसे काम करता है
- 1
अपना फ़ेविकॉन पैकेज जनरेट करें
[favicon generator](tool:favicon-generator) पर 512×512 PNG या SVG अपलोड करें। favicon.ico, आइकन.svg, apple-touch-icon.png (180×180), और मेनिफेस्ट PNG डाउनलोड करें।
- 2
favicon.ico को /app (App Router) में रखें
favicon.ico को अपने प्रोजेक्ट की /app निर्देशिका में लेआउट.tsx के साथ कॉपी करें। Next.js स्वचालित रूप से इसे परोसता है और लिंक टैग इंजेक्ट करता है। Pages Router के लिए, इसे /public में रखें।
- 3
तीव्र प्रतिपादन के लिए आइकन.svg जोड़ें
अपने SVG का नाम बदलकर आइकन.svg रखें और इसे /app (App Router) में रखें। Next.js स्वचालित रूप से एक SVG लिंक टैग उत्सर्जित करता है। Pages Router के लिए, /public में रखें और _document.tsx में लिंक टैग जोड़ें।
- 4
iOS इंस्टॉल के लिए apple-icon.png जोड़ें
अपने 180×180 PNG का नाम बदलकर apple-icon.png रखें और इसे /app (App Router) में रखें। Pages Router के लिए, apple-touch-icon.png को /public में रखें और लिंक टैग _document.tsx में जोड़ें।
- 5
वेब मेनिफेस्ट कॉन्फ़िगर करें
App Router के लिए, /app/manifest.ts बनाएं और 192×192 और 512×512 आइकन प्रविष्टियों सहित मैनिफेस्ट मेटाडेटा निर्यात करें। PNG को /public में रखें। Pages Router के लिए, site.webmanifest को /public में रखें और _document.tsx में मेनिफेस्ट लिंक टैग जोड़ें।
- 6
उत्पादन पर सत्यापित करें
परिनियोजन के बाद, अपने लाइव यूआरएल पर स्रोत देखें और पुष्टि करें कि सभी लिंक टैग मौजूद हैं। यह जांचने के लिए [favicon tester](utility:favicon-tester) का उपयोग करें कि प्रत्येक आइकन URL सही सामग्री प्रकार के साथ 200 लौटाता है।
अभी आज़माएं
एक Next.js-तैयार फ़ेविकॉन जेनरेट करें
फ़ेविकॉन जनरेटरसामान्य प्रश्न
Next.js App Router में फ़ेविकॉन कहाँ जाते हैं?+
/app निर्देशिका के अंदर। favicon.ico, आइकन.पीएनजी, आइकन.एसवीजी, और ऐप्पल-आइकन.पीएनजी नाम की फ़ाइलें स्वचालित रूप से पहचानी जाती हैं और लिंक की जाती हैं। एक वैश्विक फ़ेविकॉन /app में जाता है; एक लेआउट-विशिष्ट संबंधित लेआउट उपनिर्देशिका में जाता है।
Next.js Pages Router में फ़ेविकॉन कहाँ जाते हैं?+
/public निर्देशिका में। `<Head>` घटक के अंदर पेज/_document.tsx में लिंक टैग जोड़ें। Next.js रूट यूआरएल पर /public फ़ाइलें पेश करता है - /public/favicon.ico https://yourdomain.com/favicon.ico पर पहुंच योग्य है।
क्या मुझे App Router में फ़ेविकॉन जोड़ने के लिए लेआउट.tsx को संपादित करने की आवश्यकता है?+
नहीं, यदि आप फ़ाइल कन्वेंशन (/app में favicon.ico) का उपयोग करते हैं। यदि आप कोड पसंद करते हैं, तो आइकन प्रॉपर्टी के साथ मेटाडेटा ऑब्जेक्ट निर्यात करें। दोनों दृष्टिकोण प्रस्तुत HTML में समान `<link>` टैग उत्पन्न करते हैं।
क्या Next.js SVG फ़ेविकॉन का समर्थन करता है?+
हाँ। App Router के लिए /app में आइकन.svg रखें, या Pages Router के लिए _document.tsx में `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` जोड़ें। App Router स्वचालित रूप से फ़ाइल कन्वेंशन से SVG लिंक टैग उत्सर्जित करता है।
मैं Next.js में apple-touch-icon कैसे जोड़ूँ?+
App Router के लिए: apple-icon.png (180×180) को /app में रखें। Next.js स्वचालित रूप से apple-touch-icon लिंक टैग उत्सर्जित करता है। Pages Router के लिए: apple-touch-icon.png को /public में रखें और लिंक टैग _document.tsx में जोड़ें।
क्या Next.js फ़ेविकॉन को स्वचालित रूप से कैश-बस्ट करता है?+
/app में फ़ाइलों के लिए, हाँ - Next.js प्रस्तुत फ़ाइल नाम में एक सामग्री हैश जोड़ता है, इसलिए प्रत्येक फ़ाइल परिवर्तन एक ताज़ा फ़ेच ट्रिगर करता है। /public में फ़ाइलों के लिए, कोई स्वचालित कैश-बस्टिंग नहीं; यदि आवश्यक हो तो क्वेरी स्ट्रिंग को मैन्युअल रूप से जोड़ें।
क्या मैं Next.js में प्रति पृष्ठ एक अलग फ़ेविकॉन का उपयोग कर सकता हूँ?+
हाँ। App Router में, कस्टम आइकन मान के साथ विशिष्ट रूट के पेज.tsx में जेनरेटमेटाडेटा फ़ंक्शन निर्यात करें। Pages Router में, प्रति पृष्ठ `<Head>` घटक के अंदर एक `<link rel='icon'>` जोड़ें - यह दस्तावेज़-स्तर डिफ़ॉल्ट को ओवरराइड करता है।