Modern browsers make it easy to customize certain components, like icons, the address bar color, and even add things like custom tiles. These simple tweaks can increase engagement and bring users back to your site.
Modern browsers make it easy to customize certain components, like icons, the address bar color, and even add things like custom tiles. These simple tweaks can increase engagement and bring users back to your site.
Provide great icons and tiles
When a user visits your webpage, the browser tries to fetch an icon from the HTML. The icon may show up in many places, including the browser tab, recent app switch, the new (or recently visited) tab page, and more.
Providing a high quality image will make your site more recognizable, making it easier for users to find your site.
To fully support all browsers, you'll need to add a few tags to the <head>
element of each page.
<!-- 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 and Opera
Chrome and Opera uses icon.png, which is scaled to the necessary size by
the device. To prevent automatic scaling, you can also provide additional
sizes by specifying the sizes attribute.
Safari
Safari also uses the <link> tag with the rel attribute: apple-touch-icon to
indicate the home screen icon.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
A non-transparent PNG that's 180px or 192px square is ideal for the apple-touch-icon.
Including multiple versions via the sizes attribute is not recommended.
Previously, Safari for iOS would consider the -precomposed keyword to avoid
adding visual effects, but it hasn't been necessary since iOS 7.
Internet Explorer and Windows Phone
Windows 8's new home screen experience supports four different layouts for pinned sites, and requires four icons. You can leave out the relevant meta tags if you don't want to support a specific size.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Tiles in Internet Explorer
Microsoft’s "Pinned Sites" and rotating "Live Tiles" go far beyond other implementations and are beyond the scope of this guide. You can learn more at MSDN's how to create live tiles.
Color browser elements
Using different meta elements, you can customize the browser and
even elements of the platform. Keep in mind that some may only work on certain
platforms or browsers, but they can greatly enhance the experience.
Chrome, Firefox OS, Safari, Internet Explorer and Opera Coast allow you to define colors for elements of the browser, and even the platform using meta tags.
Meta Theme Color for Chrome and Opera
To specify the theme color for Chrome on Android, use the meta theme color.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Safari specific styling
Safari allows you to style the status bar and specify a startup image.
Specify a startup image
By default, Safari shows a blank screen during load time and after multiple
loads a screenshot of the previous state of the app. You can prevent this by
telling Safari to show an explicit startup image, by adding a link tag, with
rel=apple-touch-startup-image. For example:
<link rel="apple-touch-startup-image" href="icon.png">
The image has to be in the specific size of the target device's screen or it won't be used. Refer to Safari Web Content Guidelines for further details.
While Apple's documentation is sparse on this topic, the developer community has figured out a way to target all devices by using advanced media queries to select the appropriate device and then specify the correct image. Here's a working solution, courtesy of tfausak's gist
Change the status bar appearance
You can change the appearance of the default status bar to either black or
black-translucent. With black-translucent, the status bar floats on top
of the full screen content, rather than pushing it down. This gives the layout
more height, but obstructs the top. Here’s the code required:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black