أيقونات وألوان المتصفح

عندما يزور أحد المستخدمين صفحة الويب الخاصة بك، يحاول المتصفح الحصول على رمز من HTML. قد يظهر هذا الرمز في العديد من الأماكن، بما في ذلك علامة تبويب المتصفح، والتبديل الأخير للتطبيق، وصفحة علامة التبويب الجديدة (أو التي تمت زيارتها مؤخرًا)، والمزيد.

إن توفير صورة عالية الجودة يجعل موقعك معروفًا ويمكن للمستخدمين العثور على موقعك بسهولة أكبر.

لدعم كافة المتصفحات بشكل كامل، تحتاج إلى إضافة بعض العلامات إلى في كل صفحة.

<!-- 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 ملف icon.png، الذي يتم تغيير حجمه بواسطة الجهاز. يمكنك أيضًا توفير أحجام إضافية عن طريق تحديد خاصية الأحجام لمنع القياس التلقائي.

ملاحظة: يجب أن يكون حجم الرموز بناءً على 48 بكسل، على سبيل المثال 48 بكسل و96 بكسل و144 بكسل و192 بكسل.

Safari

يستخدم Safari أيضًا علامة مع السمة rel: apple-touch-icon لعرض رمز الشاشة الرئيسية.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">

یک PNG غیر شفاف که 180 پیکسل یا 192 پیکسل مربع است، برای نماد لمسی اپل ایده آل است.

شامل چندین نسخه از طریق ویژگی sizes توصیه نمی شود. پیش از این، Safari برای iOS برای جلوگیری از افزودن جلوه‌های بصری، کلمه کلیدی -precomposed را در نظر می‌گرفت، اما از iOS 7 دیگر نیازی به آن نیست.

Internet Explorer and Windows Phone

ویندوز 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">

Color browser elements

برای تعیین رنگ تم برای کروم در اندروید، از meta theme color استفاده کنید.

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">

یک ظاهر طراحی خاص سافاری

Safari به شما امکان می دهد تا به نوار وضعیت استایل دهید و تصویر راه اندازی را مشخص کنید.
تصویر راه اندازی را مشخص کنید
به‌طور پیش‌فرض، سافاری صفحه‌ای خالی در طول زمان بارگذاری و پس از بارگیری‌های متعدد، تصویری از وضعیت قبلی برنامه را نشان می‌دهد. می‌توانید با گفتن به Safari برای نشان دادن یک تصویر راه‌اندازی صریح، با افزودن یک برچسب پیوند، با rel=apple-touch-startup-image از این امر جلوگیری کنید. مثلا:

<link rel="apple-touch-startup-image" href="icon.png">

ظاهر نوار وضعیت را تغییر دهید

تغییر ظاهر نوار وضعیت می‌توانید ظاهر نوار وضعیت پیش‌فرض را به سیاه یا سیاه-شفاف تغییر دهید. با رنگ مشکی-شفاف، نوار وضعیت به جای فشار دادن آن به پایین، روی محتوای تمام صفحه شناور است. این به چیدمان ارتفاع بیشتری می‌دهد، اما قسمت بالایی را مسدود می‌کند. این کد مورد نیاز است:

<meta name="apple-mobile-web-app-status-bar-style" content="black">