هنگامی که کاربر از صفحه وب شما بازدید می کند، مرورگر سعی می کند یک نماد را از HTML دریافت کند. این نماد ممکن است در مکان‌های زیادی نمایش داده شود، از جمله برگه مرورگر، سوئیچ برنامه اخیر، صفحه برگه جدید (یا اخیراً بازدید شده) و موارد دیگر.
ارائه یک تصویر با کیفیت بالا باعث می شود تا سایت شما قابل تشخیص باشد و کاربران راحت تر بتوانند سایت شما را پیدا کنند.
برای پشتیبانی کامل از همه مرورگرها، باید چند تگ به <code><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 and Opera
کروم و اپرا از icon.png استفاده می‌کنند که اندازه آن توسط دستگاه به اندازه لازم تغییر می‌کند. برای جلوگیری از مقیاس‌بندی خودکار، می‌توانید اندازه‌های اضافی را با مشخص کردن ویژگی اندازه‌ها نیز ارائه کنید.
توجه: اندازه نمادها باید بر اساس 48 پیکسل باشد، برای مثال 48 پیکسل، 96 پیکسل، 144 پیکسل و 192 پیکسل.
Safari
سافاری همچنین از تگ <link> با ویژگی 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">
