How To Change Chrome Address Bar Color For Your Website

Updated On: Wednesday, April 5, 2017

In this guide, I would like to share a simple tweak which will allow you to customize the Chrome Address Bar Color for your website. If you notice, many of the popular websites are using this tweak to match the address bar color with its brand logo, which will attract the users. This is considered as one of the branding tricks. Recently, One of the users has approached me asking the steps for the same. Hence today I’m sharing the steps to achieve this for your website.

This tweak is based on WordPress website and applicable on Chrome mobile browser on Android.

Since Google Chrome mobile version 39 for Android, it is possible to add custom color instead of the default color to your website’s address bar. With one line of code, you can achieve the same.

How To Steps:

1. Open your WordPress active theme header.php file. This can be found under Appearance > Editor > Header.php in your WordPress Admin login.

2. Now paste the below code above the </head> tag.

<meta name=”theme-color” content=”#1e73be” />

Replace #1e73be color code with your desired site color combination code to make it perfect.

The content field contains the HEX code of a color. You can find the HEX code of your desired color using many tools. This meta tag is used by Google mobile browser to convert the default color.

After adding the code, the address bar of your chrome mobile browser will be changed when loading your website.

Apply the tweak and make your branding powerful. Do comment below for any doubts and clarifications.