वेब डेवलपर और वेबसाइट के मालिक ध्यान दें: आपको रेटिना-तैयार iOS बुकमार्क आइकन सेट करने की आवश्यकता है। बुकमार्क आइकन को Apple Touch Icon कहा जाता है, और ये कस्टम छवियां वह आइकन बन जाती हैं जो उपयोगकर्ता के होम स्क्रीन पर प्रदर्शित होता है जब वे iPad पर किसी वेबसाइट को बुकमार्क करते हैं, iOS में iPhone, या iPod टच, या OS X के लिए Safari का बुकमार्क पैनल।कस्टम ऐप्पल-टच-आइकन फ़ाइल सेट के बिना, उपयोगकर्ताओं को वेब पेज का एक उबाऊ और अक्सर बदसूरत थंबनेल मिलेगा, और रेटिना-तैयार आइकन का उपयोग किए बिना, बुकमार्क आइकन नई आईपैड स्क्रीन पर पिक्सलेटेड और आम तौर पर भयानक दिखाई देगा।

यहां बताया गया है कि कुछ आसान चरणों में किसी भी वेबसाइट के लिए रेटिना के लिए उपयुक्त Apple Touch Icon बनाने के लिए आपको क्या करना होगा।

1) रेटिना-तैयार iOS वेबसाइट आइकन बनाएं

टेम्प्लेट का उपयोग करें या अपना खुद का डिज़ाइन करें। मैंने पिछली पोस्ट में उल्लिखित आसान DIY रेटिना आइकन किट का उपयोग किया था, यह एक PSD फ़ाइल है जो एक या दो क्लिक के रूप में आसान दिखने वाले iOS आइकन को डिज़ाइन करती है। किसी वेबसाइट या कंपनी के लोगो में पेस्ट करें और आप जाने के लिए काफी अच्छे हैं। यदि आपके पास PSD फ़ाइलों को संपादित करने के लिए कुछ नहीं है, तो Photoshop CS6 बीटा उत्कृष्ट है और वर्ष में बाद में अंतिम संस्करण आने तक डाउनलोड और उपयोग करने के लिए निःशुल्क है।

2) पीएनजी के रूप में सहेजें और रेटिना वेबसाइट बुकमार्क आइकन को नाम दें

आइकन एक पीएनजी होना चाहिए, और इसे दो चीजों में से एक नाम दिया जाना चाहिए। प्रत्‍येक फ़ाइल नाम उपयोगकर्ता की होम स्‍क्रीन पर प्रदर्शित आइकन का थोड़ा भिन्‍न रूप प्रदान करता है:

• “apple-touch-icon.png” आइकन पर हाइलाइट बबल ओवरले जोड़ेगा
• “apple-touch-icon-precompose.png” हाइलाइट ओवरले के बिना मूल रूप से बनाए गए आइकन को प्रदर्शित करेगा

बाद वाले -पूर्वनिर्मित विकल्प का उपयोग करें यदि आपने अपना स्वयं का हाइलाइट बनाया है, या यदि आप चाहते हैं कि आइकन सर्वव्यापी बुलबुले के बिना अधिक सपाट दिखाई दे जो कि Apple के अधिकांश डिफ़ॉल्ट आइकन पर दिखाई देता है।

3) आधार वेब निर्देशिका पर वेबसाइट बुकमार्क टच आइकन अपलोड करें

SFTP क्लाइंट का उपयोग करें (OS X में Finder में FTP शामिल है, और CyberDuck या Filezilla मुफ़्त हैं) apple-touch-icon.png फ़ाइल को रूट वेब डायरेक्टरी में कॉपी करें। यह आमतौर पर वही स्थान होता है जहां साइट की मुख्य अनुक्रमणिका फ़ाइल स्थित होती है। एक बार अपलोड हो जाने के बाद, एक वेब ब्राउज़र खोलकर और "http://SITEURL.com/apple-touch-icon.png" पर जाकर और सुनिश्चित करें कि यह लोड होता है, उचित स्थान पर इसकी पुष्टि करें।

OSXDaily.com से 512×512 रेटिना-तैयार बुकमार्क आइकन का उदाहरण यहां दिया गया है:

ध्यान दें कि -पूर्वनिर्मित ध्वज के बिना, उपरोक्त आइकन हाइलाइट बबल प्रदर्शित करेगा। आप वास्तविक आइकन की तुलना बुकमार्क के रूप में स्क्रीनशॉट में दिखाए गए आइकन से करके दोनों के बीच अंतर देख सकते हैं।

4) iOS डिवाइस का इस्तेमाल करें और साइट को बुकमार्क करें

यह सबसे आसान हिस्सा है, एक आईओएस डिवाइस लें (रेटिना पहलू की पुष्टि करने के लिए अधिमानतः एक आईपैड 3) और सफारी खोलें।आपने जिस वेब साइट पर आइकन अपलोड किया है, उसे रीफ्रेश करें, और फिर तीर आइकन टैप करें और "होमस्क्रीन में जोड़ें" चुनें, बुकमार्क को नाम दें, फिर होमस्क्रीन पर वापस आकर इसकी पुष्टि करें।

512 x 512 पिक्सेल होने के बावजूद, पुराने iPhone और गैर-रेटिना उपकरणों पर रेटिना आइकन ठीक हो जाएगा। यदि आप वास्तव में चाहते हैं, तो आप अलग-अलग उपकरणों के लिए अलग-अलग आकार के आइकन प्रदर्शित करने के लिए CSS और HTML का उपयोग कर सकते हैं, लेकिन यह वास्तव में आवश्यक नहीं है।

अब अगर कोई आपकी वेब साइट को रेटिना डिस्प्ले वाले iPad पर बुकमार्क करता है, तो यह उनके होम स्क्रीन पर बहुत बेहतर दिखाई देगा। इसमें वास्तव में बस इतना ही है। और हाँ, हमने पहले Apple टच आइकन के बारे में लिखा है, लेकिन अब यह एक और उल्लेख के योग्य है कि iPad 3 में उच्च रिज़ॉल्यूशन आइकन और ग्राफिक्स की मांग है।