How to change the color of address bar in mobile browser to match your website

Nowadays most of the websites are responsive websites. This makes your site looks great on mobile devices. However, it still looks and feels like a website. Matching the color of address bar to your website, gives it a native app-like feel. This improves user experience.

Simply add the below meta tag to head section of your page.

<!-- Chrome, Firefox OS, Opera-->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">

The content field has the hex code for the color you want to use as theme color.

By Vivin Antony

Here I write mostly about software, technology, codings, my development/research works or anything that happens to interests me.
I'm a part designer and coder and some how a poor blogger, but trying hard in blog field to become a professional.

Leave a Reply

Your email address will not be published. Required fields are marked *