आधुनिक ब्राउज़र में, आइकॉन, पता बार का रंग जैसे कुछ कॉम्पोनेंट को पसंद के मुताबिक बनाना आसान है. साथ ही, कस्टम टाइल जैसी चीज़ें भी जोड़ी जा सकती हैं. इन आसान बदलावों से यूज़र ऐक्टिविटी बढ़ सकती है और उपयोगकर्ता आपकी साइट पर वापस आ सकते हैं.
आधुनिक ब्राउज़र में, आइकॉन, पता बार का रंग जैसे कुछ कॉम्पोनेंट को पसंद के मुताबिक बनाना आसान है. साथ ही, कस्टम टाइल जैसी चीज़ें भी जोड़ी जा सकती हैं. इन आसान बदलावों से यूज़र ऐक्टिविटी बढ़ सकती है और उपयोगकर्ता आपकी साइट पर वापस आ सकते हैं.
बेहतर आइकॉन और टाइल उपलब्ध कराना
जब कोई उपयोगकर्ता आपके वेबपेज पर आता है, तो ब्राउज़र एचटीएमएल से आइकॉन फ़ेच करने की कोशिश करता है. यह आइकॉन कई जगहों पर दिख सकता है. जैसे, ब्राउज़र टैब, हाल ही में इस्तेमाल किए गए ऐप्लिकेशन, नया (या हाल ही में विज़िट किया गया) टैब पेज वगैरह.
अच्छी क्वालिटी की इमेज से, आपकी साइट को पहचानना आसान हो जाता है. इससे, उपयोगकर्ताओं के लिए आपकी साइट को ढूंढना भी आसान हो जाता है.
सभी ब्राउज़र के साथ पूरी तरह से काम करने के लिए, आपको हर पेज के <head>
एलिमेंट में कुछ टैग जोड़ने होंगे.
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome और Opera
Chrome और Opera, icon.png
का इस्तेमाल करते हैं. इसे डिवाइस के हिसाब से ज़रूरत के मुताबिक स्केल किया जाता है. अपने-आप स्केल होने से रोकने के लिए, sizes
एट्रिब्यूट की मदद से अन्य साइज़ भी दिए जा सकते हैं.
Safari
Safari भी होम स्क्रीन आइकॉन दिखाने के लिए, rel
एट्रिब्यूट: apple-touch-icon
के साथ <link>
टैग का इस्तेमाल करता है.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
apple-touch-icon के लिए, 180 पिक्सल या 192 पिक्सल का स्क्वेयर वाला ऐसा PNG आइकॉन इस्तेमाल करें जो पारदर्शी न हो.
हमारा सुझाव है कि sizes
एट्रिब्यूट की मदद से, एक से ज़्यादा वर्शन शामिल न करें.
पहले, iOS के लिए Safari, विज़ुअल इफ़ेक्ट जोड़ने से बचने के लिए -precomposed
कीवर्ड का इस्तेमाल करता था. हालांकि, iOS 7 के बाद से ऐसा करना ज़रूरी नहीं है.
Internet Explorer और Windows Phone
Windows 8 की नई होम स्क्रीन पर, पिन की गई साइटों के लिए चार अलग-अलग लेआउट इस्तेमाल किए जा सकते हैं. इसके लिए, चार आइकॉन की ज़रूरत होती है. अगर आपको किसी खास साइज़ के लिए इमेज उपलब्ध नहीं करानी है, तो काम के मेटा टैग हटाए जा सकते हैं.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Internet Explorer में टाइल
Microsoft के "पिन की गई साइटें" और घूमने वाली "लाइव टाइल", अन्य तरीकों से बहुत अलग हैं और इस गाइड के दायरे से बाहर हैं. लाइव टाइल बनाने का तरीका जानने के लिए, MSDN पर जाएं.
ब्राउज़र के एलिमेंट का रंग
अलग-अलग meta
एलिमेंट का इस्तेमाल करके, ब्राउज़र और प्लैटफ़ॉर्म के एलिमेंट को पसंद के मुताबिक बनाया जा सकता है. ध्यान रखें कि कुछ एक्सटेंशन, सिर्फ़ कुछ प्लैटफ़ॉर्म या ब्राउज़र पर काम कर सकते हैं. हालांकि, इनसे आपके अनुभव को बेहतर बनाने में काफ़ी मदद मिल सकती है.
Chrome, Firefox OS, Safari, Internet Explorer, और Opera Coast में, मेटा टैग का इस्तेमाल करके ब्राउज़र के एलिमेंट और प्लैटफ़ॉर्म के लिए रंग तय किए जा सकते हैं.
Chrome और Opera के लिए मेटा थीम का रंग
Android पर Chrome के लिए थीम का रंग तय करने के लिए, मेटा थीम कलर का इस्तेमाल करें.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Safari के हिसाब से स्टाइल
Safari में, स्टेटस बार को स्टाइल किया जा सकता है और स्टार्टअप इमेज सेट की जा सकती है.
स्टार्टअप इमेज की जानकारी देना
डिफ़ॉल्ट रूप से, Safari लोड होने के दौरान एक खाली स्क्रीन दिखाता है. साथ ही, कई बार लोड होने के बाद, ऐप्लिकेशन की पिछली स्थिति का स्क्रीनशॉट दिखाता है. इससे बचने के लिए, Safari को साफ़ तौर पर स्टार्टअप इमेज दिखाने के लिए कहें. इसके लिए, rel=apple-touch-startup-image
के साथ लिंक टैग जोड़ें. उदाहरण के लिए:
<link rel="apple-touch-startup-image" href="icon.png">
इमेज, टारगेट डिवाइस की स्क्रीन के साइज़ के हिसाब से होनी चाहिए. ऐसा न होने पर, उसका इस्तेमाल नहीं किया जाएगा. ज़्यादा जानकारी के लिए, Safari के वेब कॉन्टेंट से जुड़े दिशा-निर्देश देखें.
इस विषय पर Apple का दस्तावेज़ कम है. हालांकि, डेवलपर कम्यूनिटी ने सभी डिवाइसों को टारगेट करने का एक तरीका ढूंढ लिया है. इसके लिए, बेहतर मीडिया क्वेरी का इस्तेमाल करके सही डिवाइस चुना जाता है और फिर सही इमेज तय की जाती है. tfausak के gist की मदद से, यहां एक काम करने वाला समाधान दिया गया है
स्टेटस बार का रंग बदलना
डिफ़ॉल्ट स्टेटस बार के दिखने का तरीका, black
या
black-translucent
में से किसी एक पर सेट किया जा सकता है. black-translucent
के साथ, स्टेटस बार फ़ुल स्क्रीन कॉन्टेंट के ऊपर तैरता है, न कि उसे नीचे धकेलता है. इससे लेआउट की ऊंचाई बढ़ जाती है, लेकिन ऊपरी हिस्से में रुकावट आती है. यहां ज़रूरी कोड दिया गया है:
<meta name="apple-mobile-web-app-status-bar-style" content="black">