Making your site recognizable with icons and tiles

When someone visits your page, the browser looks for an icon in the HTML. That icon can appear in the tab, in the recent-app switcher, on a new-tab page, and elsewhere. A high-quality image makes your site easier to spot and encourages users to return.

To cover all major browsers, add a handful of tags to the <head> of every page:

<!-- icon in the highest resolution we need it for -->
<link rel="icon" 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

Chrome and Opera default to icon.png, scaling it to whatever size the device needs. If you want to avoid automatic scaling, you can provide explicit sizes via the sizes attribute.

Safari

Safari also reads a <link> tag, but expects rel="apple-touch-icon" for home-screen icons:

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

A non-transparent PNG, 180px or 192px square, is the right choice for apple-touch-icon. Don't include multiple versions with the sizes attribute. iOS versions before Safari for iOS 7 might honor the -precomposed keyword to suppress visual effects, but it has not been needed since.

Internet Explorer and Windows Phone

Windows 8's home-screen experience offers four layouts for pinned sites and asks for four separate icons. If you don't care about supporting a particular size, you can simply omit the related meta tag:

<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">

Microsoft's Pinned Sites and rotating Live Tiles go further than other implementations and are beyond the scope of this article. See MSDN's guide to creating live tiles for details.

Controlling browser chrome colors

Several meta elements let you set colors in the browser and, in some cases, parts of the underlying platform. Browser support varies, but where they work these tags can noticeably polish the experience. Chrome, Firefox OS, Safari, Internet Explorer, and Opera Coast all expose some form of color customization.

Theme color for Chrome and Opera

On Android, Chrome reads the theme-color meta tag to color the UI:

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Theme colors styling the address bar in Chrome.

Safari's startup image and status bar

Until content loads, Safari shows either a blank screen or, after a few visits, a screenshot of the previous state. You can force a dedicated startup image with a link tag carrying rel="apple-touch-startup-image":

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

The image must match the exact screen dimensions of the target device or it will be ignored. Apple's documentation is thin here, but the developer community has produced a working approach that uses layered media queries to select each device and serve the matching image. A widely used solution is available in tfausak's gist.

You can also switch the status bar between black and black-translucent. The translucent option lets the status bar float over full-screen content instead of pushing it down, gaining some layout height at the cost of top obstruction:

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