现代浏览器可让您轻松自定义某些组件，例如图标、地址栏颜色，甚至可以添加自定义功能块等内容。这些简单的调整可以提高互动度，并吸引用户返回您的网站。
现代浏览器可让您轻松自定义某些组件，例如图标、地址栏颜色，甚至可以添加自定义功能块等内容。这些简单的调整可以提高互动度，并吸引用户返回您的网站。
提供优质的图标和图块
当用户访问您的网页时，浏览器会尝试从 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 还会使用带有 rel 属性的 <link> 标记：apple-touch-icon 来指示主屏幕图标。
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
180 像素或 192 像素正方形的非透明 PNG 最适合用作 apple-touch-icon。
不建议通过 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 Coast 允许您使用元标记为浏览器元素甚至平台定义颜色。
Chrome 和 Opera 的元主题颜色
如需为 Android 版 Chrome 指定主题颜色，请使用元主题颜色。
<!-- 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 Web 内容指南。
虽然 Apple 的文档中很少提及此主题，但开发者社区已经找到了一种方法，即使用高级媒体查询来选择合适的设备，然后指定正确的图片，从而定位到所有设备。以下是可行的解决方案，由 tfausak 的 gist 提供
更改状态栏外观
您可以将默认状态栏的外观更改为 black 或 black-translucent。使用 black-translucent 时，状态栏会悬浮在全屏内容上方，而不是将其向下推。这会增加布局的高度，但会遮挡顶部。以下是所需的代码：
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent 截取的屏幕截图
black 截取的屏幕截图