现代浏览器可让您轻松自定义特定组件（例如图标、地址栏颜色），甚至可以添加自定义图块之类的内容。这些简单的改进可提高互动度并吸引用户再次访问您的网站。
现代浏览器可让您轻松自定义特定组件（例如图标、地址栏颜色），甚至可以添加自定义图块之类的内容。这些简单的改进可提高互动度并吸引用户再次访问您的网站。
提供出色的图标和功能块
当用户访问您的网页时，浏览器会尝试从 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 触摸图标。
不建议通过 sizes 属性添加多个版本。
以前，Safari for iOS 会考虑使用 -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 的“固定网站”将“Live Tiles”远远超越了 也不在本指南的讨论范围内。如需了解详情，请参阅 在 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 在加载时间和多次加载后显示空白屏幕
用于加载应用之前状态的屏幕截图。为防止出现这种情况，
通过添加 link 标记，指示 Safari 显示明确的启动图片，
rel=apple-touch-startup-image。例如：
<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 的屏幕截图