When a user visits your web page, the browser tries to get an icon from the HTML. This icon may appear in many places, including the browser tab, the recent app switch, the new (or recently visited) tab page, and more.
Providing a high quality image makes your site recognizable and users can find your site more easily.
To fully support all browsers, you need to add some tags to the of each page.
<!-- 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 and Opera
Chrome and Opera use icon.png, which is resized by the device. You can also provide additional sizes by specifying the sizes property to prevent autoscaling.
Note: Icons should be sized based on 48px, for example 48px, 96px, 144px, and 192px.
Safari
Safari also uses the tag with the rel: apple-touch-icon attribute to display the home screen 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">
