apple-touch-icon: एक संपूर्ण गाइड
जब कोई आपकी साइट को अपने iPhone home screen पर जोड़ता है, तो iOS एक tag का सहारा लेता है। इसे गलत करें और यह इसके बजाय आपके page का एक धुंधला screenshot पकड़ लेता है।
apple-touch-icon क्या है
apple-touch-icon वह icon है जिसे iOS तब इस्तेमाल करता है जब कोई user Add to Home Screen पर टैप करता है। यह आपके favicon से अलग है और web app manifest से अलग है। यह इसलिए मौजूद है क्योंकि iOS एक पूर्ण-गुणवत्ता वाला app-style icon चाहता है, न कि बड़ी की गई छोटी tab favicon।
एक ही 180x180 PNG काफ़ी है। मौजूदा iOS उस एक फ़ाइल को जिस भी context की ज़रूरत हो उसके लिए नीचे scale कर देता है, इसलिए आप 57, 72, 114 और 152 sizes की पुरानी सीढ़ी ship नहीं करते।
link tag
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- You can pin the size, but iOS defaults to the 180 file fine: -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">iOS बिना tag के भी site root पर /apple-touch-icon.png खोजता है, पर इसे घोषित करना अलग-अलग setups में ज़्यादा भरोसेमंद होता है।
एक नज़र में spec
| गुण | मान |
|---|---|
| Dimensions | 180x180 |
| फ़ॉर्मैट | PNG |
| Transparency | नज़रअंदाज़, काले पर composited |
| कोने | square स्रोत, iOS इन्हें आपके लिए गोल कर देता है |
| फ़ाइल का नाम | site root पर apple-touch-icon.png |
आम सावधानियां
कोई apple-touch-icon बिल्कुल न होना सबसे बुरा मामला है। जब iOS को एक नहीं मिलता तो वह page के एक नीचे scale किए गए screenshot का सहारा लेता है, जो धुंधला और brand से हटकर होता है। एक ही tag इसे ठीक कर देता है।
कोनों को खुद गोल करना एक गलती है। iOS अपना rounded-square mask लगाता है, इसलिए एक पहले से गोल किया गया स्रोत दो बार गोल हो जाता है और icon के चारों ओर background की एक पतली सीमा दिखाता है। इसे एक square, full-bleed image दें।
रिफ़्रेश तुरंत नहीं होता। एक बार जब कोई आपकी साइट को अपनी home screen पर जोड़ लेता है, तो आपके server पर icon बदलना उनके मौजूदा shortcut को अपडेट नहीं करता। नया icon पाने के लिए उन्हें इसे हटाकर दोबारा जोड़ना पड़ता है।
अक्सर पूछे जाने वाले सवाल
apple-touch-icon का size क्या है?
180x180 pixels, एक PNG के रूप में। मौजूदा iOS उस एक फ़ाइल को हर context के लिए scale करता है, इसलिए आपको पुराने 57, 72, 114 या 152 sizes की ज़रूरत नहीं है।
मेरा apple-touch-icon काला background क्यों दिखा रहा है?
iOS apple-touch-icon पर transparency को नज़रअंदाज़ करता है और इसे काले पर composite करता है। PNG को transparent के बजाय एक ठोस background रंग के साथ export करें।
iOS मेरी साइट के लिए धुंधला icon क्यों दिखाता है?
शायद आपके पास कोई apple-touch-icon नहीं है। इसके बिना, iOS page का एक नीचे scale किया गया screenshot इस्तेमाल करता है। एक 180x180 PNG और सही link tag जोड़ें।
मेरे icon बदलने के बाद मेरा home screen icon अपडेट क्यों नहीं हुआ?
मौजूदा home screen shortcuts उस icon को cache कर लेते हैं जिसके साथ वे बनाए गए थे। एक नया apple-touch-icon पाने के लिए user को shortcut हटाकर साइट को दोबारा जोड़ना पड़ता है।