ऐप आइकन बनाम फेविकॉन: ICO बनाम PNG और हर प्लेटफ़ॉर्म की अपेक्षाएँ
हर प्लेटफ़ॉर्म के लिए सही आइकन फ़ॉर्मेट चुनने की स्पष्ट गाइड
मल्टी-साइज़ ICO बनाएँआधुनिक सॉफ़्टवेयर में आइकन हर जगह मौजूद हैं — ब्राउज़र टैब की छोटी छवि से लेकर फ़ोन की होम स्क्रीन पर बड़े वर्गाकार आइकन तक। ऊपर से देखने में ये एक जैसे लग सकते हैं, लेकिन ये आइकन अलग-अलग उद्देश्यों की पूर्ति करते हैं, अलग-अलग फ़ॉर्मेट नियमों का पालन करते हैं, और बिलकुल भिन्न संदर्भों में प्रदर्शित होते हैं। इन्हें मिला देना या गलत फ़ॉर्मेट का उपयोग करना धुंधले टैब, गायब बुकमार्क आइकन, या ऐप स्टोर द्वारा अस्वीकृति का कारण बनता है।
दो सबसे आम श्रेणियाँ हैं फेविकॉन और ऐप आइकन। फेविकॉन ("favorite icon" का संक्षिप्त रूप) वह छोटी छवि है जो ब्राउज़र टैब, बुकमार्क सूचियों और ब्राउज़र इतिहास में दिखाई देती है। ऐप आइकन वह छवि है जो डेस्कटॉप या मोबाइल ऑपरेटिंग सिस्टम पर किसी नेटिव एप्लिकेशन का प्रतिनिधित्व करती है। दोनों इमेज फ़ाइलों के रूप में शुरू होते हैं, लेकिन फ़ॉर्मेट आवश्यकताओं, साइज़ अपेक्षाओं और प्लेटफ़ॉर्म द्वारा उन्हें खोजने एवं उपयोग करने के तरीके में भिन्न हैं।
यह लेख बताता है कि प्रत्येक प्रकार का आइकन क्या है, ICO फ़ॉर्मेट बनाम PNG कब उपयोग करना चाहिए, और प्रमुख प्लेटफ़ॉर्म वास्तव में क्या अपेक्षा रखते हैं। चाहे आप कोई वेबसाइट बना रहे हों, डेस्कटॉप एप्लिकेशन पैकेज कर रहे हों, या मोबाइल ऐप शिप कर रहे हों — आपको ठीक-ठीक पता होगा कि कौन सा फ़ॉर्मेट और कौन से साइज़ प्रदान करने हैं।
फेविकॉन क्या है?
फेविकॉन वह आइकन है जो वेब ब्राउज़र आपकी वेबसाइट के साथ प्रदर्शित करता है। आप इसे पेज टाइटल के बगल में ब्राउज़र टैब में, अपनी बुकमार्क सूची में, ब्राउज़र इतिहास में, और कभी-कभी एड्रेस बार या खोज परिणामों में देखते हैं। यह शब्द Internet Explorer के मूल कार्यान्वयन से आया है, जो हर वेबसाइट की रूट डायरेक्टरी में favicon.ico नामक फ़ाइल की तलाश करता था।
ऐतिहासिक रूप से, फेविकॉन को ICO फ़ॉर्मेट में होना ज़रूरी था। Internet Explorer को इसकी आवश्यकता थी, और कोई विकल्प नहीं था। ICO फ़ॉर्मेट की एक ही फ़ाइल में कई साइज़ एम्बेड करने की क्षमता ने इसे व्यावहारिक विकल्प बनाया: एक फ़ाइल टैब के लिए 16x16 छवि और बुकमार्क बार के लिए 32x32 छवि दोनों प्रदान कर सकती थी। आधुनिक ब्राउज़र (Chrome, Firefox, Safari, Edge) अब पेज HTML में <link> टैग के माध्यम से निर्दिष्ट PNG फेविकॉन भी स्वीकार करते हैं, लेकिन यदि कोई स्पष्ट link टैग मौजूद नहीं है तो वे अभी भी /favicon.ico पर फ़ॉलबैक करते हैं।
सभी ब्राउज़रों में अधिकतम संगतता के लिए, जिसमें पुराने संस्करण और क्रॉलर शामिल हैं, आपकी वेबसाइट रूट पर favicon.ico फ़ाइल प्रदान करना अभी भी सबसे सुरक्षित तरीका है। इस ICO फ़ाइल में कम से कम 16x16 और 32x32 साइज़ होने चाहिए। कई डेवलपर उच्च-DPI ब्राउज़र टैब के लिए 48x48 भी शामिल करते हैं। आप इसे PNG link टैग से पूरक कर सकते हैं उन प्लेटफ़ॉर्म के लिए जो उन्हें पसंद करते हैं, लेकिन ICO फ़ाइल आपके सुरक्षा जाल के रूप में काम करती है।
ऐप आइकन क्या है?
ऐप आइकन किसी ऑपरेटिंग सिस्टम के इंटरफ़ेस में एक नेटिव एप्लिकेशन का प्रतिनिधित्व करता है। Windows पर, यह डेस्कटॉप, टास्कबार, स्टार्ट मेन्यू और ALT+TAB स्विचर में दिखाई देता है। macOS पर, यह डॉक, लॉन्चपैड और Finder में दिखता है। iOS और Android पर, यह होम स्क्रीन और ऐप ड्रॉअर में जगह लेता है। प्रत्येक प्लेटफ़ॉर्म की अपनी फ़ॉर्मेट आवश्यकताएँ और साइज़ विनिर्देश हैं।
Windows एप्लिकेशन आइकन के लिए ICO फ़ॉर्मेट का उपयोग करता है। एक Windows एक्ज़ीक्यूटेबल (.exe) एक ICO रिसोर्स एम्बेड करती है जिसे ऑपरेटिंग सिस्टम पढ़ता और प्रदर्शित करता है। इस ICO में हर डिस्प्ले संदर्भ और DPI स्केलिंग स्तर को कवर करने के लिए 16, 32, 48, 64, 128 और 256 पिक्सेल पर लेयर होनी चाहिए। शॉर्टकट (.lnk फ़ाइलें) बाहरी ICO फ़ाइलों को भी संदर्भित कर सकते हैं।
macOS ICNS फ़ॉर्मेट का उपयोग करता है, जो Apple का मल्टी-रेज़ोल्यूशन आइकन कंटेनर है। ICNS फ़ाइलों में 1024x1024 पिक्सेल तक के साइज़ हो सकते हैं। स्रोत छवियाँ आमतौर पर PNG होती हैं जो बिल्ड प्रक्रिया के दौरान ICNS बंडल में संकलित हो जाती हैं।
iOS को विशिष्ट साइज़ में PNG छवियों की आवश्यकता होती है (2x और 3x पर 60x60, साथ ही iPad, Spotlight और Settings के लिए भिन्नताएँ)। Apple iOS ऐप आइकन के लिए ICO या ICNS का उपयोग नहीं करता। छवियाँ ऐप बंडल के एसेट कैटलॉग में सामान्य PNG के रूप में शामिल की जाती हैं।
Android भी PNG का उपयोग करता है, आमतौर पर कई डेंसिटी (mdpi से xxxhdpi) पर अडैप्टिव आइकन लेयर (फ़ोरग्राउंड और बैकग्राउंड) के रूप में प्रदान किया जाता है। Play Store आइकन 512x512 PNG होता है।
वेब ऐप्स (PWA) manifest.json फ़ाइल में संदर्भित PNG आइकन का उपयोग करते हैं। सामान्य साइज़ 192x192 और 512x512 हैं। जब कोई उपयोगकर्ता PWA इंस्टॉल करता है तो ये आइकन होम स्क्रीन पर दिखाई देते हैं।
ICO बनाम PNG: कौन सा फ़ॉर्मेट कब इस्तेमाल करें
ICO और PNG दोनों का आइकन के लिए उपयोग होने से, स्वाभाविक सवाल है: आपको कौन सा चुनना चाहिए? उत्तर पूरी तरह से इस पर निर्भर करता है कि आइकन कहाँ उपयोग होगा। यहाँ एक निर्णय तालिका है जो सबसे सामान्य परिदृश्यों को कवर करती है।
| उपयोग का मामला | अनुशंसित फ़ॉर्मेट | क्यों |
|---|---|---|
| वेबसाइट फेविकॉन (रूट फ़ाइल) | ICO | सभी ब्राउज़रों में सार्वभौमिक फ़ॉलबैक; एक फ़ाइल में कई साइज़ |
| वेबसाइट फेविकॉन (link टैग) | PNG (ICO फ़ॉलबैक के साथ) | आधुनिक ब्राउज़र PNG पसंद करते हैं; ICO पुराने ब्राउज़रों को कवर करता है |
| Windows एप्लिकेशन आइकन | ICO | एक्ज़ीक्यूटेबल और शॉर्टकट के लिए Windows द्वारा आवश्यक |
| macOS एप्लिकेशन आइकन | ICNS (PNG स्रोतों से) | macOS द्वारा आवश्यक; PNG स्रोत छवियों से बनाया जाता है |
| iOS ऐप आइकन | PNG | Apple द्वारा आवश्यक; प्रत्येक संदर्भ के लिए विशिष्ट साइज़ |
| Android ऐप आइकन | PNG | Android द्वारा आवश्यक; अडैप्टिव आइकन लेयर |
| PWA होम स्क्रीन आइकन | PNG | manifest.json में संदर्भित; 192 और 512 साइज़ |
| Electron/डेस्कटॉप ऐप | ICO (Windows) + ICNS (macOS) + PNG (Linux) | प्रत्येक OS को अपने फ़ॉर्मेट की आवश्यकता होती है |
व्यवहार में, अधिकांश प्रोजेक्ट्स को दोनों — एक ICO फ़ाइल (वेबसाइट फेविकॉन और किसी भी Windows लक्ष्य के लिए) और PNG फ़ाइलों का एक सेट (मोबाइल प्लेटफ़ॉर्म, PWA और macOS स्रोत छवियों के लिए) — की आवश्यकता होती है। ICO फ़ाइल उन संदर्भों को संभालती है जहाँ ICO आवश्यक या पसंदीदा है, जबकि PNG बाकी सब कुछ कवर करता है। आप अन्य प्लेटफ़ॉर्म के लिए उपयोग किए जाने वाले उसी स्रोत PNG से Any2ICO के साथ ICO भाग बना सकते हैं, जिससे आपका आइकन हर जगह दृश्य रूप से सुसंगत रहे।
व्यावहारिक सलाह और सामान्य गलतियाँ
विभिन्न प्लेटफ़ॉर्म पर आइकन सही करने के लिए कुछ ऐसी बारीकियों पर ध्यान देना ज़रूरी है जिन्हें अनदेखा करना आसान है। यहाँ वे गलतियाँ हैं जो डेवलपर अक्सर करते हैं, साथ ही सीधे-सादे समाधान।
सब कुछ के लिए एक ही PNG पर निर्भर रहना: एक अकेला 512x512 PNG कुछ संदर्भों में काम करेगा लेकिन दूसरों में विफल होगा। /favicon.ico खोजने वाले ब्राउज़र इसे नहीं पाएँगे। Windows एक्ज़ीक्यूटेबल अपने आइकन रिसोर्स के रूप में PNG एम्बेड नहीं कर सकते। फेविकॉन और Windows उपयोग के मामलों के लिए हमेशा एक समर्पित ICO फ़ाइल बनाएँ, भले ही PNG आपका प्राथमिक स्रोत फ़ॉर्मेट हो।
ICO फ़ाइल में केवल एक साइज़ का उपयोग करना: केवल 32x32 वाली ICO फ़ाइल ब्राउज़र टैब में ठीक दिखती है लेकिन Windows Explorer के बड़े आइकन व्यू में धुंधले ब्लॉब में बदल जाती है। हमेशा कई साइज़ शामिल करें। पूरा सेट (16 से 256 तक) सुनिश्चित करता है कि हर डिस्प्ले संदर्भ के पास ड्रॉ करने के लिए पिक्सेल-परफ़ेक्ट लेयर हो।
उच्च-DPI और Retina डिस्प्ले को भूलना: आधुनिक स्क्रीन मानक डिस्प्ले की तुलना में दो से तीन गुना अधिक पिक्सेल पैक करती हैं। 1080p मॉनिटर पर ठीक दिखने वाला 16x16 फेविकॉन Retina डिस्प्ले पर छोटा और धुंधला दिखता है। 32x32 लेयर शामिल करें (जिसे ब्राउज़र 16px टैब स्लॉट के लिए 2x स्केलिंग पर उपयोग करते हैं) और 3x स्केलिंग या उच्च-DPI टैब के लिए 48x48 लेयर।
विभिन्न प्लेटफ़ॉर्म पर परीक्षण न करना: आपकी विकास मशीन पर परफ़ेक्ट दिखने वाला आइकन किसी अन्य OS या ब्राउज़र पर बिलकुल अलग दिख सकता है। अपने फेविकॉन का कम से कम Chrome, Firefox, Safari और Edge में परीक्षण करें। यदि आप डेस्कटॉप ऐप बना रहे हैं, तो Windows पर 100%, 150% और 200% DPI स्केलिंग पर ICO का परीक्षण करें। कुछ मिनट का परीक्षण घंटों की उपयोगकर्ता शिकायतों से बचाता है।
ICO फ़ॉर्मेट और इसकी संरचना पर गहन जानकारी के लिए, या विशेष रूप से फेविकॉन बनाने में मदद के लिए, हमारी फेविकॉन निर्माण गाइड देखें।