Nuxt के लिए फ़ेविकॉन
Nuxt आपकी साइट रूट पर /public से स्थिर फ़ाइलें परोसता है, इसलिए /public/favicon.ico स्वचालित रूप से /favicon.ico बन जाता है। बहु-आकार या SVG आइकन के लिए, app.vue में nuxt.config.ts या useHead() के माध्यम से लिंक टैग जोड़ें।
Quick answer
To add a favicon in Nuxt 3, place favicon.ico in /public (served at /favicon.ico), add link tags in nuxt.config.ts app.head if needed, deploy, and verify with the Favicon Checker — use the Favicon Generator to create the icon files first.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Favicon Generator के साथ अपना फ़ेविकॉन पैक बनाएं - 512×512 स्रोत से favicon.ico, favicon.svg और apple-touch-icon.png निर्यात करें। उन्हें अपने Nuxt प्रोजेक्ट के /public फ़ोल्डर में छोड़ें।
Nuxt 3 बिना किसी अतिरिक्त कॉन्फ़िगरेशन के डोमेन रूट पर /public में सब कुछ परोसता है। ब्राउज़र डिफ़ॉल्ट रूप से /favicon.ico का अनुरोध करते हैं, इसलिए फ़ाइल को वहां रखने से सबसे आम मामला कवर हो जाता है।
प्रत्येक आइकन वैरिएंट पर स्पष्ट नियंत्रण के लिए, app.head.link के अंतर्गत nuxt.config.ts में लिंक टैग जोड़ें - या app.vue में useHead({ लिंक: [...] }) पर कॉल करें। दोनों दृष्टिकोण प्रत्येक पृष्ठ के <head> में टैग इंजेक्ट करते हैं।
परिनियोजन के बाद, अपने उत्पादन URL को एक निजी विंडो में खोलें और /favicon.ico की पुष्टि करने के लिए Favicon Checker चलाएँ और आपके <link rel="icon"> पथ 200 लौटाएँ। कैश्ड डेव आइकन एक सामान्य कारण है जिसके कारण परिनियोजन के बाद Nuxt फ़ेविकॉन प्रदर्शित नहीं होता है।
यदि टैब आइकन काम करता है लेकिन Google Search अभी भी एक खाली फ़ेविकॉन दिखाता है, तो सत्यापित करें कि आपका लाइव होमपेज कम से कम 48×48 के वर्गाकार आइकन को लिंक करता है। क्रॉल और आकार नियमों के लिए हमारी Google फ़ेविकॉन आवश्यकता मार्गदर्शिका देखें।
Nuxt बहु-आकार .ico फ़ाइलें स्वतः उत्पन्न नहीं करता है - आपको उन्हें प्रदान करना होगा। PWA इंस्टाल प्रॉम्प्ट और हाई-डीपीआई टैब के लिए app.head में लिंक किए गए PNG फ़ॉलबैक का उपयोग करें।
यह कैसे काम करता है
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
/public में जोड़ें
favicon.ico (और वैकल्पिक favicon.svg, apple-touch-icon.png) को अपने Nuxt /public फ़ोल्डर में कॉपी करें।
- 3
कॉन्फ़िगर करें और सत्यापित करें
यदि आवश्यक हो तो nuxt.config.ts में app.head.link प्रविष्टियाँ जोड़ें, तैनात करें, फिर अपने लाइव URL पर Favicon Checker चलाएँ।
अभी आज़माएं
Generate a Nuxt-ready favicon
फ़ेविकॉन जनरेटरसामान्य प्रश्न
मैं Nuxt 3 में फ़ेविकॉन कैसे जोड़ूँ?+
favicon.ico को /public में रखें, फिर वैकल्पिक रूप से nuxt.config.ts में app.head.link के अंतर्गत या useHead() के माध्यम से app.vue में <link rel="icon"> टैग जोड़ें।
Nuxt प्रोजेक्ट में फ़ेविकॉन कहाँ जाता है?+
/public निर्देशिका. वहां फ़ाइलें आपके डोमेन रूट से दी जाती हैं - /public/favicon.ico /favicon.ico पर उपलब्ध है।
मेरा Nuxt फ़ेविकॉन क्यों नहीं दिख रहा है?+
सामान्य कारण: फ़ाइल /public में नहीं, app.head में गलत पथ, देव से ब्राउज़र कैश, या तैनात URL के बजाय लोकलहोस्ट की जाँच करना। गुप्त विंडो में परीक्षण करें.
क्या मुझे फ़ेविकॉन के लिए nuxt.config.ts या useHead() का उपयोग करना चाहिए?+
या तो काम करता है. nuxt.config.ts स्थिर साइट-व्यापी आइकन के लिए सर्वोत्तम है; useHead() में app.vue यदि आइकन रनटाइम स्थिति या प्रति-रूट तर्क पर निर्भर करते हैं।
क्या मैं Nuxt में SVG फ़ेविकॉन का उपयोग कर सकता हूँ?+
हां - favicon.svg को /public में रखें और app.head.link में { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' } जोड़ें।