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