अब आइफोन और आइपैड आइकन ब्लॉग और साइट के साथ प्रयोग करें

जब आप किसी वेबसाइट को सभी नये वेब ब्राउज़र पर खोलते हैं या उसे दुबारा एक क्लिक में खोलने के लिए बुकमार्क (Bookmark) करते हैं तो लिंक के आगे आपको उस साइट में प्रयोग किया गया फ़ेविकॉन (Favicon) दिखायी देता है। फ़ेविकॉन साइट की पहचान होता है इसके ज़रिए किसी साइट या ब्लॉग को झट से पहचाना जाता है। अधिकांश कम्पनियाँ अपने ट्रेडमार्क या लोगो (Trademark or Logo) को ही अपने बुकमार्क ही तरह प्रयोग करती हैं ताकि उनकी ब्रैण्डिंग (Branding) बनी रहे। मैं भी इस ब्लॉग के लिए अपने लोगो के एक अंश को फ़ेविकॉन की तरह ही प्रयोग करता हूँ ताकि पाठकों से सामने एक ही पहचान स्पष्ट बनी रहे। लेकिन ये फ़ेविकॉन विंडोज़, लिनेक्स, सिम्बिअन और एंड्रॉयड (Windows, Linux, Symbian and Android) पर तो काम करता है लेकिन iOS के विभिन्न उत्पादों जैसे आइफ़ोन और आइपैड (iPhone and iPad) पर बुकमार्क करने पर ज़्यादा स्पष्ट नहीं दिखता है। ऐसा इसलिए है क्योंकि आइपैड और आइफ़ोन फ़ेविकॉन/आइकॉन का आकार अलग होता है। यदि आप चाहते हैं कि आपके यूज़र आपकी साइट व ब्लॉग पर जब अपने आइपैड और आइफ़ोन पर बुकमार्क करें और उनको आपका लोगो स्पष्ट दिखे तो आपको अपनी साइट या ब्लॉग के साथ आइपैड और आइफ़ोन स्पोर्टिंग आइकॉन प्रयोग करने चाहिए। जिन्हें एप्पल टच आइकॉन (Apple touch icon) कहते हैं।

ऐसी साइटों के लिए जहाँ रूट डायरेक्ट्री में पहुँच (Access) होती है

एप्पल टच आइकॉन को प्रयोग करने से पहले इसके आकार की जानकारी ले लेनी चाहिए। आइकॉन का आकार के तीन मानक हैं:

सामान्य आइफ़ोन: 57x57
आइफ़ोन 4 या 5: 114x114
सामान्य आइपैड: 72x72

उपरोक्त सभी आकार पिक्सेल में हैं।

आप इन्हें बनाने के लिए किसी भी ग्राफ़िक्स सॉफ़्टवेयर (Graphics software) का प्रयोग कर सकते हैं। आपको आइकॉन की डिज़ाइन पर ध्यान देना है क्योंकि उस पर एप्पल थीम का अतिरिक्त प्रभाव अपने आप दिखने लगता है लेकिन यदि आप फिर भी चाहते हैं तो अपने आइकॉन की डिज़ाइन को एप्पल थीम के प्रभाव से मुक्त रख सकते हैं। इसके लिए आपको आइकॉन के नाम के पीछे -precomposed प्रत्यय (suffix) जोड़ना पड़ेगा। precomposed आइकॉन iOS 2.0 पर जोड़े गये थे। सभी उन्नत प्रभाव iOS 4.2 या नये उत्पादों पर स्पष्ट झलकते हैं।

बुनियादी स्वरूप (Standard format) के लिए आपके आइकॉन का नाम apple-touch-icon.png होना चाहिए और इसे आपकी साइट की ‘रूट डायरेक्ट्री (Root directory)‘ अपलोड करना होगा। जैसा कि मैंने ऊपर बताया है कि यदि आप अपने आइकॉन पर एप्पक थीम के प्रभाव से मुक्त रखना चाहते हैं तो आपको इस आइकॉन फ़ाइल का नाम apple-touch-icon-precomposed.png होना चाहिए।

यदि आप आइफ़ोन और आइपैड डिवाइस के अनुसार आइकॉन प्रयोग करना चाहते हैं जो कि हर डिवाइस पर स्पष्ट झलकेगा तो आपको इसके लिए आइकॉन फ़ाइल के नाम के साथ उसका आकार भी बताना होगा। जो कि निम्न प्रकार से हैं:

सामान्य आइफ़ोन: apple-touch-icon-57x57.png
आइफ़ोन 4 या 5: apple-touch-icon-114x114.png
सामान्य आइपैड: apple-touch-icon-72x72.png

ब्लॉगर, टम्बलर जैसी सेवाओं पर जिन पर रूट डायरेक्ट्री में पहुँच नहीं होती है

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

जैसा कि मैं ऊपर बुनियाद स्वरूप की बात कर चुका हूँ जिसमें एक आइकॉन फ़ाइल का प्रयोग होता है। यदि आप सभी डिवाइसेज़ पर एक आकार का आइकॉन दर्शाना चाहते हैं तो आपको नीचे दिये गये कोड का इस्तेमाल करना चाहिए। नीचे दिये गये कोड में आपको हाइलाइटेड आइकॉन लिंक को अपने लिंक से बदलना होगा।

<link rel="apple-touch-icon" href="http://www.techprevue.com/apple-touch-icon.png"/>

यदि आप अपने आइकॉन को एप्पल थीम के डिज़ाइन प्रभावों से मुक्त रखना चाहते हैं तो नीचे दिये कोड का इस्तेमाल करना चाहिए।

<link rel="apple-touch-icon-precomposed" href="http://www.techprevue.com/apple-touch-icon.png"/>

इन सबके अलावा यदि आप डिवाइसेज़ के अनुसार विभिन्न आकार वाले आइकॉनों का प्रयोग करना चाहते हैं तो नीचे दिये कोड का प्रयोग करना चाहिए।

<link rel="apple-touch-icon" href="http://www.techprevue.com/icon-iphone.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://www.techprevue.com/icon-iphone4.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://www.techprevue.com/icon-ipad.png" />

यदि आप अपने आइकॉनों को एप्पल थीम के डिज़ाइन प्रभावों से मुक्त रखना चाहते हैं तो नीचे दिये कोड का इस्तेमाल करना चाहिए।

<link rel="apple-touch-icon-precomposed" href="http://www.techprevue.com/icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.techprevue.com/icon-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.techprevue.com/icon-ipad.png" />

आशा है कि अपने ब्लॉग व साइट पर आइफ़ोन और आइपैड आइकॉनों का इस्तेमाल करके अपने आइफ़ोन और आइपैड पाठकों को बुकमार्क करने का एक स्वस्थ अनुभव लेने में मदद करेंगे।

यदि आपने अभी तक अपने ब्लॉग के साथ फ़ेविकॉन प्रयोग नहीं किया तो नीचे दिये लिंक पर क्लिक करके निर्देशों का पालन करें।
https://taknikdrashta.com/2012/07/favicon-for-blogger-blogs.html

Keywords: Apple touch icon, iPad touch icon, iPhone touch icon

.orange{background:#FB8938;border-left:10px solid #EB5200;color:white;padding-left:10px;}
.skyblue{background:#3BB0F9;border-left:10px solid #0090D3;color:white;padding-left:10px;}

Keywords: Apple touch icon, iPad touch icon, iPhone touch icon, Apple touch icon for blogger