App Icon: यह Favicon से कैसे अलग है
App icon वह image है जो home screen, launcher, dock या app switcher पर इंस्टॉल किए गए app को दर्शाती है, जबकि favicon browser के अंदर एक साइट को दर्शाता है। वेब पर वही artwork दोनों की सेवा करता है: iOS app icon को apple-touch-icon link tag से लेता है, जबकि Android और desktop PWAs इसे web app manifest के icons array से लेते हैं। हर platform इसे अपने आकार के हिसाब से crop और mask करता है, इसलिए artwork को उससे बच निकलने के लिए बनाया जाना चाहिए।
वही artwork, अलग काम
Favicon browser chrome के अंदर रहता है, 16 से 32 pixel पर, एक page title के पास जो ज़्यादातर अर्थ ढोता है। App icon home screen पर 100 pixel या उससे अधिक पर रहता है, अपने दम पर, दर्जनों प्रतिस्पर्धियों के बीच, और वही एकमात्र चीज़ है जो आपकी पहचान कराती है। इसे ज़्यादा जगह और ज़्यादा पड़ताल मिलती है।
व्यावहारिक फ़र्क़ यह है कि platform इसे कहाँ से पढ़ता है और बाद में इसके साथ क्या करता है। Browsers favicon को जैसा दिया गया वैसा ही बनाते हैं। Operating systems app icons को एक आकार में crop करते हैं, एक shadow जोड़ते हैं, और कभी-कभी उन्हें tint या dim करते हैं, इसलिए canvas के किनारे तक फैलने वाला mark cut हो जाता है।
हर platform app icon को कहाँ से पढ़ता है
| Platform | स्रोत | भेजने का size |
|---|---|---|
| iOS / iPadOS | link rel="apple-touch-icon" | 180x180 PNG, अपारदर्शी |
| Android | Manifest icons array | 192x192 और 512x512 PNG |
| Desktop PWA | Manifest icons array | 512x512 PNG |
| Android launcher shape mask | purpose maskable वाली Manifest entry | 512x512 PNG, 80% safe zone |
| Windows shortcut | favicon.ico | 48x48 entry |
दो घोषणाएँ जो मायने रखती हैं
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">iOS पहली पढ़ता है, Android और desktop PWAs दूसरी में रेफ़र की गई फ़ाइल के icons array को पढ़ते हैं। दोनों मिलकर हर इंस्टॉल-किए-गए-app वाले surface को कवर करते हैं।
App icon FAQ
क्या मुझे app icon और favicon के लिए अलग-अलग artwork चाहिए?
आमतौर पर अलग artwork नहीं, पर अक्सर एक अलग treatment। App icon को एक भरा हुआ background और उदार padding चाहिए; favicon को mark जितना संभव हो उतना बड़ा और सरल चाहिए। वही logo, दो exports।
मेरा home screen आइकन एक screenshot जैसा क्यों दिखता है?
जब iOS को कोई apple-touch-icon link और साइट root पर कोई /apple-touch-icon.png न मिले तो वह page के screenshot पर fall back कर जाता है। इनमें से कोई भी जोड़ने से ठीक हो जाता है, हालाँकि shortcut दोबारा जोड़ने तक पुराना आइकन बना रह सकता है।
स्रोत artwork किस size का होना चाहिए?
1024x1024 या उससे बड़ा, चौकोर, कोई rounded corner पहले से बना हुआ नहीं। हर platform size उससे साफ़-सुथरे नीचे स्केल होती है, और platforms अपने कोने के आकार लगाते हैं।