इस्तेमाल करने का तरीका
- अक्षर चुनें और अपने रंगों के साथ एक या दो अक्षर लिखें, या इमेज चुनें और लोगो चुनें (बेहतर होगा कि वह चौकोर और कम से कम 512 px का हो)।
- हर आकार का प्रीव्यू देखें, खासकर 16 और 32 px का, जो ब्राउज़र टैब में दिखता है।
- ZIP डाउनलोड करें और उसकी फ़ाइलें अपनी वेबसाइट के रूट फ़ोल्डर में अपलोड करें।
- HTML टैग को अपने पेजों के head सेक्शन में पेस्ट करें और ज़रूरत पड़ने पर site.webmanifest में नाम बदलें।
यह कैसे काम करता है
ब्राउज़र और डिवाइस अलग-अलग जगहों पर आइकन ढूँढ़ते हैं। यहाँ बनाए गए आइकनों का सेट आम इस्तेमाल के मामलों को कवर करता है: ब्राउज़र टैब, बुकमार्क और पुराने सॉफ़्टवेयर के लिए favicon.ico में 16, 32 और 48 px की इमेज, जो /favicon.ico को अपने-आप खोजते हैं; link टैग से जोड़ी गई 16 और 32 px की PNG फ़ाइलें; iPhone या iPad की होम स्क्रीन पर आपकी साइट जोड़ने के लिए इस्तेमाल होने वाला 180 × 180 का apple-touch-icon; और Android होम स्क्रीन तथा इंस्टॉल किए जा सकने वाले वेब ऐप के लिए site.webmanifest से जोड़े गए 192 और 512 px के आइकन।
favicon.ico फ़ाइल, ICO कंटेनर के भीतर आइकन को PNG इमेज के रूप में रखती है। इसे सभी मौजूदा ब्राउज़र और Windows Vista या उसके बाद के संस्करण पढ़ सकते हैं। ICO और ZIP फ़ाइलें इसी पेज के कोड से तैयार होती हैं; कोई डेटा सर्वर पर नहीं भेजा जाता।
छोटे आकारों के लिए डिज़ाइन सरल होना चाहिए: 16 × 16 पिक्सेल पर पतली रेखाएँ और छोटा टेक्स्ट दिखाई नहीं देते, इसलिए शब्दों वाले पूरे लोगो के बजाय मोटा अक्षर या सरल लोगो-चिह्न बेहतर रहता है। इमेज का आकार घटाने के लिए कई उच्च-गुणवत्ता वाले चरणों का इस्तेमाल होता है। apple-touch-icon को हमेशा ठोस बैकग्राउंड रंग दिया जाता है, क्योंकि iOS पारदर्शी हिस्सों को काले रंग से भर देता है। iOS इसके कोनों को खुद गोल करता है।
नए आइकन अपलोड करने के बाद, ब्राउज़र कुछ समय तक पुराना favicon दिखा सकते हैं, क्योंकि वे इसे लंबे समय तक कैश में रखते हैं। हार्ड रिफ़्रेश करने या सीधे /favicon.ico खोलने से आमतौर पर मदद मिलती है।
उदाहरण
नए प्रोजेक्ट के लिए अक्षर वाला आइकन
गहरे हरे रंग के गोल कोने वाले वर्ग पर सफ़ेद अक्षरों में "TG" लिखने से एक साफ़ आइकन बनता है, जो ब्राउज़र टैब में 16 × 16 px पर भी आसानी से पढ़ा जा सकता है और इसके लिए डिज़ाइन किया हुआ लोगो ज़रूरी नहीं है।
मौजूदा लोगो से आइकन
पारदर्शी बैकग्राउंड वाले 1024 × 1024 PNG लोगो को पूरी इमेज फ़िट करें विकल्प के साथ इस्तेमाल करने पर पारदर्शी टैब आइकन बनते हैं और apple-touch-icon में आपके ब्रांड का रंग बैकग्राउंड के रूप में आता है।
चौड़ा लोगो
1200 × 300 के वर्डमार्क के लिए, बीच का हिस्सा क्रॉप करें विकल्प से केवल बीच के अक्षर बचते हैं। पूरी इमेज फ़िट करें विकल्प से सब कुछ बना रहता है, लेकिन बहुत छोटा दिखता है; आमतौर पर अलग से बना चौकोर लोगो-चिह्न बेहतर लगता है।
अक्सर पूछे जाने वाले सवाल
क्या मुझे अब भी favicon.ico की ज़रूरत है?
हाँ, इसकी अब भी उपयोगिता है। कुछ ब्राउज़र, फ़ीड रीडर और टूल बिना link टैग के भी साइट के रूट से /favicon.ico माँगते हैं। आधुनिक ब्राउज़र HTML में जोड़े गए PNG आइकन भी इस्तेमाल करते हैं।
फ़ाइलें कहाँ रखूँ?
फ़ाइलों को अपनी वेबसाइट के रूट फ़ोल्डर में, होम पेज के साथ अपलोड करें, ताकि /favicon.ico और HTML में दिए गए दूसरे पाथ काम करें। सबफ़ोल्डर इस्तेमाल करने पर link टैग और site.webmanifest में पाथ बदलें।
मेरा पुराना favicon अब भी क्यों दिख रहा है?
ब्राउज़र favicon को अलग से और लंबे समय तक कैश करते हैं। हार्ड रिफ़्रेश करें, नए टैब में /favicon.ico खोलें या निजी विंडो में देखें। फ़ाइलों के नाम बदलने से भी, जैसे favicon-v2.ico, उन्हें फिर से लोड किया जा सकता है।
क्या इससे SVG favicon बनता है?
नहीं। यह PNG और ICO फ़ाइलें बनाता है, जो हर जगह काम करती हैं। अगर आपके पास पहले से SVG लोगो है, तो इन फ़ाइलों के साथ image/svg+xml प्रकार का link टैग जोड़कर उसे भी शामिल कर सकते हैं।
गोपनीयता
आइकन, ICO फ़ाइल और ZIP आपके ब्राउज़र में बनाए जाते हैं। आपकी इमेज और टेक्स्ट अपलोड या स्टोर नहीं किए जाते और न ही एनालिटिक्स में शामिल होते हैं।