किसी वेबसाइट के लिए रेटिना तैयार आईओएस बुकमार्क आइकन कैसे बनाएं और सेट करें

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

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

1) रेटिना तैयार आईओएस वेबसाइट आइकन बनाएँ

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

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

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

• " सेब-टच-आइकन.png " आइकन पर हाइलाइट बबल ओवरले जोड़ देगा
• " सेब-टच-आइकन-प्रीकंपोस्ड.png " हाइलाइट ओवरले के बिना मूल रूप से बनाए गए आइकन को प्रदर्शित करेगा

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

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

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

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

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

4) एक आईओएस डिवाइस का उपयोग करें और साइट बुकमार्क करें

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

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

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