इसे कैसे इस्तेमाल करें : आइकन और फ़ेविकॉन
एक तस्वीर डालिए। आपके हाथ में एक आर्काइव आती है जिसमें favicon.ico है, टैब के आइकन हैं, iPhone की होम स्क्रीन वाला आइकन है, इंस्टॉल होने वाले ऐप के आइकन हैं, और वे पंक्तियाँ भी जो आपको अपने पन्ने में चिपकानी हैं।
किसी वेबसाइट पर आइकन लगाना दो मिनट का काम होना चाहिए। असल में उसके लिए अलग-अलग नापों की सात फ़ाइलें चाहिए, एक पुराना फ़ॉर्मैट जिसे अब कोई सॉफ़्टवेयर लिखना नहीं जानता, iPhone के लिए एक ख़ास आइकन, एक और जिसे Android अपनी शक्ल में काटता है, और आधा दर्जन पंक्तियाँ जो पन्ने में सही जगह चिपकानी होती हैं। इसीलिए फ़ेविकॉन बनाने वाले इतने औज़ार मौजूद हैं, और इसीलिए वे सब शुरुआत आपका लोगो माँगने से करते हैं।
यह वाला नहीं माँगता। आपकी तस्वीर पढ़ी जाती है, हर नाप पर दोबारा उकेरी जाती है, और आर्काइव उसी टैब में जोड़ी जाती है। .ico फ़ाइल बाइट दर बाइट बनाई जाती है, क्योंकि कोई भी ब्राउज़र उसे लिखना नहीं जानता: यह जाँचा हुआ है, मान लिया हुआ नहीं।
आपका स्रोत SVG हो तो उसे हर नाप पर दोबारा उकेरा जाता है, बड़ा या छोटा नहीं किया जाता। वेक्टर वाली तस्वीर के साथ ठीक यही करना चाहिए, और आइकन जत्थे के लिए इससे बेहतर स्रोत कोई नहीं।
इसे कैसे इस्तेमाल करें
- अपनी तस्वीर यहाँ डालें। कम से कम 512 पिक्सेल भुजा वाला चौकोर सबसे अच्छा रहता है; SVG और भी बेहतर है, वह हर नाप पर साफ़ दोबारा उकेरा जाएगा।
- चुनें कि जो तस्वीर चौकोर नहीं है उसका क्या किया जाए, और यह भी कि जो आइकन पारदर्शिता नहीं सँभालते उन्हें सफ़ेद पृष्ठभूमि मिले या नहीं।
- “बनाएँ और डाउनलोड करें” पर क्लिक करें। एक ही आर्काइव उतरती है, नौ फ़ाइलों और एक पर्ची के साथ जिसमें चिपकाने लायक़ पंक्तियाँ हैं।
चलने वाले फ़ॉर्मैट
ये चारों परिवार हर ताज़ा ब्राउज़र में खुल जाते हैं। SVG का दर्जा अलग है और उसका बर्ताव भी अलग: उसे नाप के हिसाब से खींचने के बजाय हर नाप पर दोबारा उकेरा जाता है।
PNG तस्वीर (.png)
SVG के बाद सबसे अच्छा चुनाव: यह पारदर्शिता सँभाल कर रखता है, और टैब के आइकन के लिए यह बहुत मायने रखता है। भुजा कम से कम 512 पिक्सेल रखें।
SVG वेक्टर तस्वीर (.svg)
सबसे बढ़िया स्रोत: हर नाप उसी चित्र से दोबारा उकेरा जाता है, पिक्सेलों से खींचा नहीं जाता। SVG के पास अपनी माप या अपना चित्र-क्षेत्र होना चाहिए, और उसमें किसी बाहरी फ़ॉन्ट या तस्वीर का हवाला नहीं होना चाहिए, वरना ब्राउज़र उन्हें अनदेखा कर देता है।
JPEG फ़ोटो (.jpg, .jpeg)
चलता है, पर JPEG में पारदर्शिता होती ही नहीं: आपके आइकन के पीछे हमेशा चौकोर पृष्ठभूमि रहेगी। लोगो के लिए PNG या SVG बेहतर है।
WebP तस्वीर (.webp)
हर जगह खुलता है और पारदर्शिता सँभालता है। जो आइकन बनते हैं वे हमेशा PNG ही होते हैं: यही अकेला फ़ॉर्मैट है जिसे लिखना ब्राउज़र पर लाज़िम है, और .ico के अंदर भी हर सिस्टम इसी को लेता है।
इसकी सीमाएँ
प्रति फ़ाइल 20 MB
आइकन के स्रोत का भारी होने का कोई कारण नहीं: बीस मेगाबाइट से ऊपर वह लोगो नहीं, फ़ोटो होती है, और बनने वाली आर्काइव फिर भी वही रहती। यह सीमा फ़ोन को बेवजह खटने से बचाती है।
प्रति तस्वीर करीब 1 करोड़ 67 लाख पिक्सेल
iPhone और iPad पर कैनवस का क्षेत्रफल लंबे समय तक 4096 गुणा 4096 पिक्सेल पर बँधा रहा, और उससे ऊपर जगह मिलती ही नहीं। औज़ार जगह माँगने से पहले क्षेत्रफल जाँच लेता है और साफ़ मना कर देता है।
बहुत छोटे स्रोत को बेहतर नहीं किया जा सकता
आपकी तस्वीर की भुजा 512 पिक्सेल से कम हो, तो बड़े आइकन बड़ा करके बने होंगे, यानी धुँधले। कोई भी औज़ार वे पिक्सेल नहीं गढ़ सकता जो हैं ही नहीं, और यह वाला बिना कुछ कहे लिजलिजा आइकन थमाने के बजाय आपको स्क्रीन पर यह बात बता देता है।
.ico हाथ से जोड़ा जाता है, और उसके अंदर PNG होते हैं
कोई भी ब्राउज़र .ico फ़ाइल लिखना नहीं जानता: हमने इसे नापा है, और कैनवस से यह फ़ॉर्मैट माँगने पर PNG मिलता है। इसलिए डिब्बा तीन PNG तस्वीरों के गिर्द बाइट दर बाइट बनाया जाता है। .ico के अंदर PNG Windows Vista से और Firefox 9 से माना जाता है; बाकी ब्राउज़रों के लिए हमें सिर्फ़ इस्तेमाल के सबूत मिले, बनाने वाले का कोई दस्तावेज़ नहीं, और हमें यह लिख देना बेहतर लगता है।
आर्काइव पर कोई तारीख़ नहीं होती
ज़िप फ़ाइल आम तौर पर हर फ़ाइल की तारीख़ और समय दर्ज करती है। यही वह इकलौती बात होती जो आर्काइव आपके बारे में साथ ले जाती। इसलिए हम उसमें एक जमी हुई तारीख़ लिखते हैं, जितनी पुरानी यह फ़ॉर्मैट होने देता है, और एक ही तस्वीर से बनी दो आर्काइव बाइट दर बाइट एक जैसी निकलती हैं।
हिलती-डुलती तस्वीरें मना कर दी जाती हैं
आइकन अपनी बनावट से ही ठहरा हुआ होता है, और कैनवस में सिर्फ़ एक फ़्रेम समाता है। किसी हरकत का पहला फ़्रेम चुपचाप रख लेने के बजाय औज़ार रुक जाता है और यह बात कह देता है।
इस औज़ार के बारे में सवाल
क्या मेरी तस्वीर कहीं भेजी जाती है?
नहीं, और आपको हम पर भरोसा करने की ज़रूरत भी नहीं। F12 कुंजी से अपने ब्राउज़र का इंस्पेक्टर खोलें, “Network” वाले टैब पर जाएँ, सूची ख़ाली कर दें, फिर अपनी तस्वीर डालें। एक भी पंक्ति नहीं आती। आप अपना इंटरनेट भी काट सकते हैं: औज़ार तब भी चलता रहता है, आर्काइव समेत।
अच्छे नतीजे के लिए कैसी तस्वीर दें?
SVG, अगर आपके पास हो: तब हर आइकन अपने आख़िरी नाप पर साफ़ दोबारा उकेरा जाता है। वरना कम से कम 512 पिक्सेल भुजा वाला चौकोर PNG, पारदर्शी पृष्ठभूमि के साथ। बहुत बारीक ब्योरों वाली तस्वीर से बचें: सोलह पिक्सेल की भुजा पर बारीक चित्र एक धब्बा बन जाता है। अच्छे फ़ेविकॉन लगभग हमेशा एक सादी शक्ल और एक चटख कंट्रास्ट होते हैं।
नौ फ़ाइलें क्यों, एक ही क्यों नहीं?
क्योंकि सिस्टम एक ही चीज़ नहीं माँगते। ब्राउज़र टैब के लिए छोटा आइकन चाहते हैं और बिना कहे साइट की जड़ में favicon.ico ढूँढ़ने चले जाते हैं। iOS को होम स्क्रीन के लिए 180 पिक्सेल का आइकन चाहिए, और वह पारदर्शी हो तो उसे काले पर बिठा देता है। Android को मास्क होने वाला आइकन चाहिए, जिसे वह उस वक़्त की शक्ल में काटता है। इंस्टॉल होने वाले ऐप का मैनिफ़ेस्ट दो और माँगता है। इनमें से कोई माँग नख़रा नहीं है, और आर्काइव की पर्ची आपको बता देती है कि हर एक को कहाँ रखना है।
आर्काइव में कोई तारीख़ क्यों नहीं है?
क्योंकि ज़िप फ़ाइल आम तौर पर हर फ़ाइल की तारीख़ और समय दर्ज करती है, और यही वह इकलौती बात होती जो आर्काइव आपके बारे में साथ ले जाती। इसलिए हम उसमें एक जमी हुई तारीख़ लिखते हैं, जितनी पुरानी यह फ़ॉर्मैट होने देता है। यह छोटी बात है, पर यह एक तालमेल वाली छोटी बात है: जो औज़ार आपसे कुछ लेता ही नहीं, उसे आपकी लौटाई हुई फ़ाइल में आपके बारे में कुछ लिखने की कोई वजह नहीं। इसका एक सुहाना पार्श्व-असर भी है: एक ही तस्वीर से बनी दो आर्काइव बाइट दर बाइट एक जैसी होती हैं।
ब्राउज़र .ico लिख ही नहीं सकता तो आप उसे कैसे बनाते हैं?
हाथ से। हमने शुरुआत इसे मान लेने के बजाय जाँचने से की: कैनवस से .ico फ़ॉर्मैट माँगने पर बिना बताए PNG मिलता है। इसलिए फ़ाइल बाइट दर बाइट जोड़ी जाती है, एक आइकन डायरेक्टरी हेडर, हर नाप के लिए एक ब्योरा, और पीछे तीन PNG तस्वीरें। यह कोई तीस पंक्तियों का कोड है, और इससे तीस साल पुराने फ़ॉर्मैट के लिए कोई लाइब्रेरी साथ रखने से बचा जा सकता है।
मेरी तस्वीर चौकोर नहीं है। तब क्या होता है?
औज़ार आपको चेता देता है और चुनाव आप पर छोड़ देता है। पूरी तस्वीर बिठाने पर आपका सारा चित्र बचा रहता है और चारों ओर हाशिये जुड़ जाते हैं: लोगो के लिए लगभग हमेशा यही सही चुनाव है, क्योंकि कुछ कटता नहीं। बीच से काटने पर पूरा चौकोर भर जाता है पर किनारे छँट जाते हैं, जो फ़ोटो पर फ़बता है और लोगो पर शायद ही कभी।
क्या आइकन अपनी पारदर्शिता सँभाल कर रखते हैं?
हाँ, दो को छोड़कर, और यह हमारा चुनाव नहीं है। iPhone की होम स्क्रीन वाला आइकन पारदर्शी हो तो iOS उसे काले पर बिठा देता है, और मास्क होने वाले आइकन को Android सिस्टम की शक्ल में काटता है, जिससे पारदर्शिता पर कुछ भी बन जाता है। इसलिए इन दोनों को सफ़ेद पृष्ठभूमि मिलती है, और आप इसे बंद कर सकते हैं। बाकी सब पारदर्शी ही रहते हैं।
एक तस्वीर डालिए। आपके हाथ में एक आर्काइव आती है जिसमें favicon.ico है, टैब के आइकन हैं, iPhone की होम स्क्रीन वाला आइकन है, इंस्टॉल होने वाले ऐप के आइकन हैं, और वे पंक्तियाँ भी जो आपको अपने पन्ने में चिपकानी हैं।
जाँचेंसबूत, कदम दर कदमनेटवर्क इंस्पेक्टर से जाँच, एक-एक हरकत समझाई हुई, तस्वीरों के साथ।
यह कोनातस्वीरों वाला कोनाएक फ़ोटो जितना दिखाती है, उससे ज़्यादा कहती है। यहाँ उसे देखा जाता है, साफ़ किया जाता है, हल्का किया जाता है, काटा जाता है, और जो किसी के मतलब का नहीं उसे धुँधला कर दिया जाता है।