कौन-सी फ़ेविकॉन फ़ाइलें वेबसाइट को चाहिए, और हर एक का साइज़

एक वेबसाइट को आइकन फ़ाइलों का एक छोटा-सा सेट चाहिए, और ज़्यादातर फ़ैसले साइज़ के होते हैं। ब्राउज़र टैब और Windows के लिए साइट की रूट डायरेक्टरी में 16, 32 और 48 पिक्सल वाली फ़ोटो के साथ एक favicon.ico रखें। iPhone और iPad की होम स्क्रीन के लिए 180 पिक्सल का Apple टच आइकन जोड़ें, और वेब ऐप मैनिफ़ेस्ट में दर्ज 192 और 512 पिक्सल के PNG आइकन रखें। फ़ेविकॉन जनरेटर एक ही लोगो से ये सब बना देता है और आपके पेज में चिपकाने वाली HTML लाइनें भी लिख देता है।

फ़ाइलें और उनके साइज़

जनरेटर जो ZIP डाउनलोड कराता है, उसमें सातों फ़ाइलें होती हैं। favicon.ico फ़ाइल 16, 32 और 48 पिक्सल की तीन PNG छवियों से बनी होती है, जो एक ही फ़ाइल के अंदर रखी जाती हैं। हर आइकन एक ही लोगो का छोटा रूप है। जनरेटर आपकी छवि के 512 पिक्सल वाले संस्करण से शुरू करता है और उसी से हर साइज़ बनाता है।

HTML की लाइनें

जनरेटर आपके पेज के head के लिए चार लाइनें लिखता है:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

पहली लाइन favicon.ico की ओर इशारा करती है और उसे 48 बाय 48 घोषित करती है। दूसरी 32 पिक्सल वाली PNG देती है। तीसरी Apple टच आइकन का नाम लेती है, और चौथी मैनिफ़ेस्ट की ओर इशारा करती है, जहाँ 192 और 512 पिक्सल वाले आइकन दर्ज हैं। 16 पिक्सल वाली PNG ZIP में है, पर इन लाइनों में नहीं। ब्राउज़र अपने आप भी /favicon.ico खोजते हैं, इसलिए पहली लाइन न होने पर भी फ़ाइल मिल जाती है। अगर आपकी फ़ाइलें कहीं और रखी हैं तो ही रास्ते बदलें, वरना उन्हें जैसे लिखा है वैसे ही रखें।

छोटे साइज़ में सरल आकार क्यों चाहिए

16 बाय 16 पिक्सल के आइकन में कुल 256 पिक्सल होते हैं। 48 पिक्सल वाले आइकन में 2,304 और 512 पिक्सल वाले मूल स्रोत में 262,144। 16 पिक्सल तक पहुँचते-पहुँचते लोगो की ज़्यादातर बारीकियाँ खो जाती हैं, इसलिए पतली रेखा या छोटा शब्द धुंधला हो जाता है। सरल निशान रखें, या तेज़ कंट्रास्ट वाला एक-दो अक्षर।

अक्षर वाला विकल्प एक या दो अक्षर स्वीकार करता है और उन्हें आइकन के बीच बड़ा करके बनाता है। ज़्यादा चौड़े हों तो वे छोटे हो जाते हैं। इसके आकार Square, Rounded और Circle हैं। प्रीव्यू में 16, 32, 48, 180 और 512 पिक्सल के नतीजे एक साथ दिखते हैं, साथ में हल्का और गहरा टैब भी, ताकि डाउनलोड से पहले छोटे साइज़ परख सकें। आकार, पैडिंग या बैकग्राउंड बदलने पर प्रीव्यू तुरंत अपडेट होता है, इसलिए हर सेटिंग पहले आज़माई जा सकती है।

पैडिंग, बैकग्राउंड और Apple आइकन

पैडिंग के तीन विकल्प हैं: No padding, Small और Large। Small में आइकन के हर तरफ़ 10 प्रतिशत जगह खाली रहती है, और Large में 20 प्रतिशत। इमेज मोड में No padding छवि को उसके बीच के वर्ग में काट देता है, इसलिए चौड़े लोगो के सिरे कट जाते हैं। पैडिंग वाले विकल्प पूरी छवि को वर्ग के अंदर फ़िट करते हैं।

बैकग्राउंड के विकल्प Transparent, White और Custom हैं, और डिफ़ॉल्ट Transparent है। Apple टच आइकन हमेशा अपारदर्शी रहता है। इमेज मोड में उसके पारदर्शी हिस्सों को चुना हुआ बैकग्राउंड मिलता है, या बैकग्राउंड Transparent हो तो सफ़ेद। अक्षर मोड में उन्हें अक्षर वाला बैकग्राउंड रंग मिलता है। Apple टच आइकन के पारदर्शी हिस्से iPhone और iPad पर काले दिख सकते हैं, इसलिए जनरेटर उन्हें भर देता है। बाकी साइज़ में आपकी चुनी हुई पारदर्शिता बनी रहती है। कारण के लिए पारदर्शी PNG काली क्यों हो जाती है पढ़ें।

फ़ेविकॉन वर्गाकार होता है, इसलिए चौड़े लोगो को पहले वर्गाकार फ़्रेम चाहिए। स्क्वायर फ़ोटो मेकर पूरी तस्वीर को 1:1 फ़्रेम में फ़िट करता है, साथ में धुंधली, सफ़ेद, काली या कस्टम बॉर्डर के विकल्प के साथ, ताकि कुछ भी न कटे। फ़ोटो का साइज़ बदलें सटीक पिक्सल तय करता है। Keep proportions चालू रखें और दोनों तरफ़ की संख्याएँ भरी हों, तो तस्वीर बिना खिंचे बॉक्स के अंदर फ़िट हो जाती है। आम आकारों के बारे में फ़ोटो के आस्पेक्ट रेशियो समझें में पढ़ें।

बदलाव दिखने में समय क्यों लगता है

ब्राउज़र फ़ेविकॉन को कैश में रखते हैं। एक ही पते पर बदली हुई फ़ाइल कुछ समय तक पुराना आइकन दिखा सकती है, इसलिए सामान्य रीलोड अक्सर काफ़ी नहीं होता। पुष्टि के लिए आइकन का पता सीधे खोलें, ताकि दिखे कि नई फ़ाइल सर्वर पर पहुँच गई है। फिर कैश छोड़कर पेज रीलोड करें। अगर पुराना आइकन अब भी दिखे, तो नई फ़ाइल को अलग नाम दें और लिंक को उसी नाम पर ले जाएँ।

fixmint के साथ कैसे करें

1. Image चुनें और अपना लोगो बॉक्स में छोड़ें, या Letter चुनकर एक या दो अक्षर लिखें।
2. Padding को None, Small या Large पर सेट करें, और Background को Transparent, White या Custom colour पर।
3. हल्के और गहरे टैब पर 16, 32 और 48 px के आइकन देखें, और 180 व 512 px के प्रीव्यू भी।
4. सातों फ़ाइलों के लिए Download ZIP दबाएँ, या सिर्फ़ उस एक फ़ाइल के लिए Download favicon.ico।
5. Copy HTML दबाएँ और HTML for your head वाली लाइनें हर पेज के head में चिपकाएँ।

ख़ास स्थितियाँ

• आपकी छवि आपकी डिवाइस पर ही रहती है। जनरेटर आइकन आपके ब्राउज़र में बनाता है, और कुछ भी अपलोड नहीं होता।
• दो अक्षर वाले अक्षर। दो अक्षर स्वीकार होते हैं, और दोनों एक साथ फ़िट हों इसके लिए उन्हें छोटा बनाया जाता है। इससे 16 पिक्सल पर वे एक अक्षर से पढ़ने में कठिन होते हैं।
• फ़ाइल के नाम। HTML में लिखे नाम वही रखें, क्योंकि लिंक उन्हीं की ओर इशारा करते हैं।
• न पढ़ी जा सकने वाली फ़ाइलें। अगर छवि से आइकन नहीं बन पाता, तो जनरेटर संदेश दिखाता है: "इस इनपुट से आइकन नहीं बन सके। कोई दूसरी छवि आज़माएँ।" और आउटपुट साफ़ कर देता है। कोई दूसरी फ़ाइल आज़माएँ, या छवि को किसी आम फ़ॉर्मेट में दोबारा सेव करें।