مرورگرهای مدرن سفارشی‌سازی برخی مؤلفه‌ها، مانند نمادها، رنگ نوار نشانی، و حتی افزودن مواردی مانند کاشی‌های سفارشی را آسان می‌کنند. این تغییرات ساده می‌تواند تعامل را افزایش دهد و کاربران را به سایت شما برگرداند.
مرورگرهای مدرن سفارشی‌سازی برخی مؤلفه‌ها، مانند نمادها، رنگ نوار نشانی، و حتی افزودن مواردی مانند کاشی‌های سفارشی را آسان می‌کنند. این تغییرات ساده می‌تواند تعامل را افزایش دهد و کاربران را به سایت شما برگرداند.
ارائه نمادها و کاشی‌های عالی
وقتی کاربری از صفحه وب شما بازدید می‌کند، مرورگر سعی می‌کند نمادی را از HTML واکشی کند. این نماد ممکن است در جاهای زیادی نشان داده شود، ازجمله زبانه مرورگر، جابه‌جایی بین برنامه‌های اخیر، صفحه زبانه جدید (یا اخیراً بازدیدشده)، و غیره.
ارائه تصویر با کیفیت بالا باعث می‌شود سایتتان بیشتر قابل‌تشخیص باشد و کاربران راحت‌تر بتوانند سایتتان را پیدا کنند.
برای پشتیبانی کامل از همه مرورگرها، باید چند برچسب به عنصر <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 همچنین از برچسب <link> با مشخصه rel: apple-touch-icon برای نشان دادن نماد صفحه اصلی استفاده می‌کند.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
PNG غیرشفاف با اندازه ۱۸۰ پیکسل یا ۱۹۲ پیکسل مربع برای apple-touch-icon ایده‌آل است.
گنجاندن چندین نسخه ازطریق مشخصه sizes توصیه نمی‌شود.
قبلاً Safari برای iOS کلیدواژه -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
برای مشخص کردن رنگ زمینه برای Chrome در Android، از رنگ زمینه متا استفاده کنید.
<!-- 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