अपनी Framer वेबसाइट में Favicon कैसे जोड़ें

Framer में favicon जोड़ने के लिए: Site Settings (⌘ + ,) खोलें, "Site Images" → "Favicon" तक स्क्रॉल करें, 64x64 PNG फ़ाइल अपलोड करें, फिर अपनी साइट पब्लिश करें। बस इतना ही।

अब आइए विस्तार से जानते हैं और किसी भी समस्या का समाधान करते हैं।

Framer के लिए Favicon स्पेसिफिकेशन

Framer को विशिष्ट favicon स्पेसिफिकेशन की आवश्यकता होती है:

• आकार: 64 x 64 पिक्सेल
• फॉर्मेट: PNG (अनुशंसित)
• बैकग्राउंड: ट्रांसपेरेंट

स्टेप 1: Site Settings खोलें

सेटिंग्स तक पहुँचने के दो तरीके:

• कीबोर्ड: ⌘ + , (Mac) या Ctrl + , (Windows) दबाएं
• मेनू: Framer आइकन → Site Settings → Open Settings पर क्लिक करें

स्टेप 2: Favicon सेक्शन खोजें

• "Site Images" तक नीचे स्क्रॉल करें
• "Favicon" अपलोड एरिया ढूंढें

स्टेप 3: अपना Favicon अपलोड करें

Framer दो अपलोड स्लॉट प्रदान करता है:

• Light Theme Favicon: लाइट मोड browser में दिखाई देता है
• Dark Theme Favicon: डार्क मोड browser में दिखाई देता है

अगर आपके पास केवल एक वर्शन है तो दोनों स्लॉट में एक ही इमेज अपलोड करें।

स्टेप 4: अपनी साइट पब्लिश करें

• Publish बटन पर क्लिक करें
• Favicon केवल लाइव साइट पर दिखाई देता है, प्रीव्यू में नहीं

लाइट और डार्क मोड सपोर्ट

दो वर्शन क्यों बनाएं?

• डार्क लोगो डार्क browser टैब पर गायब हो जाते हैं
• लाइट लोगो लाइट browser टैब पर गायब हो जाते हैं
• अलग-अलग वर्शन सभी मोड में दृश्यता सुनिश्चित करते हैं

वर्शन कैसे बनाएं

1. अपने सामान्य favicon से शुरू करें
2. वैकल्पिक वर्शन के लिए रंग इनवर्ट करें
3. समान आकार और डिज़ाइन रखें
4. दोनों के लिए ट्रांसपेरेंट बैकग्राउंड का उपयोग करें

Apple Touch Icon सेटअप

सितंबर 2024 से, Framer Apple touch icon को सपोर्ट करता है:

• स्थान: वही Site Images सेक्शन
• आकार: 180 x 180 पिक्सेल
• उद्देश्य: iOS डिवाइस पर होम स्क्रीन आइकन

समस्या निवारण: Favicon दिखाई नहीं दे रहा

बुनियादी बातें जांचें

• क्या आपने साइट पब्लिश की?
• हार्ड रिफ्रेश: Cmd+Shift+R या Ctrl+Shift+R
• इनकॉग्निटो विंडो में आज़माएं

अपलोड लोकेशन सत्यापित करें

• Site Settings में होना चाहिए, पेज सेटिंग्स में नहीं
• फ़ाइल वैध PNG फॉर्मेट में होनी चाहिए

समस्या निवारण: Google पुराना Favicon दिखा रहा है

Google favicon धीरे-धीरे अपडेट करता है (दिनों से हफ्तों तक)।

अपडेट तेज़ करने के स्टेप्स

1. सुनिश्चित करें कि favicon आपकी साइट पर लाइव है
2. Google Search Console खोलें
3. होमपेज पर URL Inspection टूल का उपयोग करें
4. इंडेक्सिंग का अनुरोध करें

समस्या निवारण: Safari की समस्याएं

Safari favicon को बहुत ज़्यादा cache करता है।

समाधान के स्टेप्स

1. Safari cache पूरी तरह से साफ़ करें
2. Favicon cache डिलीट करें: ~/Library/Safari/Favicon Cache/
3. Safari बंद करके फिर से खोलें

समस्या निवारण: Framer लोगो अभी भी दिखाई दे रहा है

सामान्य कारण:

• Favicon अपलोड के बाद साइट पब्लिश नहीं की गई
• Browser cache की समस्या
• लाइव साइट के बजाय प्रीव्यू देख रहे हैं

समाधान: साइट पब्लिश करें और browser cache साफ़ करें।

सर्वोत्तम प्रक्रियाएं

• फ़ाइलों का बैकअप रखें: मूल favicon फ़ाइलें सेव करके रखें
• हर जगह टेस्ट करें: Mac, Windows, iOS, Android पर जांचें
• चेकर का उपयोग करें: Favicon.im आपके सेटअप को वेलिडेट करता है
• रंगों का रिकॉर्ड रखें: ब्रांड कंसिस्टेंसी के लिए सटीक hex कोड ट्रैक करें

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

Framer में favicon कैसे जोड़ें?

⌘ + , से Site Settings खोलें, "Site Images" तक स्क्रॉल करें, "Favicon" पर क्लिक करें, 64x64 PNG फ़ाइल अपलोड करें, फिर अपनी साइट पब्लिश करें।

Framer favicon का आकार क्या होना चाहिए?

Framer 64 x 64 पिक्सेल PNG फॉर्मेट में ट्रांसपेरेंट बैकग्राउंड के साथ अनुशंसा करता है।

मेरा Framer favicon क्यों नहीं दिख रहा?

सबसे आम कारण: साइट पब्लिश नहीं की गई, browser cache, या गलत अपलोड लोकेशन। अपनी साइट पब्लिश करें, पेज को हार्ड रिफ्रेश करें, या इनकॉग्निटो विंडो में आज़माएं।

Google को favicon अपडेट करने में कितना समय लगता है?

Google favicon धीरे-धीरे अपडेट करता है—आमतौर पर दिनों से हफ्तों तक। प्रक्रिया तेज़ करने के लिए Google Search Console के ज़रिए री-इंडेक्सिंग का अनुरोध करें।

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

हाँ। सितंबर 2024 से, Framer आपको Site Images सेटिंग्स में लाइट और डार्क थीम के लिए अलग-अलग favicon अपलोड करने की अनुमति देता है।

संदर्भ

1. How to set up a favicon in Framer - Framer आधिकारिक सहायता
2. September 2024 Update: Apple Touch Icon and Favicons - Framer अपडेट्स
3. Why isn't Safari displaying the favicon? - Framer समस्या निवारण
4. Favicon.im - Favicon टेस्टिंग और वेलिडेशन टूल