HTML में भरोसेमंद फ़ेविकॉन किसी एक जादुई टैग पर निर्भर नहीं करता। इसके लिए कुछ उपलब्ध फ़ाइलें और head में लिंक चाहिए। यह तरीका पुराने संस्करणों की संख्या बढ़ाए बिना आधुनिक टैब, पुराने क्लाइंट और मोबाइल शॉर्टकट सँभालता है।
फ़ाइलें तैयार करें
ऐसे वर्गाकार चिह्न से शुरू करें जो बहुत छोटे आकार में भी पहचाना जा सके। favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest और मैनिफ़ेस्ट में बताए PNG को डोमेन के रूट पर उपलब्ध सार्वजनिक फ़ोल्डर में रखें।
/favicon.svg जैसा पथ डोमेन के रूट से शुरू होता है। इसलिए वह /products और /blog/article पर भी सही रहता है, जबकि favicon.svg को पेज के सापेक्ष हल किया जा सकता है।
head में तत्व जोड़ें
पहले SVG को rel icon और type image/svg+xml के साथ घोषित करें, फिर ICO को rel icon और sizes any के साथ। iOS के लिए rel apple-touch-icon और वेब ऐप इंस्टॉल करने के लिए rel manifest जोड़ें।
type वास्तव में दी जा रही फ़ाइल से मेल खाना चाहिए। PNG का नाम बदलकर .ico न करें: सामग्री और हेडर ICO फ़ॉर्मैट में होने चाहिए।
| उद्देश्य | संबंध | फ़ाइल |
|---|---|---|
| आधुनिक ब्राउज़र | icon | /favicon.svg |
| अनुकूलता | icon | /favicon.ico |
| iOS होम स्क्रीन | apple-touch-icon | /apple-touch-icon.png |
| वेब ऐप | manifest | /site.webmanifest |
पथ तोड़े बिना डिप्लॉय करें
डिप्लॉय के बाद हर फ़ाइल का URL सीधे खोलें। सफल स्थिति के साथ चित्र या मैनिफ़ेस्ट मिलना चाहिए, भ्रामक स्थिति कोड के साथ लॉगिन या 404 का HTML पेज नहीं।
साइट किसी उपडायरेक्टरी में हो तो पथ या सार्वजनिक बेस बदलें। डेवलपर टूल में अंतिम पेज जाँचें: ब्राउज़र अपेक्षित URL माँगे और दूसरे होस्ट पर रीडायरेक्ट न हो।
परिणाम की पुष्टि करें
कैश बंद करके फिर लोड करें और बने DOM में link तत्व जाँचें। फिर टैब, बुकमार्क और जहाँ लागू हो, वास्तविक डिवाइस की होम स्क्रीन पर साइट जोड़कर देखें।
खोज परिणाम का फ़ेविकॉन सर्च इंजन के नियमों और क्रॉल समय पर भी निर्भर करता है। इसलिए ब्राउज़र में आइकन दिखना खोज परिणामों में तत्काल अपडेट की गारंटी नहीं है।
प्राथमिक स्रोत
अक्सर पूछे जाने वाले सवाल
क्या फ़ेविकॉन का तत्व body में जाता है?
नहीं। आइकन और मैनिफ़ेस्ट बताने वाले link तत्व दस्तावेज़ के head में रखने चाहिए।
क्या रूट में favicon.ico रखना काफ़ी है?
यह उपयोगी वैकल्पिक फ़ाइल है, लेकिन Apple Touch आइकन या इंस्टॉल करने योग्य मैनिफ़ेस्ट आइकन का वर्णन नहीं करती। उनके लिए अलग फ़ॉर्मैट घोषित करें।
/ से शुरू होने वाला पथ क्यों इस्तेमाल करें?
यह डोमेन के रूट से शुरू होता है और किसी भीतर के पेज को फ़ाइल अपने फ़ोल्डर में खोजने से रोकता है।