हर आकार में काम करने वाली स्रोत छवि तैयार करें
एक अच्छा ऐप आइकन छोटे 16 × 16 ब्राउज़र favicon से लेकर बड़े 512 × 512 स्टोर लिस्टिंग छवि तक पहचानने योग्य रहना चाहिए। एक वर्गाकार स्रोत छवि से शुरू करें, preferably 1024 × 1024 पिक्सेल या अधिक, केंद्र में एक साधारण, उच्च-कंट्रास्ट मार्क के साथ।
छोटे टेक्स्ट, पतले आउटलाइन और केवल बड़े आकार में काम करने वाले विज़ुअल विवरणों से बचें। जब ब्राउज़र या ऑपरेटिंग सिस्टम आपके आइकन को छोटे आयामों में रेंडर करता है तो वे अक्सर गायब हो जाते हैं। यदि आपका लोगो आयताकार है, तो उसे खींचने के बजाय पहले एक वर्गाकार कैनवास पर रखें।
- जब आपके मूल आर्टवर्क में पारदर्शिता या तेज़ लोगो किनारे शामिल हों तो PNG का उपयोग करें।
- मुख्य मार्क को केंद्रित रखें और उसके चारों ओर पर्याप्त दृश्य स्थान छोड़ें।
- यदि आपको iOS आउटपुट भी चाहिए तो एक ठोस पृष्ठभूमि रंग का उपयोग करें।
- अंतिम पैकेज डाउनलोड करने से पहले सबसे छोटे favicon आकार का पूर्वावलोकन करें।
वेब Favicons, Apple Touch आइकन और PWA Manifest आइकन
Web/PWA एक्सपोर्ट पब्लिक फ़ोल्डर में आमतौर पर आवश्यक ब्राउज़र और इंस्टॉलेबल वेब-ऐप संसाधनों को कवर करता है। इसमें आधुनिक ब्राउज़र के लिए PNG favicon आकार, व्यापक विरासत संगतता के लिए वैकल्पिक favicon.ico, और iOS होम स्क्रीन बुकमार्क के लिए Apple touch आइकन शामिल है।
इंस्टॉलेबल PWAs के लिए, पैकेज में 192 × 192 और 512 × 512 manifest आइकन भी शामिल हैं। जब आप मास्केबल विकल्प सक्षम करते हैं, तो यह एक आइकन जोड़ता है जो डिवाइस द्वारा अपना आइकन आकार लागू करने पर महत्वपूर्ण आर्टवर्क को बनाए रखने के लिए डिज़ाइन किया गया है।
Manifest सेटअप शामिल है, PWA कार्यान्वयन नहीं
उत्पन्न site.webmanifest और head टैग स्निपेट आइकन सेटअप को तेज़ करते हैं। आपके ऐप को अभी भी उचित service worker और इंस्टॉलेबिलिटी आवश्यकताओं सहित शेष PWA कॉन्फ़िगरेशन की आवश्यकता है।
Android लॉन्चर और अनुकूली आइकन संसाधन
Android डिवाइस घनत्व-विशिष्ट लॉन्चर संसाधन का उपयोग करते हैं ताकि ऑपरेटिंग सिस्टम प्रत्येक स्क्रीन घनत्व के लिए उपयुक्त छवि का चयन कर सके। Android एक्सपोर्ट इन फ़ाइलों को सामान्य res/mipmap-* निर्देशिकाओं में व्यवस्थित करता है और इसमें गोल लॉन्चर वेरिएंट और 512 × 512 Play Store लिस्टिंग आइकन शामिल हो सकते हैं।
अनुकूली आइकन XML परिभाषाओं के माध्यम से अग्रभूमि और पृष्ठभूमि लेयर्स को संयोजित करने वाले नेटिव Android लॉन्चर संसाधन हैं। सिंगल-इमेज मोड में, यह जनरेटर आपकी स्रोत छवि और चयनित पृष्ठभूमि रंग से संगत व्युत्पन्न संसाधन बनाता है।
महत्वपूर्ण: अनुकूली आइकन स्वचालित आर्टवर्क पृथक्करण नहीं हैं
एकल फ्लैट छवि को विश्वसनीय रूप से वास्तव में संपादन योग्य लोगो अग्रभूमि और स्वतंत्र पृष्ठभूमि लेयर में विभाजित नहीं किया जा सकता। सर्वोत्तम परिणाम के लिए लोगो को केंद्रित रखें और उदार पैडिंग छोड़ें। बिल्कुल ब्रांड-परफेक्ट अनुकूली आइकन के लिए, अपने Android प्रोजेक्ट में अलग से डिज़ाइन की गई अग्रभूमि और पृष्ठभूमि आर्टवर्क का उपयोग करें।
Xcode के लिए iOS AppIcon.appiconset
iOS एक्सपोर्ट Xcode asset catalog के लिए डिज़ाइन किया गया AppIcon.appiconset फ़ोल्डर बनाता है। इसमें iPhone, iPad और App Store के लिए आवश्यक इमेज वेरिएंट शामिल हैं, साथ ही Contents.json फ़ाइल जो प्रत्येक जनरेट की गई छवि को इसके अपेक्षित idiom, पॉइंट आकार और स्केल से मैप करती है।
iOS ऐप आइकन चयनित पृष्ठभूमि रंग पर फ्लैट किए जाते हैं। यह पारदर्शी आइकन आउटपुट से बचता है और जनरेट की गई asset सेट को मानक App Store आइकन आवश्यकताओं के साथ संरेखित रखता है।
- अपने आर्टवर्क को पहले से राउंड न करें; iOS अपना स्वयं का आइकन मास्क लागू करता है।
- ऐसे पृष्ठभूमि रंग का उपयोग करें जो आपकी उत्पाद पहचान से मेल खाता हो।
- AppIcon.appiconset को Assets.xcassets में खींचें, फिर इसे लक्ष्य ऐप आइकन सेट के रूप में चुनें।
- बिल्ड जमा करने से पहले Xcode में जनरेट की गई आइकन की समीक्षा करें।
मास्केबल PWA आइकन बनाम Android अनुकूली आइकन
ये दो शब्द आसानी से भ्रमित हो सकते हैं क्योंकि दोनों सिस्टम-नियंत्रित आइकन आकार से संबंधित हैं। हालांकि, वे विनिमेय नहीं हैं।
एक मास्केबल आइकन एक वेब ऐप manifest इमेज फ़ाइल है जो इंस्टॉल की गई PWAs को लॉन्चर मास्क के लिए अतिरिक्त सुरक्षित स्थान देती है। एक Android अनुकूली आइकन एक नेटिव Android संसाधन है जो अग्रभूमि और पृष्ठभूमि लेयर्स और XML संदर्भों से बना है। जब आप एक PWA और एक नेटिव Android ऐप दोनों शिप करते हैं तो दोनों को सक्षम करें, लेकिन प्रत्येक फ़ाइल प्रकार का उपयोग अपनी स्वयं की प्लेटफ़ॉर्म सेटअप में करें।
आपकी स्रोत छवि आपके ब्राउज़र में रहती है
यह दृश्य ब्राउज़र-आधारित इमेज प्रोसेसिंग के लिए डिज़ाइन किया गया है। स्रोत छवि को रिमोट इमेज-प्रोसेसिंग सर्वर पर अपलोड करने के बजाय ब्राउज़र में स्थानीय रूप से परिवर्तित किया जाता है, जो तब उपयोगी होता है जब आप अनरिलीज़्ड प्रोडक्ट आर्टवर्क, क्लाइंट लोगो या आंतरिक ऐप संसाधन तैयार कर रहे होते हैं।
पृष्ठ स्वयं अभी भी वेबसाइट से एप्लिकेशन कोड और प्रोसेसिंग संसाधन लोड करता है। स्थानीय प्रोसेसिंग का अर्थ है कि इमेज डेटा को सर्वर-साइड कन्वर्जन के लिए भेजने की आवश्यकता नहीं है।
