Favicon कैसे बनाएँ
हर जगह दिखने वाले favicon के लिए ज़रूरी नाप, फ़ॉर्मैट और कोड।
Favicon ब्राउज़र टैब में, बुकमार्क में और मोबाइल पर Google खोज के नतीजों में आपकी साइट के बग़ल में दिखने वाला छोटा आइकन है। बिना favicon की साइट अधूरी लगती है, और धुँधला favicon उससे भी बुरा असर छोड़ता है। अच्छा favicon बनाने में कुछ मिनट लगते हैं।
सही तस्वीर से शुरू कीजिए
Favicon कभी-कभी 16 × 16 पिक्सेल पर दिखता है, इसलिए नाम लिखा पूरा लोगो पढ़ा ही नहीं जाएगा। कोई सादा निशान इस्तेमाल कीजिए: लोगो का प्रतीक, एक अक्षर, या ब्रांड के रंग में कोई साफ़ आकृति। स्क्रीन पर उसे चौथाई आकार तक छोटा करके जाँचिए: अगर तब भी पहचान में आए, तो वह काम करेगा।
कम से कम 512 × 512 पिक्सेल की चौकोर इमेज से शुरू कीजिए, बेहतर हो पारदर्शी पृष्ठभूमि वाला PNG। अगर आपका लोगो चौकोर नहीं है, तो अनुपात 1:1 बाँधकर उसे चौकोर काटिए।
ज़रूरी फ़ाइलें
| फ़ाइल | नाप | कौन इस्तेमाल करता है |
|---|---|---|
| favicon.ico | 16, 32 और 48 पिक्सेल के संस्करण | ब्राउज़र, पुराने सिस्टम, /favicon.ico पर डिफ़ॉल्ट अनुरोध |
| एक PNG आइकन | 32 × 32 और 192 × 192 | आधुनिक ब्राउज़र, Android होम स्क्रीन |
| apple-touch-icon.png | 180 × 180 | iPhone और iPad की होम स्क्रीन के शॉर्टकट |
Google खोज भी अपने नतीजों में आपका favicon इस्तेमाल करता है। वह चौकोर होना चाहिए, कम से कम 48 × 48 पिक्सेल का, और आपकी साइट पर क्रॉलर की पहुँच में।
ICO फ़ाइल बनाना
अपना चौकोर PNG PNG से ICO कन्वर्टर में छोड़िए। वह एक असली .ico फ़ाइल बनाता है जिसमें वे छोटे नाप होते हैं जो ब्राउज़र माँगते हैं। PNG संस्करणों के लिए उसी चौकोर इमेज को 180, 192 और 32 पिक्सेल पर साइज़ बदलिए।
उसे अपनी साइट पर लगाना
favicon.ico को साइट की जड़ में अपलोड कीजिए ताकि वह yoursite.com/favicon.ico पर मिले, फिर अपने पेजों के head में ये पंक्तियाँ जोड़िए:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
WordPress में Appearance, Customize, Site Identity पर जाकर कोई चौकोर इमेज Site Icon के रूप में अपलोड कीजिए; WordPress नाप ख़ुद बना देता है। Shopify, Wix और Squarespace, सबमें साइट या थीम की सेटिंग में favicon की जगह होती है।
जब नया favicon न दिखे
ब्राउज़र favicon को बहुत ज़िद से कैश में रखते हैं। साइट निजी विंडो में खोलिए, या सीधे yoursite.com/favicon.ico पर जाकर पेज रिफ़्रेश कीजिए। आपके होम पेज को दोबारा क्रॉल करने के बाद Google को अपने नतीजों में आइकन बदलने में दिन या हफ़्ते लग सकते हैं।
आम ग़लतियाँ
- छोटे अक्षरों वाला पूरा लोगो इस्तेमाल करना, जो 16 पिक्सेल पर धब्बा बन जाता है।
- पारदर्शी पृष्ठभूमि पर सफ़ेद आइकन, जो हल्के रंग के टैब में ग़ायब हो जाता है।
- सिर्फ़ 16 पिक्सेल की छोटी फ़ाइल देना, जो ऊँची रिज़ॉल्यूशन वाली स्क्रीन पर धुँधली दिखती है।
- /favicon.ico पर फ़ाइल भूल जाना, जिसे कुछ ब्राउज़र और क्रॉलर पेज में कुछ भी लिखा हो, फिर भी माँगते हैं।