आधुनिक ब्राउज़र में, आइकॉन, पता बार का रंग जैसे कुछ कॉम्पोनेंट को पसंद के मुताबिक बनाना आसान है. साथ ही, कस्टम टाइल जैसी चीज़ें भी जोड़ी जा सकती हैं. इन आसान बदलावों से उपयोगकर्ताओं की दिलचस्पी बढ़ सकती है और वे आपकी साइट पर वापस आ सकते हैं.
आधुनिक ब्राउज़र में, आइकॉन, पता बार का रंग जैसे कुछ कॉम्पोनेंट को पसंद के मुताबिक बनाना आसान है. साथ ही, कस्टम टाइल जैसी चीज़ें भी जोड़ी जा सकती हैं. इन आसान बदलावों से यूज़र ऐक्टिविटी बढ़ सकती है और उपयोगकर्ता आपकी साइट पर वापस आ सकते हैं.
बेहतर आइकॉन और टाइल उपलब्ध कराना
जब कोई उपयोगकर्ता आपके वेबपेज पर आता है, तो ब्राउज़र एचटीएमएल से आइकॉन को फ़ेच करने की कोशिश करता है. यह आइकॉन कई जगहों पर दिख सकता है. जैसे, ब्राउज़र टैब, हाल ही में इस्तेमाल किए गए ऐप्लिकेशन, नया (या हाल ही में विज़िट किया गया) टैब पेज वगैरह.
अच्छी क्वालिटी की इमेज देने से, आपकी साइट को पहचानना आसान हो जाता है. इससे, उपयोगकर्ताओं के लिए आपकी साइट को ढूंढना भी आसान हो जाता है.
सभी ब्राउज़र पर पूरी तरह से काम करने के लिए, आपको हर पेज के <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-टच-आइकॉन' के लिए, 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 एक खाली स्क्रीन दिखाता है और एक से ज़्यादा बार ऐप्लिकेशन की पिछली स्थिति का स्क्रीनशॉट लोड करता है. आप rel=apple-touch-startup-image के साथ लिंक टैग जोड़कर Safari को एक अश्लील स्टार्टअप इमेज दिखाने के लिए कहकर इसे रोक सकते हैं. उदाहरण के लिए:
<link rel="apple-touch-startup-image" href="icon.png">
इमेज, टारगेट डिवाइस की स्क्रीन के साइज़ के हिसाब से होनी चाहिए. ऐसा न होने पर, उसका इस्तेमाल नहीं किया जाएगा. ज़्यादा जानकारी के लिए, Safari के वेब कॉन्टेंट से जुड़े दिशा-निर्देश देखें.
इस विषय पर Apple का दस्तावेज़ कम है. हालांकि, डेवलपर कम्यूनिटी ने सभी डिवाइसों को टारगेट करने का एक तरीका ढूंढ लिया है. इसके लिए, बेहतर मीडिया क्वेरी का इस्तेमाल करके सही डिवाइस चुना जाता है और फिर सही इमेज तय की जाती है. tfausak's gist के सौजन्य से यह रहा इसका काम करने का तरीका
स्टेटस बार का रंग बदलना
डिफ़ॉल्ट स्टेटस बार को black या black-translucent में बदला जा सकता है. black-translucent के साथ, स्टेटस बार फ़ुल स्क्रीन कॉन्टेंट के ऊपर तैरता है, न कि उसे नीचे धकेलता है. इससे लेआउट की ऊंचाई बढ़ जाती है, लेकिन ऊपरी हिस्से में रुकावट आती है. यहां ज़रूरी कोड दिया गया है:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent का इस्तेमाल करके स्क्रीनशॉट लेना
black का इस्तेमाल करके स्क्रीनशॉट लेना