How to Change the Color of Header Bar/Address Bar in Chrome for Android

Custom Chrome Header Bar for Squarespace
 
 

In the chrome app on mobile devices, you can change the color of the bar at the top where the URL of the website goes. The standard is an off tone white. With a little bit of code we are can change it to whatever color we choose.

 

This is a small but powerful trick that works well to give your site just an extra little bit of polish

Chrome Bar without Color

Chrome Bar without Color

 
Chrome Bar with Color

Chrome Bar with Color

 
 

To accomplish this we need to insert a bit of code into the header of our site. This process should work on any platform including Wordpress and even just putting it in the <head> tag of a hand built website.

Since we mostly work with Squarespace, I will walk through the steps to do this on that platform

 
 

Adding the Code to Squarespace

Settings → Advanced → Code Inject → Header

 
 

Example Code

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

Blank Code

Just change the "YOUR-COLOR-HERE" section to a color of your choice

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

Hope this quick trick adds a bit of flair to your next project!

 
Squarespace, ArticlesForrest Heath III4 Comments