Have you noticed that most popular websites like Hubspot, BBC and Facebook are providing their own brand colors 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 a 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.
Brand Personalization has grown tremendously over last few years, publishers and organizations today are adapting to Responsive website designs for uniform accessibility across mobile devices, tablets, and ordinary laptop/desktop computers.
Customizing the color of the website address bar is another advance step towards visitor personalization. This is primarily done for all responsive websites and very easy to do for WordPress supported websites in particular.
In this article, I am sharing details about the process for getting the brand color of your choice when a user visits your site by typing URL in the Chrome web browser. However, please do note that currently, it works only for Google Chrome on Android devices using Lollipop or newer versions.
Step 1: Identify right hex color 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 can 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
in 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.
Step 3: That’s it, Final result
Your website should now appear with your brand color on Google chrome browser
Brand personalization is poised to grow further, changing address bar’s color as per your brand color is just a step towards unique brand recall, and this also ensures a unique app-like feel. Visitors are more likely to remember your brand with this feature than ever before. Adoption of this pattern has increased significantly and slowly all or most of the growing brands will surely customize the address bars more for their visitors.