Have you noticed that most popular websites like Hubspot, BBC and Facebook are providing their own brand colours for the address bar in mobile browsers? Yes, you are right, it can be customized now to suit the brand color of your choice. If you are looking for creating a similar unique colored experience for your website visitors, you are at the right place. In this blog, I will talk about 3 simple steps to change address bar color for your website visitors on the mobile browser, this is specifically true for andriod mobile browsers. Please do note that currently, it works only for Google Chrome on Android devices using Lollipop or newer versions only.
Step 1: Identify right hex colour code for your brand?
Few of you might already be aware of your brand color’s hex code, for those who do not, please revisit your logo, I used a very simple tool called “HTML Color Codes” all you need to do is upload jpeg of your logo and it will identify 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 could also use any image editing software like Adobe Photoshop, Paint, etc. to identify 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 my 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 andriod devices. here is how my website appears now.
While there are mutiple ways to do this, I explained the 3 simplest steps to achieve this by just adding a small code in your header (HTML)
Let me know if it worked for you as well.
Neeraj is a Tech Marketer with 9+ years of experience in B2B Sales and Marketing. At StepToInbound, Neeraj writes about Website, Search, Social Media and Marketing Automation practices.