现代浏览器让您能够轻松地定制特定组件，如图标、地址栏颜色，甚至允许添加自定义磁贴等对象。这些简单的改进可提升吸引力，吸引用户再次访问您的网站。
现代浏览器让您能够轻松地定制特定组件，如图标、地址栏颜色，甚至允许添加自定义磁贴等对象。这些简单的改进可提升吸引力，吸引用户再次访问您的网站。
提供出色的图标和功能块
当用户访问您的网页时，浏览器会尝试从 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 的新主屏幕体验可支持 4 种不同固定网站布局，因此需要 4 个图标。如果您不想支持特定尺寸，则可以省去相关的元标记。
<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 网页内容指南。
尽管 Apple 的文档缺少此主题的内容，但开发者社区已想出一种针对所有设备的办法：使用高级媒体查询来选择相应的设备，然后指定正确的图像。以下是一个可行的解决方法，此方法由 tfausak 的 gist 提供
更改状态栏的外观
您可以将默认状态栏的外观更改为 black 或 black-translucent。使用 black-translucent 时，状态栏会浮在全屏内容的顶层，而不是将内容向下推。这样使布局有更大高度，但有点遮挡顶层。以下是所需的代码：
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent 截取的屏幕截图
black 截取的屏幕截图