Maskable आइकन क्या होता है
जब कोई वेब ऐप इंस्टॉल करता है, तो लॉन्चर उसका आइकन अपने आकार में दिखाता है: किसी फ़ोन पर गोला, किसी दूसरे पर गोल कोनों वाला चौकोर या बूंद जैसा आकार। ट्रांसपेरेंट बैकग्राउंड वाला आम आइकन उस आकार में कैसे बिठाया जाए, यह प्लैटफ़ॉर्म तय करता है। Maskable आइकन काटे जाने के लिए ही बना होता है: वह पूरे चौकोर को अपने बैकग्राउंड से भरता है, ताकि लॉन्चर जो भी आकार काटे, वह एक पूरा, रंगीन आइकन हो।
वेब ऐप मैनिफ़ेस्ट यह फ़र्क हर आइकन के purpose मेंबर से बताता है। W3C स्पेसिफ़िकेशन तीन purpose बताता है, any, maskable और monochrome, और जिस आइकन में purpose नहीं होता वह any माना जाता है।
सेफ़ ज़ोन: 40 % रेडियस वाला गोला
स्पेसिफ़िकेशन बताता है कि आर्टवर्क किसी भी मास्क से कहां सुरक्षित रहता है: “a circle with center point in the center of the icon and with a radius of 2/5 (40%) of the icon size”, यानी आइकन के बीच में केंद्र वाला गोला, जिसका रेडियस आइकन के साइज़ का 2/5 (40%) हो। 512 px के आइकन पर यह बीच में 410 px चौड़ा गोला है। MDN इसी ज़ोन को ऐसा गोला बताता है जिसका व्यास आइकन का 80 % है, और web.dev चेतावनी देता है कि बाहरी किनारा, हर तरफ़ लगभग 10 %, कट सकता है।
तस्वीर में नीचे वाले उदाहरण पैकेज का maskable आइकन है। पहली कॉपी पर सेफ़ ज़ोन बना है; बाकी तीन वही फ़ाइल हैं, गोल, गोल कोनों वाले चौकोर और बूंद जैसे मास्क के नीचे। क्योंकि मार्क गोले के अंदर रहता है, हर मास्क उसे पूरा छोड़ता है, और सिर्फ़ बैकग्राउंड का आकार बदलता है।
Favicon जेनरेटर आर्टवर्क को ही गोले के अंदर बिठाता है, उसके बाउंडिंग बॉक्स को नहीं, आपकी चुनी पैडिंग घटाकर। इसलिए गोल मार्क लगभग पूरे सेफ़ ज़ोन को भर सकता है, जबकि चौकोर फोटो छोटी रह जाती है, क्योंकि उसके कोने भी गोले के अंदर आने चाहिए।
Purpose any या maskable: दो फ़ाइलें क्यों
कोई आइकन "purpose": "any maskable" लिख सकता है, और web.dev का मैनिफ़ेस्ट वाला लेख यही तरीका इस्तेमाल करता है। लेकिन web.dev का अपना maskable आइकन वाला लेख इसके ख़िलाफ़ सलाह देता है: मास्क के लिए पैडिंग वाला आइकन वहां बहुत छोटा दिखता है जहां वह बिना मास्क के दिखाया जाता है। स्रोत एकमत नहीं हैं, और दो फ़ाइलें इस समझौते से बचाती हैं। any आइकन अपनी ट्रांसपेरेंसी रखता है और उसका आर्टवर्क चौकोर को भरता है; maskable आइकन में किनारे तक बैकग्राउंड होता है और आर्टवर्क सेफ़ ज़ोन के अंदर।
| Purpose | बैकग्राउंड | आर्टवर्क | कहां दिखता है |
|---|---|---|---|
any |
ट्रांसपेरेंट | पैडिंग घटाकर चौकोर को भरता है | जहां भी आइकन बिना कटे दिखाया जाता है |
maskable |
आपका बैकग्राउंड रंग, किनारे से किनारे तक | 40 % वाले गोले के अंदर | वे लॉन्चर जो आइकन को किसी आकार में काटते हैं |
दोनों तरह के आइकन वाला मैनिफ़ेस्ट
यह उदाहरण पैकेज की site.webmanifest है। आइकन के पाथ रिलेटिव हैं: स्पेसिफ़िकेशन src को, start_url की तरह, मैनिफ़ेस्ट के अपने URL के हिसाब से पढ़ता है, इसलिए जब तक आइकन मैनिफ़ेस्ट के बगल में हैं, वे किसी भी फ़ोल्डर से काम करते हैं।
{
"name": "png2svg.art",
"short_name": "png2svg",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-maskable-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0a2d8f",
"background_color": "#e8efff",
"display": "standalone",
"start_url": "/"
}
हर पेज से इसे <link rel="manifest" href="/site.webmanifest"> से लिंक करें। स्पेसिफ़िकेशन .webmanifest को रजिस्टर्ड फ़ाइल एक्सटेंशन बताता है और इसे application/manifest+json के रूप में देने की सलाह देता है, हालांकि कोई भी JSON टाइप चलता है।
साइज़ यूं ही नहीं चुने गए। सितंबर 2026 में अपडेट हुई MDN की इंस्टॉल वाली गाइड कहती है कि, दूसरी शर्तों के साथ, Chromium ब्राउज़र वेब ऐप तभी इंस्टॉल करते हैं जब उसके मैनिफ़ेस्ट में name या short name, start_url, display मोड और 192 व 512 px के आइकन हों, और साइट HTTPS पर चल रही हो। Safari अलग तरह से काम करता है: WebKit टीम ने Safari 26 के लिए लिखा कि इंस्टॉल करने की कोई शर्त नहीं है, और साइट मैनिफ़ेस्ट आइकन दे तो वही इस्तेमाल होते हैं। MDN यह भी सुझाता है कि कम से कम 1,024 px चौकोर आर्टवर्क से शुरू करें; 512 px तक बड़ा किया गया छोटा बिटमैप नई डिटेल नहीं पा सकता।
Maskable आइकन कैसे टेस्ट करें
Chrome में DevTools खोलें, Application → Manifest पर जाएं, और Show only the minimum safe area for maskable icons पर टिक करें। तब आइकन वाला हिस्सा हर maskable आइकन को सेफ़ ज़ोन तक कटा हुआ दिखाता है: अगर वहां कोई ज़रूरी चीज़ गायब है, तो लॉन्चर भी उसे काट सकता है। Chrome का डॉक्यूमेंटेशन इस ऑप्शन के बारे में बताता है। web.dev, Maskable.app की ओर भी इशारा करता है, जो एक थर्ड-पार्टी साइट है जहां आप किसी आइकन को कई मास्क के नीचे देख सकते हैं। आखिरी जांच असली फ़ोन पर इंस्टॉल किया गया ऐप है।
डाउनलोड करने के लिए एक असली उदाहरण
ऊपर के आइकन इस साइट के अपने मार्क (एक कमिट किया हुआ SVG, किसी का अपलोड नहीं) पर favicon जेनरेटर के एक रन से बने हैं, 8 % पैडिंग और #e8efff बैकग्राउंड के साथ। टूल ठीक यही फ़ाइलें बनाता है। हर फ़ाइल और उसकी README देखने के लिए उदाहरण पैकेज (ZIP) डाउनलोड करें। उसी पैकेज के ब्राउज़र टैब वाले हिस्से के लिए SVG, PNG या ICO favicon: कौन-सा चुनें पढ़ें।