WordPress में फ़ेविकॉन कैसे जोड़ें
WordPress इसे Site Icon कहता है और एक अपलोड से हर आकार उत्पन्न कर सकता है। इस वॉकथ्रू में Customizer, थीम ओवरराइड्स, मल्टीसाइट एज केस, उदाहरण, एफएक्यू और कैश समस्याएं शामिल हैं जो लॉन्च के बाद आइकन को अटका हुआ दिखाती हैं।
WordPress कैसे favicon को संभालता है
WordPress 4.3 के बाद से, कोर एक Site Icon सुविधा भेजता है जो आपके लिए सही <लिंक> टैग को क्रॉप, आकार और इंजेक्ट करता है। मानक साइटों के लिए किसी प्लगइन की आवश्यकता नहीं है।
अपलोड किए गए आइकन मीडिया लाइब्रेरी में संग्रहीत किए जाते हैं और फ्रंट एंड पर wp_site_icon() के माध्यम से संदर्भित किए जाते हैं। जब आप प्रकाशित करते हैं तो WordPress सर्वर-साइड पर कई आकार उत्पन्न करता है।
यह सुविधा अधिकांश ब्लॉगर्स, एजेंसियों और WooCommerce स्टोर्स के लिए मैन्युअल favicon.ico अपलोड की जगह लेती है।
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
Customizer के माध्यम से (अनुशंसित)
WP-एडमिन में Appearance → Customize → Site Identity → Site Icon पर जाएं।
Site Icon चुनें पर क्लिक करें और कम से कम 512×512 पिक्सेल का एक वर्ग PNG अपलोड करें। WordPress एक लाइव क्रॉपर दिखाता है - अपने लोगोमार्क को वर्गाकार सुरक्षित क्षेत्र के अंदर केन्द्रित करें।
प्रकाशित करें पर क्लिक करें. कोर अगले फ्रंट-एंड पेज लोड पर ऐप्पल-टच-आइकन, विभिन्न PNG आकार और मेटा टैग आउटपुट करता है।
अपनी थीम या कोड के माध्यम से
प्रति-सेक्शन आइकन या उपनिर्देशिका ब्रांड के लिए, अपने चाइल्ड थीम functions.php में get_site_icon_url() फ़िल्टर करें।
उदाहरण उपयोग मामला: एक मल्टीसाइट नेटवर्क जहां प्रत्येक सबसाइट को एक अलग चिह्न की आवश्यकता होती है लेकिन एक थीम साझा करती है। blog_id के आधार पर अलग-अलग URL लौटाएँ।
उन्नत टीमें डिफ़ॉल्ट साइट-आइकन मेटा को हटा सकती हैं और हेडर.php में कस्टम <लिंक> टैग प्रिंट कर सकती हैं, लेकिन डुप्लिकेट कोर पहले से ही अच्छा काम करता है।
उदाहरण
एकल ब्लॉग: Customizer के माध्यम से 512×512 PNG अपलोड करें। हो गया - कोई एफ़टीपी नहीं, कोई .ico संपादन नहीं।
WooCommerce स्टोर: समान प्रवाह; केवल मुखपृष्ठ ही नहीं, बल्कि चेकआउट और खाता पृष्ठों पर भी आइकन सत्यापित करें। कैशिंग प्लगइन्स कभी-कभी CSS में देरी करते हैं लेकिन शायद ही कभी आइकन टैग को ब्लॉक करते हैं।
हेडलेस WordPress: Site Icon टैग केवल PHP-रेंडर पृष्ठों पर दिखाई देते हैं। आपके Next.js फ्रंट एंड को उस आर्किटेक्चर में अपने स्वयं के <लिंक> टैग घोषित करने होंगे।
स्टेजिंग → उत्पादन: मीडिया आईडी को पुनः अपलोड या माइग्रेट करें। हार्डकोड एब्सोल्यूट आइकन यूआरएल केवल तभी जब आप सीडीएन कैश अमान्यकरण को समझते हैं।
प्लगइन्स और उन्हें कब छोड़ना है
लोकप्रिय SEO प्लगइन्स favicon सेटिंग को भी उजागर कर सकते हैं। SEO प्लगइन और Site Icon दोनों को अलग-अलग कॉन्फ़िगर करने से बचें - सत्य का एक स्रोत चुनें।
कैशिंग प्लगइन्स (WP रॉकेट, W3 टोटल कैश) को आइकन फ़ाइलों को ब्लॉक नहीं करना चाहिए, लेकिन वे शुद्ध होने तक नए टैग के बिना HTML को कैश कर सकते हैं।
फ़ेविकॉन प्लगइन्स WordPress 4.3 से पहले समझ में आते थे। 2026 में वे निरर्थक हैं जब तक कि आपको एनिमेटेड या शेड्यूल किए गए आइकन स्वैप की आवश्यकता न हो।
अक्सर पूछे जाने वाले प्रश्नों
मुझे किस प्रकार की फ़ाइल अपलोड करनी चाहिए? PNG सबसे सुरक्षित है. WordPress JPG को स्वीकार करता है, लेकिन आप पारदर्शिता खो देते हैं।
न्यूनतम आकार? 512×512 आधिकारिक तौर पर; बड़े स्रोत डाउनस्केल ठीक है।
क्या WordPress favicon.ico बनाता है? यह PNG आकार और मेटा टैग उत्सर्जित करता है। होस्टिंग या चाइल्ड थीम के माध्यम से वेब रूट पर वास्तविक .ico रखने से ब्राउज़र को अभी भी लाभ होता है।
मल्टीसाइट: प्रत्येक साइट का अपना Customizer में अपना स्वयं का Site Icon होता है। जब तक कोई थीम विश्व स्तर पर यूआरएल को फ़िल्टर नहीं करती तब तक नेटवर्क व्यवस्थापक प्रति साइट सेट करते हैं।
मेरा favicon अपडेट क्यों नहीं हो रहा है?
ब्राउज़र favicon को HTML से अलग कैश करते हैं। WordPress में प्रकाशित करने के बाद, हार्ड-रीफ्रेश करें या एक निजी विंडो में परीक्षण करें।
यदि आप टैग को हाथ से रोल करते हैं तो केवल आइकन यूआरएल में ?ver=2 जोड़ें। Site Icon यूआरएल में क्वेरी तर्क शामिल होते हैं जो आपके दोबारा अपलोड करने पर बदल जाते हैं।
यदि HTML अभी भी पुराने अनुलग्नक URL को संदर्भित करता है, तो WordPress ऑब्जेक्ट कैश और किसी भी CDN (क्लाउडफ्लेयर, जेटपैक बूस्ट) को साफ़ करें।
यदि आपने डोमेन माइग्रेट किया है, तो क्रमबद्ध विकल्पों में पुराने आइकन यूआरएल के लिए डेटाबेस खोजें - कुछ आयातक साइटआईकॉन_आईडी को याद करते हैं।
समस्या निवारण
अपलोड के बाद धुंधला आइकन: स्रोत छवि 512×512 से छोटी थी या वर्गाकार नहीं थी। एक बड़े गुरु से पुन: उत्पन्न करें।
Google परिणामों में कोई आइकन नहीं: Google अपने स्वयं के कैश का उपयोग करता है; Site Icon को अपडेट करने के बाद सर्च कंसोल में रीइंडेक्सिंग का अनुरोध करें।
डेस्कटॉप पर आइकन लेकिन iPhone पर नहीं: iOS को ऐप्पल-टच-आइकन की आवश्यकता है; पुष्टि करें कि Site Icon प्रकाशित हो गया है, न कि केवल Customizer में ड्राफ्ट के रूप में सहेजा गया है।
लोगो के चारों ओर सफेद बॉक्स: पारदर्शी PNG के बजाय सफेद पृष्ठभूमि के साथ JPG अपलोड किया गया।
होस्टिंग और सीडीएन विचार
किनारे पर प्रबंधित WordPress होस्ट (WP इंजन, Kinsta, SiteGround) कैश HTML। Site Icon बदलने के बाद, होस्ट डैशबोर्ड से सभी कैश को मिटा दें।
क्लाउडफ्लेयर ऑरेंज-क्लाउड प्रॉक्सी /wp-content/uploads/ आइकन को कैश किए बिना HTML को कैश कर सकता है - आमतौर पर ठीक है, लेकिन आइकन अटैचमेंट यूआरएल बदलने पर पर्ज हो जाता है।
बहुभाषी प्लगइन्स (WPML, Polylang) डिफ़ॉल्ट रूप से प्रति भाषा Site Icon की नकल नहीं करते हैं। जब तक आप यूआरएल फ़िल्टर नहीं करते, एक आइकन सभी स्थानों पर काम करता है।
बेडरॉक या हेडलेस सेटअप अपलोड को स्थानांतरित कर सकते हैं। फ्रंट-एंड HTML बिंदु पर मीडिया यूआरएल की पुष्टि करें जहां आपका सीडीएन उनसे अपेक्षा करता है।
यदि आप स्थिर निर्यात (सिंपली स्टेटिक, WP2Static) परोसते हैं, तो आइकन बदलने के बाद निर्यात को पुन: उत्पन्न करें ताकि ऑफ़लाइन HTML नई अनुलग्नक आईडी चुन सके।
अनुमतियाँ और भूमिकाएँ
केवल अनुकूलित क्षमता वाले उपयोगकर्ता (आमतौर पर मानक इंस्टॉल पर प्रशासक और संपादक) Site Icon को बदल सकते हैं। उन्नत अधिकारों के बिना लेखक चिह्न की अदला-बदली नहीं कर सकते।
मल्टीसाइट पर, सुपर एडमिन नेटवर्क-वाइड थीम अपलोड कर सकते हैं लेकिन Site Icon प्रति-साइट रहता है जब तक कि कस्टम कोड एक अटैचमेंट यूआरएल साझा नहीं करता।
तृतीय-पक्ष व्यवस्थापक थीम का ऑडिट करें जो उपस्थिति को छुपाता है → अनुकूलित करें। आपको Customizer को पुनः सक्षम करने या Customizer डीप लिंक ?autofocus[section]=title_tagline का उपयोग करने की आवश्यकता हो सकती है।
किसी क्लाइंट को साइट सौंपते समय, यह दस्तावेज करें कि favicon परिवर्तन केवल मीडिया लाइब्रेरी में नहीं, बल्कि कस्टमाइज़ में रहते हैं - Site Icon निर्दिष्ट किए बिना वहां PNG अपलोड करने से कुछ नहीं होता है।
WooCommerce और सदस्यता साइटें
WooCommerce चेकआउट बाकी स्टोर की तरह ही थीम हेड का उपयोग करता है। Site Icon कार्ट और धन्यवाद पृष्ठों पर स्वचालित रूप से दिखाई देता है।
फ्रंट-एंड टेम्प्लेट को प्रतिस्थापित करने वाले सदस्यता प्लगइन्स को अभी भी wp_head() इसलिए Site Icon मेटा आउटपुट को कॉल करना चाहिए।
व्हाइट-लेबल क्लाइंट पोर्टल कभी-कभी ब्रांडिंग हुक को हटा देते हैं - सत्यापित करें कि यदि क्लाइंट अपना स्वयं का आइकन अपलोड करते हैं तो कस्टमाइज़ क्षमता ग्राहक भूमिकाओं पर अक्षम नहीं होती है।
ईमेल टेम्प्लेट Site Icon का उपयोग नहीं करते हैं. WooCommerce ईमेल लोगो उपस्थिति → कस्टमाइज़ → WooCommerce के अंतर्गत एक अलग सेटिंग है।
मैन्युअल favicon.ico से माइग्रेट किया जा रहा है
यदि आपने पहले FTP-favicon.ico को वेब रूट पर अपलोड किया था, तो Site Icon इसे हटाता नहीं है। ब्राउज़र अप्रत्याशित रूप से एक स्रोत को दूसरे स्रोत से अधिक पसंद कर सकते हैं।
एक दृष्टिकोण चुनें: या तो Site Icon PNG आउटपुट पर भरोसा करें या मैचिंग डिज़ाइन के साथ हाथ से तैयार ICO को रूट पर रखें। QA के बाद डुप्लिकेट हटाएँ.
हेडर.php में हार्डकोडेड लिंक rel=icon वाली क्लासिक थीम कोर Site Icon से लड़ सकती हैं। Site Icon सक्षम करते समय मैन्युअल टैग हटा दें।
माइग्रेशन के बाद, कैश साफ़ करें और निजी ब्राउज़िंग में परीक्षण करें कि कौन सा आइकन जीतता है।
अपनी रनबुक में चुने गए दृष्टिकोण का दस्तावेजीकरण करें ताकि अगला डेवलपर दूसरा परस्पर विरोधी favicon प्लगइन न जोड़े।