फ़ाइल फ़ॉर्मैट
ICO क्या है? आइकन फ़ाइलें और फ़ेविकॉन, आसान भाषा में
ICO, Windows का आइकन फ़ॉर्मैट है जो एक ही फ़ाइल में कई साइज़ रखता है। हम इसकी संरचना, फ़ेविकॉन का इतिहास और आज आपको कौन-से साइज़ चाहिए, यह समझाते हैं।
लेखक: Hemen Dönüştür Editör Ekibiप्रकाशित: 8 मिनट में पढ़ें
ICO वह फ़ॉर्मैट है जिसे Windows प्रोग्राम और फ़ोल्डर के आइकन के लिए इस्तेमाल करता है, और वेब ब्राउज़र टैब में दिखने वाले छोटे साइट आइकन (फ़ेविकॉन) के लिए। दूसरे इमेज फ़ॉर्मैट से इसे अलग बनाने वाली बात यह है कि एक ही फ़ाइल में एक ही आइकन के कई साइज़ हो सकते हैं। यह लेख ICO फ़ाइल की अंदरूनी संरचना, Windows के संस्करणों के साथ इसके विकास, फ़ेविकॉन के इतिहास, आज ज़रूरी साइज़ और ICO फ़ाइलें सही ढंग से बनाने का तरीक़ा समझाता है।
ICO क्या है?
ICO (एक्सटेंशन .ico) एक कंटेनर फ़ॉर्मैट है जिसे Microsoft ने आइकन संसाधनों के लिए तय किया। ICO फ़ाइल एक "आइकन डायरेक्टरी" से शुरू होती है, जो फ़ाइल की हर इमेज (जैसे 16x16, 32x32 और 48x48 पिक्सेल) को अलग प्रविष्टि के रूप में दर्ज करती है। फिर Windows या ब्राउज़र वह साइज़ चुनता है जो आइकन दिखने की जगह के लिए सबसे उपयुक्त हो।
IANA में रजिस्टर आधिकारिक MIME टाइप image/vnd.microsoft.icon है, लेकिन Microsoft के सॉफ़्टवेयर और कई सर्वर आज भी image/x-icon इस्तेमाल करते हैं। माउस कर्सर के लिए CUR फ़ॉर्मैट लगभग एक जैसा है; यह डायरेक्टरी के टाइप फ़ील्ड में 1 की जगह 2 इस्तेमाल करता है और कर्सर का क्लिक बिंदु (हॉटस्पॉट) रखता है।
इतिहास: Windows आइकन से फ़ेविकॉन तक
- Windows 1.0: आइकन मोनोक्रोम थे।
- Windows 3.0: कई इमेज रखने वाली डायरेक्टरी-आधारित संरचना आई, जैसी हम आज जानते हैं।
- 1995: John Hornick के Microsoft लेख "Icons" ने ICO संरचना को विस्तार से दर्ज किया और डेवलपरों को कम से कम 16x16 (16 रंग), 32x32 (16 रंग) और 48x48 (256 रंग) इमेज शामिल करने की सलाह दी।
- मार्च 1999: Internet Explorer 5 फ़ेविकॉन सपोर्ट करने वाला पहला ब्राउज़र बना। साइट के रूट में रखी
favicon.icoफ़ाइल फ़ेवरिट और एड्रेस बार में दिखती थी। - Windows XP: 32-बिट इमेज में 8-बिट अल्फ़ा चैनल जोड़ा गया, जिससे मुलायम, अर्ध-पारदर्शी किनारे संभव हुए।
- Windows Vista: 256x256 इमेज और ICO के अंदर PNG कंप्रेशन जोड़े गए।
- 2003:
image/vnd.microsoft.iconMIME टाइप एक तीसरे पक्ष ने IANA को सौंपा।
ICO फ़ाइल की संरचना
आइकन डायरेक्टरी (ICONDIR)
फ़ाइल 6-बाइट के हेडर से शुरू होती है: एक आरक्षित फ़ील्ड (0), टाइप (आइकन के लिए 1, कर्सर के लिए 2) और इमेज की संख्या। इसके बाद हर इमेज के लिए 16-बाइट की एक डायरेक्टरी प्रविष्टि आती है।
डायरेक्टरी प्रविष्टि (ICONDIRENTRY)
| फ़ील्ड | मतलब |
|---|---|
| bWidth, bHeight | चौड़ाई और ऊँचाई (हर एक 1 बाइट)। 0 मान का मतलब 256 पिक्सेल है। |
| bColorCount | पैलेट के रंगों की संख्या (8 बिट और उससे ऊपर के लिए 0) |
| wPlanes, wBitCount | कलर प्लेन और हर पिक्सेल के बिट |
| dwBytesInRes | इमेज डेटा का बाइट में साइज़ |
| dwImageOffset | फ़ाइल में इमेज डेटा कहाँ से शुरू होता है |
साइज़ फ़ील्ड एक-एक बाइट के हैं, इसलिए ICO के अंदर की इमेज अधिकतम 256x256 पिक्सेल की हो सकती है।
इमेज डेटा: BMP या PNG
क्लासिक ICO में हर इमेज फ़ाइल हेडर के बिना एक BMP (यानी DIB) होती है। Hornick के लेख के अनुसार इसमें एक रंगीन इमेज (XOR मास्क) और उसके बाद 1-बिट का पारदर्शिता मास्क (AND मास्क) होता है, इसीलिए हेडर में दर्ज ऊँचाई दोनों मास्क की मिली-जुली ऊँचाई, यानी असली ऊँचाई की दोगुनी होती है। Windows XP से 32-बिट इमेज अपना अल्फ़ा चैनल सीधे पिक्सेल डेटा में रखती हैं।
Windows Vista से कोई प्रविष्टि BMP की जगह एक पूरी PNG फ़ाइल भी हो सकती है। PNG एम्बेड करने से, ख़ासकर 256x256 साइज़ के लिए, फ़ाइल काफ़ी छोटी हो जाती है। MDN बताता है कि ICO के अंदर PNG, Vista से पहले सपोर्ट नहीं था और पुराने सॉफ़्टवेयर में दिक़्क़त दे सकता है, लेकिन मौजूदा ब्राउज़र और Windows संस्करण दोनों तरह की प्रविष्टियाँ पढ़ते हैं।
आपको कौन-से साइज़ चाहिए?
Windows ऐप आइकन
ऐप आइकन पर Microsoft का मौजूदा मार्गदर्शन कहता है कि Win32 ऐप में कम से कम 16x16, 24x24, 32x32, 48x48 और 256x256 होने चाहिए। अगर Windows को ठीक-ठीक मेल खाता साइज़ न मिले, तो वह अगले बड़े साइज़ को छोटा कर लेता है; 256 पिक्सेल की इमेज मौजूद हो, तो आइकन हमेशा छोटा ही किया जाता है, कभी बड़ा नहीं। उदाहरण के लिए, 100% स्केल पर टाइटल बार और कॉन्टेक्स्ट मेन्यू 16 पिक्सेल और टास्कबार 24 पिक्सेल इस्तेमाल करते हैं; 200% पर ये 32 और 48 हो जाते हैं।
वेबसाइटों के लिए फ़ेविकॉन
वेब अलग तरह से काम करता है। HTML Standard के तहत, अगर पेज में कोई rel="icon" लिंक नहीं है, तो ब्राउज़र साइट के रूट से /favicon.ico माँग सकते हैं। इसलिए रूट में favicon.ico रखना आज भी अच्छा तरीक़ा है, लेकिन अकेले यह काफ़ी नहीं है:
- Google Search को कम से कम 8x8 पिक्सेल का चौकोर (1:1) फ़ेविकॉन चाहिए, और वह सुझाता है कि यह 48x48 से बड़ा हो ताकि अलग-अलग जगहों पर अच्छा दिखे।
- iPhone और iPad की होम स्क्रीन 180x180 का
apple-touch-iconइस्तेमाल करती है। - Android और PWA, वेब ऐप मैनिफ़ेस्ट में 192 और 512 पिक्सेल के आइकन, और अडैप्टिव आइकन के लिए एक "maskable" संस्करण चाहते हैं।
- मौजूदा ब्राउज़र SVG फ़ेविकॉन भी सपोर्ट करते हैं; एक ही वेक्टर फ़ाइल हर साइज़ संभाल लेती है।
व्यवहार में favicon.ico के अंदर 16, 32 और 48 पिक्सेल रखने से डेस्कटॉप ब्राउज़र और पुराने सिस्टम कवर हो जाते हैं, जबकि बड़े साइज़ अलग PNG फ़ाइलों के रूप में दिए जाते हैं।
सिस्टम, ब्राउज़र और सॉफ़्टवेयर में सपोर्ट
Windows, ICO को सीधे पढ़ता-लिखता है; Explorer, शॉर्टकट और डेस्कटॉप सभी इसके साथ काम करते हैं। MDN के अनुसार Chrome, Edge, Firefox, Opera और Safari, ICO फ़ाइलें दिखाते हैं। macOS ऐप आइकन के लिए अपना ICNS फ़ॉर्मैट इस्तेमाल करता है, लेकिन Preview, ICO खोल लेता है। GIMP जैसे एडिटर ICO को लेयर वाली फ़ाइल के रूप में खोलते हैं, हर साइज़ के लिए एक लेयर। MDN सामान्य वेब सामग्री में ICO से बचने की सलाह देता है और बताता है कि फ़ेविकॉन अब <link> एलिमेंट के साथ PNG की ओर बढ़ गए हैं।
खूबियाँ और कमज़ोरियाँ
| खूबियाँ | कमज़ोरियाँ |
|---|---|
| एक ही फ़ाइल में कई साइज़ और कलर डेप्थ | अधिकतम 256x256 पिक्सेल |
| Windows पर सार्वभौमिक सपोर्ट | फ़ेविकॉन के अलावा वेब पर कोई उपयोग नहीं |
| अल्फ़ा चैनल और PNG कंप्रेशन (Vista और उसके बाद) | पुरानी BMP-आधारित प्रविष्टियाँ बड़ी और भद्दी होती हैं |
| ब्राउज़र रूट में favicon.ico अपने-आप खोजते हैं | ख़ास टूल चाहिए; हर प्रोग्राम इसे नहीं लिख सकता |
आम समस्याएँ और उनके हल
क्या PNG का नाम बदलकर .ico करना काफ़ी नहीं?
कुछ ब्राउज़र इसे झेल लेते हैं, लेकिन यह असली ICO नहीं है: इसमें कोई आइकन डायरेक्टरी नहीं होती और Windows इसे आइकन के रूप में स्वीकार नहीं करेगा। सही तरीक़ा इमेज को असली ICO में बदलना है। हमारे PNG से ICO और JPG से ICO टूल हमेशा 16, 32 और 48 पिक्सेल के चौकोर लिखते हैं, और आपकी इमेज काफ़ी बड़ी हो तो 64, 128 और 256 भी जोड़ते हैं। हर साइज़ PNG के रूप में एम्बेड होता है, इसलिए पारदर्शिता बनी रहती है।
फ़ेविकॉन धुँधला है या पढ़ा नहीं जाता
16 पिक्सेल में पतली रेखाएँ और छोटा टेक्स्ट ग़ायब हो जाते हैं। मोटा, ऊँचे कंट्रास्ट वाला, सरल चिह्न इस्तेमाल करें; ज़रूरत हो, तो अपने लोगो का केवल प्रतीक वाला हिस्सा लें। कम से कम 256x256, बेहतर हो तो 512x512 पिक्सेल का चौकोर स्रोत सबसे अच्छा नतीजा देता है।
ग़ैर-चौकोर इमेज दबी या खिंची हुई दिखती है
आइकन चौकोर होते हैं। हमारे टूल इमेज को कभी नहीं खींचते: वे उसे अनुपात बनाए रखते हुए एक चौकोर के बीच में रखते हैं और किनारे पारदर्शी छोड़ देते हैं। बिल्कुल सही चौकोर के लिए पहले इमेज क्रॉप करें से एक चौकोर हिस्सा काट लें।
नया फ़ेविकॉन नहीं दिखता
ब्राउज़र फ़ेविकॉन को लंबे समय तक कैश में रखते हैं। फ़ाइल का नाम बदलने या वर्ज़न पैरामीटर जोड़ने (/favicon.ico?v=2), और यह जाँचने से कि सर्वर सही MIME टाइप लौटाता है, आमतौर पर बात बन जाती है। Google Search नतीजों का आइकन साइट के दोबारा क्रॉल होने के बाद ही अपडेट होता है।
Windows अब भी पुराना आइकन दिखाता है
Windows आइकन को एक अलग कैश में रखता है। ऐप को दोबारा बिल्ड करना और शॉर्टकट फिर से बनाना, या साइन आउट करके दोबारा साइन इन करना, अक्सर काफ़ी होता है।
कन्वर्ज़न के टिप्स
- वेबसाइट के लिए एक ICO काफ़ी नहीं: फ़ेविकॉन जनरेटर एक ही बार में favicon.ico (16, 32 और 48 पिक्सेल), favicon-48x48.png, apple-touch-icon.png (180 पिक्सेल), icon-192.png, icon-512.png, maskable icon-512-maskable.png और site.webmanifest बनाता है, और स्रोत SVG हो तो icon.svg भी। यह आपके पेज के
<head>में चिपकाने के लिए कोड का टुकड़ा भी देता है। - Apple आइकन को अपारदर्शी बैकग्राउंड चाहिए: iOS पारदर्शी हिस्सों को काला दिखाता है और कोने ख़ुद गोल करता है, इसलिए फ़ेविकॉन जनरेटर apple-touch-icon को आपके चुने बैकग्राउंड रंग से भरता है।
- अगर आपका लोगो SVG है: SVG से PNG से एक बड़ी PNG रेंडर करें और उसे ICO में बदलें, या SVG को सीधे फ़ेविकॉन जनरेटर को दें।
हमारे ICO और फ़ेविकॉन टूल आपके ब्राउज़र में चलते हैं; आपकी इमेज अपलोड नहीं होती और आपके डिवाइस से बाहर नहीं जाती।
अक्सर पूछे जाने वाले सवाल
ICO इमेज का अधिकतम साइज़ क्या है?
डायरेक्टरी प्रविष्टि में चौड़ाई और ऊँचाई के फ़ील्ड एक-एक बाइट के हैं, और 0 का मतलब 256 है। इसलिए ICO के अंदर एक इमेज अधिकतम 256x256 पिक्सेल की होती है।
फ़ेविकॉन के लिए ICO इस्तेमाल करूँ या PNG?
दोनों। 16, 32 और 48 पिक्सेल वाली रूट favicon.ico पुराने ब्राउज़र और अपने-आप होने वाले अनुरोधों के लिए है; मौजूदा ब्राउज़र और मोबाइल डिवाइस के लिए PNG (और चाहें तो SVG) आइकन <link> टैग से घोषित करें।
क्या ICO पारदर्शिता सपोर्ट करता है?
हाँ। पुराने ICO 1-बिट मास्क इस्तेमाल करते हैं, Windows XP से 32-बिट इमेज में पूरा अल्फ़ा चैनल है, और Vista से एम्बेड की गई PNG पारदर्शिता रखती आई है।
ICO फ़ाइल को PNG में कैसे बदलें?
अपनी ICO को इमेज कन्वर्टर में जोड़ें और लक्ष्य के रूप में PNG चुनें। अगर फ़ाइल में कई साइज़ हैं, तो सबसे बड़ा इस्तेमाल होता है।
क्या Mac पर ICO फ़ाइलें इस्तेमाल होती हैं?
macOS ऐप आइकन के लिए ICNS फ़ॉर्मैट इस्तेमाल करता है। वेबसाइटों के लिए favicon.ico और PNG आइकन हर ऑपरेटिंग सिस्टम के ब्राउज़र में काम करते हैं।
