एक फ़ेविकॉन अब एक इमेज नहीं रहा। ब्राउज़र, फ़ोन, और ऑपरेटिंग सिस्टम हर एक किसी अलग स्लॉट के लिए एक अलग साइज़ पकड़ते हैं — ब्राउज़र टैब, एक बुकमार्क, एक iOS होम स्क्रीन, एक Android ऐप स्विचर। एक 32×32 PNG भेजें और यह टैब में काम करेगा पर धुँधला दिखेगा जब कोई आपकी साइट को अपने फ़ोन पर सहेजे। पूरा सेट भेजें और हर सतह को एक तीखा आइकन मिलता है।
यहाँ है ठीक-ठीक कौन से साइज़ आपको चाहिए, हर एक क्या करता है, और सूची ऐसी क्यों दिखती है।
वे साइज़ जो मायने रखते हैं
ज़्यादातर साइट्स छह PNG साइज़ प्लस एक विरासती .ico से कवर होती हैं। यहाँ है संदर्भ:
| साइज़ | फ़ॉर्मैट | कहाँ इस्तेमाल होता है |
|---|---|---|
| 16×16 | PNG (.ico में) | ब्राउज़र टैब, एड्रेस बार, बुकमार्क |
| 32×32 | PNG (.ico में) | Retina टैब, Windows टास्कबार शॉर्टकट |
| 48×48 | PNG | Windows साइट आइकन, कुछ Android सतहें |
| 180×180 | PNG | iOS होम स्क्रीन (apple-touch-icon) |
| 192×192 | PNG | Android होम स्क्रीन, PWA इंस्टॉल |
| 512×512 | PNG | PWA स्प्लैश स्क्रीन, ऐप स्टोर, हाई-DPI |
favicon.ico फ़ाइल एक कंटेनर है जो छोटे साइज़ (आम तौर पर 16 और 32, कभी 48) बंडल करता है। पुराने ब्राउज़र और Windows इसे आपकी साइट रूट पर नाम से ढूँढते हैं, इसलिए इसे भेजना अब भी सार्थक है भले ही आधुनिक ब्राउज़र ख़ुशी-ख़ुशी PNG इस्तेमाल करते हैं।
इतने सारे क्यों? एक झटपट दौरा
सूची लंबी होने की वजह यह है कि आइकन बेतहाशा अलग भौतिक साइज़ में दिखता है।
16 और 32 रोज़मर्रा के टैब आइकन हैं। 16 क्लासिक साइज़ है; 32 हाई-DPI ("Retina") स्क्रीनों को कवर करता है जहाँ 16 नरम दिखेगा। ब्राउज़र जो भी पिक्सेल घनत्व से फ़िट हो उसे चुनते हैं।
48 एक Windows चीज़ है — यह साइट शॉर्टकट के लिए इस्तेमाल होता है और कुछ जगहों पर तीखा दिखता है जिन्हें 32 अच्छे से कवर नहीं करता।
180 Apple का apple-touch-icon है। जब कोई किसी iPhone या iPad पर "Add to Home Screen" टैप करता है, तो iOS यह इस्तेमाल करता है। इसे गलत करें और iOS या तो एक छोटा किया स्क्रीनशॉट पकड़ेगा या एक सादा अक्षर टाइल दिखाएगा — कोई भी आपके ब्रांड जैसा नहीं दिखता।
192 और 512 Progressive Web App साइज़ हैं, जो एक manifest.webmanifest फ़ाइल में घोषित होते हैं। 192 Android होम-स्क्रीन आइकन है; 512 स्प्लैश स्क्रीन को खिलाता है और OS को जिस भी और चीज़ की ज़रूरत हो उसके लिए छोटा किया जाता है। अगर आपकी साइट इंस्टॉल करने योग्य है, तो ये दोनों बिना मोलभाव के हैं।
क्या आपको 512 से बड़ा चाहिए?
नहीं। 512×512 वेब फ़ेविकॉन के लिए व्यावहारिक छत है — webmanifest स्पेक और हर बड़ा प्लेटफ़ॉर्म वहीं के आस-पास सबसे ऊपर पहुँचता है। अगर आपकी सोर्स आर्ट 1024 या बड़ी है, तो यह एक शुरुआती इमेज के रूप में ठीक है (छोटा करने के लिए ज़्यादा डिटेल), पर आप 1024 फ़ेविकॉन नहीं भेजते। 512 से ऊपर की कोई भी चीज़ बस ऐसे बाइट्स जोड़ती है जिन्हें कोई इस्तेमाल नहीं करता।
ऊपर जाने में जो एक नियम मायने रखता है: एक बड़े, वर्गाकार सोर्स से शुरू करें। एक 512×512 या 1024×1024 ओरिजिनल अपने से नीचे के हर साइज़ में साफ़ छोटा होता है। किसी नन्ही इमेज से शुरू करें और छोटे साइज़ गंदे दिखते हैं क्योंकि रखने के लिए कभी पर्याप्त डिटेल थी ही नहीं।
ऐसे डिज़ाइन करें कि यह 16×16 झेल जाए
सबसे मुश्किल साइज़ सबसे छोटा है। 16×16 पर एक विस्तृत लोगो एक अपठनीय धब्बा बन जाता है। कुछ सुझाव जो साइटों भर में टिकते हैं:
- सरल करें। एक पूरा वर्डमार्क 16px पर नहीं पढ़ेगा। एक अकेला अक्षर, एक मोनोग्राम, या अपने निशान का सबसे पहचानने योग्य हिस्सा इस्तेमाल करें।
- कंट्रास्ट ऊँचा रखें ताकि आकार हल्के और गहरे दोनों टैब बैकग्राउंड पर पढ़ने योग्य रहे।
- थोड़ी पैडिंग छोड़ें — एक आइकन जो चारों किनारों को छूता है वह टैब में ठुँसा लगता है।
- इसे छोटा टेस्ट करें। अपना ब्राउज़र ज़ूम आउट करें, या बस असली टैब देखें। अगर आप एक नज़र में नहीं बता सकते कि यह क्या है, तो और सरल करें।
पूरा सेट बनाना
आप इन्हें हाथ से नहीं बनाते। एक वर्गाकार इमेज Favicon Generator में डालें और यह पूरा सेट एक बार में बनाता है — favicon.ico, 16/32/48/180/192/512 PNG, एक इस्तेमाल-को-तैयार webmanifest, और पेस्ट करने के लिए सटीक HTML <head> स्निपेट। सब कुछ आपके ब्राउज़र में चलता है: इमेज कभी अपलोड नहीं होती, और आपकी पहली विज़िट के बाद टूल ऑफ़लाइन काम करता है।
वह HTML जो आपके पास होगा
संदर्भ के लिए, एक पूरा फ़ेविकॉन सेटअप आपके <head> में मोटे तौर पर ऐसा दिखता है:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
जेनरेटर यह आपके लिए लिखता है, इसलिए आप इसे सीधे पेस्ट कर सकते हैं। छह साइज़ प्लस .ico और मैनिफ़ेस्ट कवर करें, और हर ब्राउज़र, फ़ोन, और OS को वह तीखा आइकन मिलता है जो वह माँग रहा है।