नमस्ते दोस्तों! 🙏 स्वागत है The Easy Master पर!
App या extension बनाना आसान हिस्सा है। अटकते लोग आख़िर में हैं — जब publish करने बैठते हैं और store हर size अलग माँगता है, और कोई एक नियम तोड़ने पर चुपचाप reject कर देता है।
यहाँ तीनों के लिए अलग tools हैं, और तीनों आपके browser में ही चलते हैं — App Icon Generator (Android और iOS), Chrome Extension Icons, और website के लिए Favicon Generator।
पहले ये तय कीजिए कि आप क्या बना रहे हैं
ये सवाल बेवकूफ़ी भरा लगता है पर यहीं सबसे ज़्यादा गड़बड़ होती है। तीन अलग काम हैं, तीनों के नियम अलग हैं:
- Website — browser के tab में और “Add to Home Screen” करने पर दिखने वाला icon
- Android या iOS app — phone की home screen और store की listing
- Chrome extension — toolbar में, और Web Store की listing में
उलझन की एक बड़ी वजह ये है कि favicon वाली files के नाम धोखा देते हैं। android-chrome-192.png सुनने में Android app का icon लगता है — है नहीं। वो website का icon है, जो Android तब उठाता है जब कोई आपका page home screen पर लगाए। उसका app से कोई लेना-देना नहीं।
iOS: transparency डाली तो reject हो जाएगा
ये सबसे महँगी ग़लती है, क्योंकि पता तब चलता है जब app submit कर चुके होते हैं।
अगर आपके icon में कहीं भी आर-पार दिखने वाले pixels हैं — गोल logo के कोने, या PNG का ख़ाली background — तो App Store Connect उसे लौटा देता है: “Invalid large app icon. The large app icon in the asset catalog can’t be transparent nor contain an alpha channel.”
इसलिए iOS वाला icon हमेशा किसी ठोस रंग पर बैठाइए। हमारे tool में ये अपने आप होता है — आप रंग चुन लें, न चुनें तो सफ़ेद लग जाता है।
iOS को अब सिर्फ़ एक file चाहिए
पुराने tutorials अठारह अलग sizes बनवाते हैं — 20, 29, 40, 58, 60, 76, 80, 87, 120, 152, 167, 180… उनकी अब ज़रूरत नहीं।
Xcode 14 से नए asset catalog में एक 1024×1024 काफ़ी है। बाक़ी सारे sizes Xcode ख़ुद बना लेता है, और नए project में यही default है। अठारह files रखने का नुक़सान ये है कि उनमें से कोई एक ग़लत हुई तो ढूँढना मुश्किल हो जाता है।
Android: canvas 108dp का, पर बचता सिर्फ़ 66dp
Android 8 से launcher icon adaptive होता है — दो परतें, background और foreground। और phone बनाने वाला उन पर अपनी मनचाही शक्ल काटता है: Samsung कुछ और, Pixel कुछ और, OnePlus कुछ और।
Canvas 108dp का होता है, पर बीच का सिर्फ़ 66dp हिस्सा पक्का बचता है। बाहर का हिस्सा किसी भी phone पर कट सकता है।
इसका मतलब साफ़ है: logo को canvas के किनारे तक मत फैलाइए, वरना किसी phone पर उसका कोना कटा हुआ दिखेगा। हमारा tool logo को उसी 66dp के अंदर रखता है।
गोल icon चाहिए तो
Tool में Shape का विकल्प है — Square, Rounded corners, या Round।
Round चुनने पर Android के लिए ic_launcher_round.png भी बनती है। ये Android का अपना नाम है — जो launcher गोल mask लगाते हैं वो पहले यही ढूँढते हैं। इसे manifest में जोड़ना पड़ता है:
<application
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round" ... >एक बात ध्यान रखिए: shape सिर्फ़ वहीं लगती है जहाँ icon जैसा का तैसा दिखता है। iOS का icon, adaptive परत और Play Store का 512 — ये तीनों square ही रहते हैं, क्योंकि इन तीनों पर platform ख़ुद अपना mask लगाता है। पहले से गोल कर देंगे तो या तो logo दो बार कटेगा, या iOS में कोने transparent हो जाएँगे — और वही alpha है जिस पर Apple reject करता है।
Chrome extension: store वाला 128 अलग file है
यहाँ सबसे ज़्यादा लोग चूकते हैं, और reject नहीं होते — बस listing में भद्दे दिखते हैं।
Web Store 128×128 की image माँगता है, पर उसमें आपका logo सिर्फ़ 96×96 होना चाहिए — चारों तरफ़ 16 pixel ख़ाली। किनारे तक भरा हुआ 128 देंगे तो आपका icon listing में बाक़ी सबसे बड़ा दिखेगा, जैसे किसी ने जल्दबाज़ी में बनाया हो।
यानी manifest.json वाला 128 और store वाला 128 — दो अलग files हैं। Chrome Extension Icons दोनों बनाता है और साथ-साथ दिखाता भी है, ताकि फ़र्क़ ख़ुद दिख जाए।
Promo tiles — इनके बिना listing live नहीं होगी
- 440×280 — ज़रूरी है। इसके बिना extension publish ही नहीं होगा
- 1400×560 — optional, पर इसके बिना आपका extension कभी featured नहीं हो सकता
दोनों tool में बन जाते हैं — आपका icon चुने हुए रंग पर बीच में।
Screenshots आपको ख़ुद लेने पड़ेंगे। Store कम से कम एक माँगता है, 1280×800 का, और वो आपका extension चलता हुआ दिखाना चाहिए — वो कोई tool नहीं बना सकता।
कैसी तस्वीर से शुरू करें
- चौकोर PNG, 1024×1024 या उससे बड़ी। छोटी से शुरू करेंगे तो बड़े sizes धुँधले बनेंगे — और Play Store का 512 धुँधला हुआ तो वही सबसे पहले दिखता है।
- Logo में बारीक लकीरें और छोटा text मत रखिए। 16px पर वो ग़ायब हो जाते हैं। Icon दूर से पहचाना जाना चाहिए, पढ़ा नहीं।
- चौकोर न हो तो खींची नहीं जाएगी, बीच में रख दी जाएगी — चौड़े logo को चौकोर में ठूँसना icon बिगाड़ने का सबसे आम तरीक़ा है।
जो चाहिए वही बनाइए
दोनों tools में हर हिस्सा अलग tick होता है। सिर्फ़ Play Store की listing बदलनी है तो सिर्फ़ 512 चुनिए — दो files मिलेंगी, सोलह नहीं। ऊपर लिखा रहता है कि कितनी files बनेंगी।
हर ZIP में एक README.txt भी होती है, जिसमें लिखा है कौन सी file कहाँ जाती है। एक हफ़्ते बाद folder खोलेंगे तब वही काम आएगी।
आपका logo कहीं नहीं जाता
तीनों tools पूरा काम आपके ही browser में करते हैं। Logo इस website तक भी नहीं पहुँचता — जो ज़रूरी है, क्योंकि launch से पहले app का icon आम तौर पर गुप्त रखा जाता है।
छोटा सा सारांश
- Android या iOS app → App Icon Generator
- Chrome extension → Chrome Extension Icons
- Website → Favicon Generator, और विस्तार से Favicon कैसे बनाएँ
- iOS में transparency नहीं, Android में logo 66dp के अंदर, Chrome store वाला 128 padding के साथ
कोई दिक़्क़त आए या कोई और tool चाहिए हो, comment में बता दीजिए. 🙏
