Webflow के लिए फ़ेविकॉन

Webflow का फ़ेविकॉन अपलोड प्रोजेक्ट सेटिंग्स पैनल का हिस्सा है, जो डिज़ाइनर कैनवास से अलग है। Webflow डैशबोर्ड में प्रोजेक्ट नाम पर क्लिक करें, फिर प्रोजेक्ट सेटिंग्स > सामान्य पर जाएँ। फ़ेविकॉन और ऐप आइकन अनुभाग तक नीचे स्क्रॉल करें, अपलोड क्षेत्र पर क्लिक करें और अपनी छवि फ़ाइल चुनें। Webflow PNG, ICO और GIF प्रारूप स्वीकार करता है।

32×32 पिक्सेल PNG, Webflow के फ़ेविकॉन अपलोडर के लिए न्यूनतम आवश्यक आकार है, लेकिन 512×512 से शुरू करने पर बहुत तेज़ परिणाम मिलता है। Webflow टैब डिस्प्ले और किसी भी सीडीएन-जनरेटेड वेरिएंट के लिए आपकी छवि को डाउनसैंपल करता है। हमेशा अपने पास सबसे बड़ा स्वच्छ स्रोत प्रदान करें - जनरेटर किसी भी लोगो से 512×512 PNG बनाना आसान बनाता है।

Webflow स्वचालित रूप से जेनरेट किए गए यूआरएल (आमतौर पर अपलोड-ssl.webflow.com/... प्रारूप में) के साथ अपने स्वयं के सीडीएन पर फ़ेविकॉन को होस्ट करता है। आपको मैन्युअल रूप से सीडीएन पथ प्रदान करने की आवश्यकता नहीं है। अपलोड करने के बाद सेव पर क्लिक करें और फिर अपना प्रोजेक्ट प्रकाशित करें। फ़ेविकॉन को प्रकाशित करने पर इंजेक्ट किया जाता है, न कि केवल सहेजने पर - अप्रकाशित परिवर्तन आपके लाइव डोमेन पर दिखाई नहीं देते हैं।

पारदर्शी पृष्ठभूमि Webflow फ़ेविकॉन अपलोड के साथ सही ढंग से काम करती है। CDN PNG अल्फा चैनलों को संरक्षित करता है, इसलिए एक पारदर्शी-पृष्ठभूमि आइकन डार्क-मोड ब्राउज़र थीम के विरुद्ध स्पष्ट रूप से प्रस्तुत होता है। यदि आपके लोगो की पृष्ठभूमि ठोस सफेद या रंगीन है, तो यह ब्राउज़र टैब में एक वर्गाकार बॉक्स के रूप में दिखाई देगा। अपलोड करने से पहले बिना पृष्ठभूमि भरण के अपना लोगो निर्यात करें।

Webflow का अंतर्निर्मित फ़ेविकॉन अपलोडर SVG फ़ाइलों का समर्थन नहीं करता है। यदि आप किसी भी पैमाने पर क्रिस्प रेंडरिंग और डार्क-मोड समर्थन के लिए वेक्टर SVG फ़ेविकॉन चाहते हैं, तो इसे कस्टम कोड इंजेक्शन के माध्यम से जोड़ें। प्रोजेक्ट सेटिंग्स > कस्टम कोड > हेड कोड पर जाएं और जोड़ें: `<link rel='icon' type='image/svg+xml' href='https://yourdomain.com/favicon.svg'>`. SVG फ़ाइल को अपने सर्वर या CDN सेवा पर होस्ट करें।

iOS होम-स्क्रीन इंस्टॉल के लिए apple-touch-icon जोड़ने के लिए Webflow में कस्टम कोड की भी आवश्यकता होती है, क्योंकि अंतर्निहित अपलोडर केवल मानक फ़ेविकॉन को संभालता है। अपने 180×180 apple-touch-icon.png को फ़ाइल होस्ट पर अपलोड करें (या यदि आपकी योजना इसका समर्थन करती है तो Webflow एसेट), फिर प्रोजेक्ट सेटिंग्स > कस्टम कोड > हेड कोड फ़ील्ड में `<link rel='apple-touch-icon' size='180x180' href='URL_TO_YOUR_FILE'>` इंजेक्ट करें।

Webflow का PWA आइकन समर्थन Next.js जैसे फ्रेमवर्क की तुलना में सीमित है। Webflow में कोई मूल वेब मेनिफेस्ट जेनरेटर नहीं है। पूर्ण PWA इंस्टॉल समर्थन के लिए, मैन्युअल रूप से एक site.webmanifest JSON फ़ाइल बनाएं, इसे बाहरी रूप से होस्ट करें, और कस्टम कोड के माध्यम से मेनिफेस्ट लिंक टैग इंजेक्ट करें। मेनिफेस्ट आइकन सरणी में 192×192 और 512×512 PNG प्रविष्टियाँ शामिल करें।

यदि आप किसी क्लाइंट के लिए Webflow साइट बना रहे हैं, तो फ़ेविकॉन अक्सर प्रोजेक्ट में देर से सेट किया जाता है और फिर भूल जाता है। एक उपयोगी वर्कफ़्लो प्रोजेक्ट की शुरुआत में प्लेसहोल्डर फ़ेविकॉन सेट करना और हैंडऑफ़ से पहले इसे बदलना है। Webflow फ़ेविकॉन इतिहास का संस्करण नहीं देता है - एक बार जब आप एक नया फ़ेविकॉन सहेजते हैं, तो पुराना फ़ेविकॉन प्रोजेक्ट सेटिंग्स से चला जाता है, हालांकि यह कुछ समय के लिए अपने सीडीएन यूआरएल के माध्यम से पहुंच योग्य रह सकता है।

मल्टी-डोमेन Webflow साइटें - जहां एक ही प्रोजेक्ट कई कस्टम डोमेन पर प्रकाशित होता है - एक एकल प्रोजेक्ट सेटिंग्स फ़ेविकॉन साझा करें। मूल Webflow में कोई प्रति-डोमेन फ़ेविकॉन ओवरराइड नहीं है। सभी प्रकाशित डोमेन पर एक ही आइकन दिखाई देता है. यदि आपको प्रति-डोमेन आइकन की आवश्यकता है, तो आइकन लिंक टैग को सशर्त रूप से ओवरराइड करने के लिए कस्टम कोड इंजेक्शन का उपयोग करें (इसके लिए Webflow सीएमएस या कस्टम तर्क की आवश्यकता है)।

CDN कैशिंग के कारण Webflow में फ़ेविकॉन अपडेट को प्रसारित होने में समय लग सकता है। नया फ़ेविकॉन प्रकाशित करने के बाद, पुराना फ़ेविकॉन 24-48 घंटों तक ब्राउज़र में दिखाई दे सकता है। स्थानीय ब्राउज़र कैश हस्तक्षेप के बिना अद्यतन आइकन देखने के लिए अपनी लाइव साइट को एक निजी/गुप्त विंडो में खोलें। यदि आपका दर्शक CDN-कैश्ड पृष्ठों का उपयोग करता है, तो प्रसार विलंब Webflow की CDN TTL सेटिंग्स पर निर्भर करता है।

Webflow संपादक उपयोगकर्ताओं (डिज़ाइनर पहुंच के बिना सामग्री संपादित करने वाले ग्राहक) के लिए, फ़ेविकॉन को संपादक के माध्यम से नहीं बदला जा सकता है - यह प्रोजेक्ट सेटिंग्स में लॉक है। केवल डिज़ाइनर एक्सेस वाले सहयोगी या खाता स्वामी ही फ़ेविकॉन को अपडेट कर सकते हैं। इसे ग्राहकों को स्पष्ट रूप से बताएं ताकि वे जान सकें कि भविष्य में फ़ेविकॉन अपडेट के लिए कहां अनुरोध करना है।

अपना Webflow फ़ेविकॉन प्रकाशित करने के बाद, अपने उत्पादन डोमेन पर इसके समाधान की पुष्टि करने के लिए favicon tester का उपयोग करें। अपेक्षित आकार के साथ परिणाम की तुलना करें: टैब के लिए 32×32, यदि आपने apple-touch-icon जोड़ा है तो iOS के लिए 180×180। यह समझने के लिए best favicon size मार्गदर्शिका की भी समीक्षा करें कि कौन से आकार आपकी साइट के आइकन पूर्णता स्कोर में सुधार करते हैं।