Apple Touch Icon: Size, Tag और iOS का व्यवहार
Apple touch icon वह image है जिसे iOS तब इस्तेमाल करता है जब कोई Safari से आपकी साइट को Home Screen में जोड़ता है। आप इसे /apple-touch-icon.png पर एक अकेली 180x180 PNG के रूप में भेजते हैं और rel="apple-touch-icon" वाले link tag से उस पर इशारा करते हैं। iOS उस image की transparency को अनदेखा करता है और उसे काले पर composite करता है, इसलिए इसे एक अपारदर्शी background दें, और rounded corners को iOS पर लागू होने दें बजाय उन्हें image में ही बना देने के।
iOS इसके साथ क्या करता है
जब कोई उपयोगकर्ता Safari में Share और फिर Add to Home Screen टैप करता है, तो iOS को एक launcher आइकन चाहिए। यह rel="apple-touch-icon" वाला link tag ढूँढता है, और अगर कोई न हो तो साइट root से सीधे /apple-touch-icon.png और /apple-touch-icon-precomposed.png माँगता है। अगर कुछ न मिले तो यह page के screenshot पर fall back कर जाता है, जो कभी भी जान-बूझकर बनाया गया नहीं लगता।
आप जो image देते हैं वह चौकोर और full-bleed होती है। iOS आइकन बनाते समय अपना rounded-corner mask लगाता है, इसलिए जिस स्रोत image के कोने पहले से गोल हों वह दोहरे-गोल हो जाती है और किनारों पर दिखाई देने वाले artefacts के साथ ख़त्म होती है।
वह tag
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">एक tag और एक फ़ाइल — यही पूरा आधुनिक setup है। वही फ़ाइल /apple-touch-icon.png पर सर्व करें ताकि बिना-tag वाला fallback path भी हल हो जाए।
क्या भेजें
| आइटम | मान |
|---|---|
| Dimensions | 180x180 pixels |
| Format | PNG, alpha की ज़रूरत नहीं |
| Path | /apple-touch-icon.png |
| Background | अपारदर्शी: transparency काले पर composite होती है |
| Corners | चौकोर स्रोत; iOS ख़ुद कोनों को mask करता है |
| Safe margin | Mark को बाहरी कुछ प्रतिशत से दूर रखें ताकि mask उसे न काटे |
Apple touch icon FAQ
क्या मुझे सभी नौ पुराने apple-touch-icon sizes चाहिए?
नहीं। मौजूदा iOS 180x180 का उपयोग करता है और छोटे संदर्भों के लिए उसे नीचे स्केल कर लेता है। 57, 60, 72, 76, 114, 120, 144 और 152 वेरिएंट सिर्फ़ बहुत पुराने iPhone और iPad के लिए मायने रखते हैं।
apple-touch-icon-precomposed क्या है?
एक पुराना opt-out। पुराना iOS home screen आइकनों में एक चमकदार highlight जोड़ता था, और precomposed वेरिएंट उसे ऐसा न करने को कहता था। iOS ने वर्षों पहले gloss जोड़ना बंद कर दिया, इसलिए सादा rel="apple-touch-icon" ही काफ़ी है।
क्या Android apple-touch-icon इस्तेमाल करता है?
अगर आपकी साइट पर कोई web app manifest icons न हों तो Android पर Chrome इसे fallback के रूप में इस्तेमाल करेगा, पर इस पर भरोसा नहीं करना चाहिए। Android के लिए manifest में 192x192 और 512x512 PNG घोषित करें और apple-touch-icon को iOS की सेवा में रहने दें।