फ़ेविकॉन वह छोटी छवि है जो ब्राउज़र टैब और बुकमार्क में किसी वेबसाइट की पहचान करती है। यह नाम "पसंदीदा आइकन" से आया है। यह पाठकों को खुले पन्नों के बीच किसी साइट को खोजने का एक दृश्य तरीका देता है, भले ही कोई टैब अपना शीर्षक दिखाने के लिए बहुत संकीर्ण हो। खोज इंजन किसी परिणाम के बगल में किसी साइट का फ़ेविकॉन भी प्रदर्शित कर सकते हैं। MDN की फ़ेविकॉन परिभाषा इन सामान्य ब्राउज़र उपयोगों का वर्णन करती है।
SearchVector का नारंगी खंडित वृत्त एक उदाहरण है। कवर आरेख एक छवि फ़ाइल, एक पृष्ठ के HTML और ब्राउज़र के बीच संबंध को समझाने के लिए अपनी वास्तविक आइकन संपत्ति का उपयोग करता है। यह एक शिक्षण आरेख है, खोज परिणाम का स्क्रीनशॉट नहीं।
एक को लागू करने के लिए तैयार हैं? HTML सेटअप या लापता-आइकन समस्या निवारण
पर जाएं।फ़ेविकॉन, लोगो और सामाजिक छवि: कौन सा है?
एक लोगो किसी व्यवसाय की व्यापक दृश्य पहचान है। इसमें एक प्रतीक, एक पूरा नाम और एक टैगलाइन शामिल हो सकती है। फ़ेविकॉन उस पहचान का एक छोटा अनुप्रयोग है, आमतौर पर एक सरलीकृत प्रतीक जो छोटे आकार में भी पहचानने योग्य रहता है। संपूर्ण वर्डमार्क को सिकोड़ने से अक्सर उसके अक्षर अलग-अलग नहीं हो पाते।
| एसेट | मुख्य काम |
|---|---|
| फ़ेविकॉन | ब्राउज़र टैब में पेज की पहचान करे�� या बुकमार्क |
| हेडर लोगो | पेज लेआउट के भीतर ब्रांड की पहचान करें |
| सामाजिक पूर्वावलोकन छवि | एक साझा लिंक को बड़ी छवि के साथ चित्रित करें |
| होम-स्क्रीन आइकन | एक सहेजी गई वेबसाइट या स्थापित वेब ऐप का प्रतिनिधित्व करें डिवाइस |
हेडर लोगो बदलने से फ़ेविकॉन अपडेट होना ज़रूरी नहीं है। ये अलग-अलग सेटिंग्स द्वारा नियंत्रित अलग-अलग फ़ाइलें हो सकती हैं। इसी तरह, एक सामाजिक पूर्वावलोकन छवि को बदलने से गायब टैब आइकन की मरम्मत नहीं होती है। उस सतह की पहचान करके शुरुआत करें जो गलत है, फिर वह सेटिंग ढूंढें जो इसकी आपूर्ति करती है।
ऐसा आइकन चुनें जो छोटे आकार में बना रहे
एक चौकोर कैनवास और एक साधारण सिल्हूट से प्रारंभ करें। एक बड़ी स्रोत छवि निर्यात करें, फिर व्यावहारिक डिज़ाइन जांच के रूप में 16×16 और 32×32 पर इसका पूर्वावलोकन करें। वे पूर्वावलोकन सुपाठ्यता का परीक्षण करते हैं; उनका यह दावा नहीं है कि प्रत्येक ���्राउज़र एक निश्चित आकार में आइकन प्रस्तुत करता है। लुप्त हो रहे स्ट्रोक्स, भीड़-भाड़ वाले अक्षरों और पारदर्शी क्षेत्रों को देखें जो टैब पृष्ठभूमि में विलीन हो जाते हैं।
प्रकाश और अंधेरे दोनों पृष्ठभूमियों पर चिह्न की समीक्षा करें। एक पतली गहरी रूपरेखा एक गहरे टैब पर गायब हो सकती है, जबकि एक हल्का प्रतीक एक हल्के टैब पर गायब हो सकता है। जानबूझकर विरोधाभास के साथ एक ठोस आकार को पहचानना अक्सर आसान होता है। केवल रंग पर भरोसा न करें: एक विशिष्ट रूपरेखा तब भी मदद करती है जब आइकन देखने में समान हों।
एक स्रोत फ़ाइल रखें जिसे आपकी टीम संपादित कर सके। धुंधले थंबनेल की बड़ी प्रतिलिपि निर्यात करने से उसका विवरण पुनर्स्थापित नहीं होता है। रीब्रांड के लिए, मुख्य लोगो के साथ छोटे आइकन को मंजूरी दें ताकि वेबसाइट, बुकमार्क और सहेजे गए शॉर्टकट संबंधित महसूस हों।
वास्तविक HTML उदाहरण के साथ एक फ़ेविकॉन जोड़ें
SearchVectorइसके फ़ेविकॉन छवि URL पर एक वास्तविक 512×512 PNG परोसता है। यह न्यूनतम घोषणा SearchVector साइट पर उस मौजूदा संपत्ति की ओर इशारा करती है:
<लिंक rel='आइकन'
href='/favicon.png'
टाइप करें = "छवि/पीएनजी"
आकार = "512x512">घोषणा को दस्तावेज़ के के अंदर रखें। रूट-सापेक्ष पथ वर्तमान होस्टनाम से हल होता है: SearchVector पर यह SearchVector से /favicon.png का अनुरोध करता है; आपके डोमेन पर यह आपके डोमेन से उस फ़ाइल का अनुरोध करता है। अपनी साइट के लिए, अपनी स्वयं की ब्रांड संपत्ति अपलोड करें और उसके वास्तविक पथ का उपयोग करें। छवि अपलोड किए ब��ना टैग की प्रतिलिपि बनाने से एक टूटा हुआ संदर्भ निकल जाता है।
rel विशेषता संसाधन को एक आइकन के रूप में पहचानती है। href इसका पता लगाता है, प्रकार इसके प्रारूप का वर्णन करता है, और आकार छवि आयामों का वर्णन करता है। "512x512" लिखने से फ़ाइल का आकार नहीं बदलता है। निर्यात की गई छवि का निरीक्षण करें और घोषणा को सटीक रखें।
SearchVector SVG और ICO विकल्प भी घोषित करता है। ब्राउज़र प्रकार और आकार जैसी विशेषताओं का उपयोग करके आइकन घोषणाओं के बीच चयन कर सकते हैं, जैसा कि MDN के आइकन लिंक संदर्भ में बताया गया है। इसलिए एकाधिक घोषणाएँ स्वचालित रूप से कोई समस्या नहीं हैं, लेकिन पुराने विकल्प असंगत दिखावे की व्याख्या कर सकते हैं।
यदि आप सीएमएस का उपयोग करते हैं, तो इसकी साइट-आइकन सेटिंग से शुरुआत करें। यदि आप किसी फ़्रेमवर्क का उपयोग करते हैं, तो उसके स्थापित मेटाडेटा तंत्र का उपयोग करें। फिर परिणामी HTML का निरीक्षण करें: व्यवस्थापक स्क्रीन में एक सफल अपलोड कार्य का केवल एक हिस्सा है। मौजूदा टेम्प्लेट पहले से ही क्या आउटपुट देता है, ��सकी जांच करने से पहले दूसरी प्रतिस्पर्धी सेटिंग जोड़ने से बचें।
खोज उपस्थिति के लिए Google को क्या चाहिए
Google के फ़ेविकॉन दस्तावेज़ को कम से कम 8×8 पिक्सेल की वर्गाकार छवि की आवश्यकता होती है और 48×48 से बड़ी छवि की अनुशंसा की जाती है। इसके सूचीबद्ध प्रारूपों में पीएनजी और आईसीओ शामिल हैं। यह न मानें कि ब्राउज़र में काम करने वाला एक एसवीजी Google की खोज प्रस्तुति में समर्थन स्थापित करता है।
मुखपृष्ठ को आइकन घोषित करना होगा। Googleबॉट को उस होमपेज तक पहुंच की आवश्यकता है, और Googleबॉट-इमेज को आइकन फ़ाइल तक पहुंच की आवश्यकता है। आइकन यूआरएल को स्थिर रखें और साइट के मार्क प्रतिनिधि का उपयोग करें। Google प्रति होस्टनाम एक फ़ेविकॉन का समर्थन करता है: एक उपडोमेन का अपना हो सकता है, लेकिन एक उपनिर्देशिका को एक अलग खोज फ़ेविकॉन नहीं मिलता है।
पात्रता प्रदर्शन की गारंटी नहीं देती। बदलाव के बाद, Google को मुखपृष्ठ को फिर से क्रॉल करने और संसाधित करने की आवश्यकता है; इसके दस्तावेज़ कहते हैं कि इसमें कई दिन से लेकर सप्ताह तक का समय लग सकता है। साइट मालिक यूआरएल निरीक्षण के माध्यम से होमपेज अनुक्रमण का अनुरोध कर सकते हैं। बार-बार छवि का नाम बदलना पहुंच की जांच करने और प्रसंस्करण समय की अनुमति देने के लिए एक उपयोगी विकल्प नहीं है।
किसी गुम या पुराने फ़ेविकॉन का समस्या निवारण करें
तीन अवलोकनों को अलग करें: HTML क्या घोषित करता है, छवि URL क्या लौटाता है, और ब्राउज़र क्या प्��दर्शित करता है। उनके बीच बेमेल आपको बताता है कि कहां जांच करनी है। एक साथ कई सेटिंग्स बदलने के बजाय पेज यूआरएल, आइकन यूआरएल और परिणाम का संक्षिप्त रिकॉर्ड रखें।
| लक्षण | अगला जाँचें |
|---|---|
| किसी भी पेज प��� कोई आइकन नहीं | आइकन घोषणा के लिए शीर्ष का निरीक्षण करें; इसका छवि URL सीधे खोलें |
| होमपेज काम करता है, लेख नहीं करता | टेम्प्लेट और रूट-सापेक्ष बनाम पृष्ठ-सापेक्ष की तुलना करें पथ |
| एक ब्राउज़र में पुराना आइकन | एक ताज़ा ब्राउज़र प्रोफ़ाइल की तुलना करें और सभी घोषित विकल्पों का निरीक्षण करें |
| छवि URL खुलता है वेबपेज | रीडायरेक्ट, एक्सेस चुनौती या फ़ॉलबैक HTML प्रतिक्रिया की जाँच करें |
| ब्राउज़र काम करता है, खोज नहीं | होमपेज घोषणा, क्रॉल एक्सेस और खोज पात्रता की अलग से समीक्षा करें |
यदि सर्वर एक लॉगिन पेज या सामान्य HTML फ़ॉलबैक भेजता है तो 200 लेबल वाली प्रतिक्रिया अपर्याप्त है। ब्राउज़र के नेटवर्क पैनल में, आइकन अनुरोध के अंतिम URL, प्रतिक्रिया सामग्री प्रकार और पूर्वावलोकन का निरीक्षण करें। एक पीएनजी को वास्तव में पीएनजी के रूप में ��िकोड किया जाना चाहिए। यह भी जांचें कि क्या सीडीएन मूल अद्यतन होने के बाद भी पुरानी फ़ाइल परोस रहा है।
कैश जांच के लिए, छवि को सीधे खोलें और इसकी तुलना एक ताज़ा ब्राउज़र प्रोफ़ाइल से करें। कैश साफ़ करने से कारण को अलग करने में मदद मिल सकती है, लेकिन उपयोगकर्ताओं को वेबसाइट के कार्य करने के लिए विशेष रीसेट करने की आवश्यकता नहीं होनी चाहिए। स्थानीय रिफ्रेश को स्थायी समाधान मानने से पहले तैनात संपत्ति और कैश कॉन्फ़िगरेशन की जांच करें।
कार्य उदाहरण: एक नेस्टेड पृष्ठ अपना आइकन खो देता है
एक काल्पनिक साइट पर विचार करें जिसका मुखपृष्ठ सही आइकन दिखाता है, जबकि /blog/ के अंतर्गत एक लेख नहीं दिखाता है। दोनों टेम्प्लेट में प्रमुख स्लैश के बिना href=”favicon.png” शामिल है। यह मानते हुए कि कोई बेस यूआरएल ओवरराइड नहीं है, वह सापेक्ष पथ वर्तमान पृष्ठ के बगल में हल हो जाता है। लेख के लिए भिन्न स्थान का अनुरोध करते समय यह मूल पर काम कर सकता है।
डेवलपर लेख के आइकन अनुरोध को खोलता है और पाता है कि यह एक छवि के बजाय साइट का HTML फ़ॉलबैक लौटाता है। समाधान यह पुष्टि करना है कि छवि साइट रूट पर मौजूद है और साझा घोषणा को href=”/favicon.png” में बदलना है। फिर वे मुखपृष्ठ और लेख की दोबारा जाँच करते हैं। दोनों अब एक ही संपत्ति का अनुरोध करते हैं।
यह एक कार्यान्वित निदान उदाहरण है, रिपोर्ट की गई SearchVector घटना नहीं। इसका पाठ कल��कृति को बदलने से पहले अनुरोधित यूआरएल का निरीक्षण करना है। यदि कोई नेस्टेड टेम्प्लेट गलत फ़ाइल मांगता है तो एक पूरी तरह से मान्य छवि मदद नहीं कर सकती।
कार्य बंद करने से पहले एक अंतिम जांच
- मुखपृष्ठ और एक नेस्टेड पृष्ठ खोलें; पुष्टि करें कि दोनों इच्छित आइकन घोषित करते हैं। उपस्थिति।
- अलग से Google पात्रता की समीक्षा करें, फिर परिवर्तन रिकॉर्ड करें और प्रसंस्करण समय की अनुमति दें।
विस्तृत वेबसाइट समीक्षा के लिए, SearchVector के वेबसाइट चेकर या इसके वेब पेज क्रॉलर के साथ जारी रखें। ऊपर दी गई सीधी छवि और HTML जांच को अपने फ़ेविकॉन साक्ष��य के रूप में रखें; एक सामान्य पृष्ठ समीक्षा यह गारंटी नहीं देती कि कोई खोज इंजन आपके ब्रांड को कैसे प्रदर्शित करेगा।
एक तैयार फ़ेविकॉन कार्य में एक पहचानने योग्य छवि, एक सही घोषणा और पेज टेम्पलेट्स में एक कार्यशील संसाधन URL होता है। पहले उन ठोस टुकड़ों को सत्यापित करें. फिर टूटे हुए ब्राउज़र कार्य���न्वयन के साथ विलंबित रिफ्रेश को भ्रमित किए बिना खोज उपस्थिति की निगरानी करें।
