图标和浏览器颜色

现代浏览器可让您轻松地自定义某些组件,例如图标、地址栏颜色,甚至添加自定义图块等对象。这些简单的调整可以提高互动度,吸引用户再次访问您的网站。

保罗·巴考斯
Paul Bakaus

现代浏览器可让您轻松地自定义某些组件,例如图标、地址栏颜色,甚至添加自定义图块等对象。这些简单的调整可以提高互动度,吸引用户再次访问您的网站。

提供出色的图标和功能块

当用户访问您的网页时,浏览器会尝试从 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 非常适合用于苹果触摸图标。

不建议通过 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">
主题颜色:用于设置 Chrome 中的地址栏的样式。

Safari 专用样式

Safari 允许您设置状态栏样式并指定启动图像。

指定启动映像

默认情况下,Safari 在加载期间以及多次加载后会显示空白屏幕,会显示应用之前状态的屏幕截图。为防止出现这种情况,您可以使用 rel=apple-touch-startup-image 添加链接标记,让 Safari 显示明确的启动图片。例如:

<link rel="apple-touch-startup-image" href="icon.png">

图片必须为目标设备屏幕的特定尺寸,否则不会被使用。如需了解更多详情,请参阅 Safari 网页内容准则

虽然 Apple 的文档缺少有关此主题的内容,但开发者社区已找到一种方法来定位到所有设备,方法是使用高级媒体查询选择适当的设备,然后指定正确的图片。下面提供一个可行的解决方案(由 tfausak 的 gist 提供)

更改状态栏的外观

您可以将默认状态栏的外观更改为 blackblack-translucent。使用 black-translucent 时,状态栏浮在全屏内容的上方,而不是向下拉。这样可让布局有更高的高度,但遮挡了顶部。以下是所需的代码:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

使用黑色半透明的屏幕截图。
使用 black-translucent 的屏幕截图

使用黑色的屏幕截图
使用 black 的屏幕截图