Have you noticed that the most popular websites like HubSpot, BBC, and Facebook are providing their own brand colors for their address bar in mobile browsers? Yes, that’s right—it can now be customized to suit the brand color of your choice. If you are looking to create a similar unique experience for your website visitors, you are in the right place.
In this blog, we will talk about 3 simple steps to change the address bar color for your website visitors on the mobile browser. This is specifically true for Android mobile browsers or Chrome. Please note that it currently works only for Google Chrome on Android devices using Lollipop or newer versions only.
Step 1: Identify right hex colour code for your brand?
A few of you might already be aware of your brand color’s hex code, but for those who do not, please revisit your logo. we use a very simple tool called “HTML Color Codes.” All you need to do is upload a jpeg of your logo and it will identify the right hex code for you. Copy it and keep this handy for future reference and usage. Here is the link to use this tool. Apart from this, you can also use any image editing software, like Adobe Photoshop, Paint, etc., to identify the hex code for your brand’s logo.
Step 2: Add this code
Inside your theme or child theme‘s header.php file just before the closing </head> tag.
<meta name=”theme-color” content=”#DB4453″ />
*Hex code here, of course, is our brand color, you will need to change this as explained in step 1 above with your logo color.
Step 3: That’s it, Final result
Your website should now appear with your brand color on Google Chrome browser or any other browser on android devices. here is how our website appears now.
While there are multiple ways to do this, we explained the 3 simplest steps to achieve this—by simply adding a small code to your header (HTML).