apple-touch-icon: आकार, फ़ॉर्मैट और कोड

180×180 पिक्सेल का इस्तेमाल आम तौर पर उच्च रिज़ॉल्यूशन के मूल चित्र के रूप में होता है। iOS इसे छोटे स्थानों के लिए घटा सकता है, इसलिए अधिकतर परियोजनाओं में एक घोषणा काफ़ी है।

पुरानी सलाह में 57×57 से 152×152 तक आठ फ़ाइलें होती थीं, हर एक का अपना sizes एट्रिब्यूट था। अब उन संस्करणों की ज़रूरत नहीं है: वे HTML बढ़ाते हैं और एक जैसे परिणाम के लिए अतिरिक्त अनुरोध करवाते हैं।

फ़ाइल PNG होनी चाहिए। iOS इस आइकन के लिए न SVG पढ़ता है, न WebP। JPEG सपाट आकृतियों के साफ़ किनारे बिगाड़ देता है।

संस्करण और दिखाने की स्थिति के अनुसार पारदर्शी पृष्ठभूमि का नतीजा अप्रत्याशित हो सकता है। होम स्क्रीन का रूप अपने नियंत्रण में रखने के लिए अपनी चुनी हुई अपारदर्शी पृष्ठभूमि पर चित्र दें।

समाधान यह है कि एक्सपोर्ट से पहले आइकन को अपारदर्शी पृष्ठभूमि पर मिला दें। ब्रांड का रंग चुनें या चिह्न रंगीन हो तो सादा सफ़ेद रखें। चित्र के आसपास लगभग 10% खाली जगह छोड़ें, ताकि वह भरा हुआ न लगे।

कोने खुद गोल न करें: iOS ऊपर से अपना गोल मास्क लगाता है। पहले से गोल फ़ाइल में दोहरी गोलाई बनती है और कोने खराब दिखते हैं।

पेजों के head में एक पंक्ति काफ़ी है: link rel="apple-touch-icon" href="/apple-touch-icon.png"। केवल एक फ़ाइल देने पर sizes एट्रिब्यूट वैकल्पिक है।

आइकन के नीचे दिखने वाला नाम तय करने के लिए वैकल्पिक रूप से meta name="apple-mobile-web-app-title" content="Your brand" जोड़ें। इस टैग के बिना iOS पेज का शीर्षक लेता है, जो अक्सर लंबा होने के कारण कट जाता है।

फ़ाइल की एक कॉपी रूट में apple-touch-icon.png नाम से भी रखें: favicon.ico की तरह, कोई टैग न मिलने पर iOS इसे इसी पते पर खोजता है।

iOS आइकन को लंबे समय तक कैश में रखता है और होम स्क्रीन पर पहले से मौजूद शॉर्टकट अपने आप नहीं बदलता। नया संस्करण जाँचने के लिए शॉर्टकट हटाएँ, Safari का डेटा साफ़ करें और साइट फिर जोड़ें।

आइकन फिर भी न दिखे तो तीन बातें जाँचें: फ़ाइल 404 के बजाय 200 लौटाती हो, image/png सामग्री प्रकार से मिलती हो और robots.txt के नियम या प्रमाणीकरण से अवरुद्ध न हो।

LFFavicon जाँच टूल किसी भी सार्वजनिक URL पर ठीक यही स्थितियाँ जाँचता है और वास्तव में प्राप्त आइकन दिखाता है।