Webflow में Favicon और Webclip कैसे जोड़ें

Webflow में favicon और webclip जोड़ें: Icons सेटिंग कहाँ है, Webflow कौन-से साइज़ बनाता है, इसे पब्लिश कैसे करें और अपडेट न होने पर क्या करें।

अक्सर पूछे जाने वाले सवाल

Webflow favicon का साइज़ कितना होना चाहिए?

Webflow के हेल्प सेंटर में 32x32 का favicon और 256x256 का webclip बताया गया है। मौजूदा तरीके में आप एक ही स्क्वायर इमेज अपलोड करते हैं और बाकी साइज़ Webflow खुद बना देता है। इसलिए कम से कम 256x256 पिक्सल की स्क्वायर फ़ाइल से शुरू करें, जो छोटी करने पर भी साफ़ दिखे।

Webflow में favicon कहाँ अपलोड करें?

Site settings खोलें, General में जाएँ और Icons सेक्शन ढूँढें। अपनी स्क्वायर इमेज अपलोड करें, चुनें कि कौन-से आइकन अपडेट करने हैं, बदलाव लागू करें और फिर साइट पब्लिश करें। पुरानी गाइड्स में इसे Project settings कहा गया है, लेकिन जगह वही है।

Webflow में webclip क्या होता है?

Webclip वह बड़ा आइकन है जो तब दिखता है जब कोई आपकी साइट को फ़ोन की होम स्क्रीन या ऐसे ही किसी शॉर्टकट पर सेव करता है। Webflow में इसका साइज़ 256x256 पिक्सल बताया गया है। यह ब्राउज़र टैब में दिखने वाले छोटे आइकन से अलग है।

अपलोड करने के बाद भी मेरा Webflow favicon क्यों नहीं दिख रहा?

सबसे आम कारण यह है कि अपलोड के बाद साइट पब्लिश नहीं की गई, क्योंकि आइकन सिर्फ़ पब्लिश की गई साइट पर बदलते हैं। दूसरा कारण ब्राउज़र कैशिंग है। अपलोड फ़ेल मानने से पहले पब्लिश करें, फिर प्राइवेट विंडो या किसी दूसरे ब्राउज़र में जाँचें।

क्या Webflow SVG या डार्क मोड favicon सपोर्ट करता है?

Webflow के अपडेट नोट्स के अनुसार आप PNG, JPG, GIF, ICO या SVG अपलोड कर सकते हैं, और हेल्प आर्टिकल में डार्क मोड के लिए एक वैकल्पिक ब्राउज़र टैब आइकन भी बताया गया है। Webflow क्रॉस-ब्राउज़र कम्पैटिबिलिटी के लिए SVG अपलोड को PNG में बदल देता है, इसलिए जिन ब्राउज़रों में आपके यूज़र हैं, उनमें नतीजा ज़रूर जाँचें।

Google मेरा नया Webflow favicon कितनी देर में दिखाएगा?

इसकी कोई तय समय-सीमा नहीं है। सर्च रिज़ल्ट में आइकन दोबारा क्रॉल करके कब रिफ़्रेश करना है, यह Google तय करता है, और कम्युनिटी रिपोर्ट्स के अनुसार इसमें कुछ दिन से लेकर हफ़्ते या उससे ज़्यादा लग सकते हैं। आपके हाथ में बस इतना है कि आइकन आपकी पब्लिश की गई साइट पर लाइव हो।

संक्षेप में: Webflow में Site settings > General > Icons खोलें, एक स्क्वायर इमेज अपलोड करें, चुनें कि कौन-से आइकन अपडेट करने हैं (लाइट favicon, वैकल्पिक डार्क-मोड favicon, webclip), बदलाव लागू करें और साइट पब्लिश करें। Webflow में 32x32 का favicon और 256x256 का webclip बताया गया है, और बाकी साइज़ वह आपके अपलोड से खुद बना लेता है। पब्लिश किए बिना लाइव साइट पर कुछ नहीं बदलता। (नवंबर 2026 में Webflow के हेल्प सेंटर और अपडेट नोट्स से जाँचा गया।)

Webflow क्या माँगता है

पुराने ट्यूटोरियल में दो अलग अपलोड फ़ील्ड बताए जाते हैं: एक 32x32 favicon के लिए और एक 256x256 webclip के लिए। Webflow का मौजूदा हेल्प आर्टिकल इससे सरल तरीका बताता है: एक स्क्वायर इमेज अपलोड करें और साइज़िंग Webflow संभाल लेता है। हर आइकन किस काम का है, यह नीचे देखें।

आइकन	Webflow में बताया गया साइज़	कहाँ दिखता है
Favicon (लाइट)	32x32	ब्राउज़र टैब और बुकमार्क
Favicon (डार्क मोड, वैकल्पिक)	32x32	ब्राउज़र के डार्क मोड में टैब पर
Webclip	256x256	होम स्क्रीन शॉर्टकट और ऐसे ही सेव किए गए लिंक
अपने-आप बनने वाले अतिरिक्त आइकन	48x48 favicon, 180x180 और 192x192 टच आइकन	आपके अपलोड से Webflow बनाता है

Webflow के अपडेट नोट्स के अनुसार सपोर्टेड अपलोड फ़ॉर्मेट: PNG, JPG, GIF, ICO और SVG। क्रॉस-ब्राउज़र कम्पैटिबिलिटी के लिए SVG अपलोड को PNG में बदला जाता है।

अलग-अलग प्लेटफ़ॉर्म पर साइज़ की ज़्यादा जानकारी के लिए हमारी favicon साइज़ गाइड देखें।

पहले अपनी इमेज तैयार करें

टैब में favicon करीब 16 से 32 पिक्सल चौड़ा दिखता है, इसलिए सेटिंग से ज़्यादा स्रोत इमेज मायने रखती है।

स्क्वायर से शुरू करें। स्क्वायर कैनवस एक्सपोर्ट करें, 256x256 या उससे बड़ा, ताकि webclip को ज़बरदस्ती बड़ा न करना पड़े।
सरल रखें। पूरे wordmark की जगह लोगोमार्क या एक अक्षर इस्तेमाल करें। टैब के साइज़ पर बारीक डिटेल धुंधली हो जाती है।
बैकग्राउंड का ध्यान रखें। ट्रांसपेरेंट PNG लाइट टैब पर अच्छा दिखता है, पर डार्क टैब पर गायब हो सकता है। अगर आप डार्क-मोड favicon लगा रहे हैं, तो हल्के रंग के मार्क वाला वर्शन बनाएँ।
सादा फ़ाइल नाम रखें। अपलोड की गई एसेट का नाम आपके पब्लिश किए HTML में दिख सकता है, इसलिए "final_v3_REAL.png" जैसे नाम से बचें।

Webflow में favicon और webclip कैसे जोड़ें

Webflow Designer या डैशबोर्ड में अपना प्रोजेक्ट खोलें और Site settings में जाएँ।
General टैब चुनें और Icons तक स्क्रॉल करें।
Upload icon पर क्लिक करें और अपनी स्क्वायर इमेज चुनें।
चुनें कि इमेज किन आइकन को अपडेट करे: favicon, वैकल्पिक डार्क-मोड favicon और webclip।
अगर डार्क मोड के लिए अलग आइकन चाहिए, तो उसे डार्क-मोड स्लॉट में जोड़ें। यह वैकल्पिक है।
Apply पर क्लिक करें। Webflow के अपडेट के साथ UI के शब्द थोड़े बदल सकते हैं, इसलिए जो लेबल आपको दिखें, उन्हीं से मिलान करें।
साइट को अपने डोमेन पर पब्लिश करें। सिर्फ़ सेव करने से आइकन लाइव साइट पर नहीं पहुँचते।
लाइव साइट को प्राइवेट विंडो में खोलें और टैब जाँचें।

कॉपी करने लायक चेकलिस्ट

`` [ ] Square source image, 256x256 or larger [ ] Mark is simple enough to read at tab size [ ] Tested on a light and a dark browser theme [ ] Uploaded under Site settings > General > Icons [ ] Applied the change [ ] Published to the live domain (not just the webflow.io staging domain) [ ] Checked in a private window [ ] Hard refreshed or cleared cache if the old icon persists ``

समस्या सुलझाएँ

Favicon में अब भी पुराना आइकन या Webflow का लोगो दिख रहा है

इन्हें क्रम से आज़माएँ:

दोबारा पब्लिश करें। आइकन सिर्फ़ पब्लिश के साथ लाइव होते हैं। अगर आप कई डोमेन पर पब्लिश करते हैं, तो सभी को चुनें।
प्राइवेट विंडो में टेस्ट करें। ब्राउज़र favicon को बहुत आक्रामक तरीके से कैश करते हैं, और सामान्य टैब में पुराना आइकन लंबे समय तक दिख सकता है।
पेज को हार्ड रिफ़्रेश करें, या ब्राउज़र बंद करके दोबारा खोलें।
फ़ाइल सीधे खोलें। जाँचें कि पेज सोर्स में दिया आइकन URL अपने अलग टैब में लोड होता है।

अपलोड रिजेक्ट हो रहा है या इमेज बिगड़ी दिख रही है

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

Google सर्च रिज़ल्ट में गलत आइकन दिख रहा है

सर्च रिज़ल्ट का आइकन Google तय करता है, Webflow नहीं। कम्युनिटी थ्रेड्स के अनुसार अपडेट में दिन, हफ़्ते या उससे ज़्यादा लग सकते हैं। पक्का करें कि आइकन आपकी लाइव साइट पर लोड हो रहा है, फिर इंतज़ार करें। एक ही URL पर स्थिर, स्क्वायर आइकन रखना मदद करता है।

टैब में आइकन धुंधला दिख रहा है

आमतौर पर इसका मतलब है कि स्रोत इमेज में बहुत ज़्यादा डिटेल थी या शुरुआत से ही कम रिज़ॉल्यूशन की थी। बड़े साइज़ पर एक सरल मार्क दोबारा बनाएँ और फिर से अपलोड करें।

कौन-सा फ़ॉर्मेट अपलोड करें?

फ़ॉर्मेट	किसके लिए अच्छा	ध्यान रखें
PNG	ज़्यादातर साइटों के लिए; भरोसेमंद और ट्रांसपेरेंसी सपोर्ट करता है	webclip के लिए पर्याप्त रिज़ॉल्यूशन चाहिए
SVG	साफ़ स्रोत आर्टवर्क	Webflow इसे PNG में बदल देता है, इसलिए नतीजे का प्रीव्यू देखें
ICO	पुराने वर्कफ़्लो	जब Webflow खुद साइज़ बनाता है तो अक्सर ज़रूरी नहीं
JPG	शायद ही कभी अच्छा विकल्प	ट्रांसपेरेंसी नहीं होती; पीछे बैकग्राउंड का बॉक्स रह जाता है

अगर आप तय नहीं कर पा रहे, तो 256x256 या उससे बड़ा स्क्वायर PNG सबसे सुरक्षित विकल्प है।

लॉन्च की तैयारी में इसकी जगह

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

अगर आप तैयार लेआउट से शुरू करना चाहते हैं, तो We.Inc के फ़्री प्लान में आप तैयार टेम्पलेट से तीन साइटें तक पब्लिश कर सकते हैं; प्रॉम्प्ट से साइट का ड्राफ़्ट बनाने वाला AI बिल्डर Starter प्लान से शुरू होता है, जिसकी कीमत $20 प्रति माह है। आप यहाँ साइन अप करें।

फ़्री में शुरू करें · क्रेडिट कार्ड की ज़रूरत नहीं

Umair Ali Sadaqat

We.Inc के संस्थापक

उमैर We.Inc के संस्थापक हैं। वे AI से वेबसाइट बनाने, एजेंसियों और वेब स्टूडियो चलाने के व्यवसाय के बारे में लिखते हैं।

कुछ शानदार बनाने के लिए तैयार हैं?

उन 15,000+ बिज़नेस से जुड़ें जो एक ही प्लेटफ़ॉर्म से लॉन्च करने, बढ़ने और ऑटोमेट करने के लिए We.Inc इस्तेमाल करते हैं।

फ़्री में शुरू करें

क्रेडिट कार्ड की ज़रूरत नहीं · सेल्स टीम से बात करें