Have you ever noticed while browsing the web on your Android phone that some websites’ address bars change to match with their brand colors?

It’s easier to see visually than try to explain, so here’s a visual of what I’m referring to:

Screenshots of Android phone set up on Google Chrome showing custom colors on website address bars

Have you been wondering how to do this on your own website? I’ll take you through it in this article, or if you prefer check out the video linked below! (or click right here for the video!)

A simple way of enhancing website appeal for Android web visitors

I also have my video (click here or see below) that shows you exactly what you need to do, in case you prefer to watch than read. 

Implementing a change like this improves user experience while also boosting your brand’s visibility and overall cohesion.

I know that when I’m on certain websites that I often visit on my phone, it feels like an extra bit of finesse. The addition of a custom header color on Chrome mobile browser gives the site a native app feel.

So, this is not strictly an SEO tip (which is mostly what I cover on this blog). Nevertheless, it’s a little trick that can help your users feel more at home when visiting your site on their Android mobile device. They’re also, in my opinion, more likely to remember your site if they return.

Change address bar color to match your brand color on mobile

In this article, I’ll take you through step by step how to go from the screen below on the left, to the right. From the gray default Chrome browser, we’ll inject some personality into every page/post on the site.

easy tutorial showing how to change color of address bar on android phone to brand colors with no coding knowledge required

This guide is intended for the non-technical! I’ll show you screenshots that will make it as easy as can be, with no coding knowledge required. In my examples, I’m using Windows and a WordPress website.

Want to know more about starting up your WordPress website if you’re getting started with blogging as a small business owner new to web stuff? Check it out here:

READ MORE  How to set up your WordPress website - step-by-step [GoDaddy domain + Siteground host]

My screenshots are from a Galaxy S8 using the Google Chrome web browser.

Let’s dive in!

Grab your desired HEX code – your brand color

OK, first up before we get into anything technical, you’ll need to decide on the color for your website header. You’ll want to get the 6-digit HEX code for your chosen brand color before we begin. If you don’t have your hex code, go to Image Color Picker.

There, you will be able to upload your logo or other design assets. Or you can simply enter your URL and it’ll come up with the HEX codes for the colors on that page (it even suggests color palettes that you may like!).

screenshot from imagecolorpicker.com showing how to grab a hex code from a website

I’m going to use an accent color for my address bar with the color code #ffc13b in this example.

The more technical option – add this code to your header.php file

This first option is a little more technical in that you’ll need to be confident editing your site’s header.php file. This is found at the following location on your WordPress dashboard:

Appearance > Theme Editor

What you will do is add the following code to your WordPress theme’s header.php  before the  </head> tag:

<meta name="theme-color" content="#ffc13b" />

Of course, you’d change the 6-digit hex code to your desired color, sticking to the HEX code format of ‘#’ followed by 6 numbers or letters.

As you’ll see, find the correct theme file from the php menu on the right then add the code before the closing of that tag.

screenshot showing back end of wordpress website and the header.php section of the theme files

Et voila! This is the end result for one of the websites I own.

A custom colored address bar that's been set on Google Chrome with some simple code

The really easy way option – use an ‘insert headers’ plugin

I found this workaround because this website you’re currently on doesn’t support the above method. You may find this too. I use X Theme on another site, which this example is from. It uses a different method for its theme files, meaning the header.php is blank.

You’ll see something like this if you use X Theme or another theme builder.

screenshot of back end of wordpress site showing nothing in the header.php file because of using x theme page builder

So here’s what you’ll do. Download and activate the plug in Insert Headers and Footers.

Next, simply paste in your line of code:

<meta name="theme-color" content="#ffc13b" />

into the Scripts in Header section:

Using the 'insert headers and footers' plugin that allows site owners to add scripts to the header, body and footer section of their website without accessing the php files

And that’s it! No digging through your php files, hoping you don’t break your site 😉 And the beauty is you can use the plug-in for other instances too in which you need to paste scripts into your header, body or footer.

This method works for any website – just be sure to insert your script before the </head> ends. It may look different depending on your platform!

Thank you for reading – hope that helped you to add a custom branded color to your website’s address bar on mobile! As you can see, it’s a super simple little tip that can add visual appeal that really helps us stand out.

If you liked this article, then please consider subscribing to my YouTube Channel! I’ll be coming out with plenty more blog posts and videos that show small business owners how to optimize their web presence. My channel is still very tiny, so I’d be thrilled to have a few more subs!

Pin your choice of graphic to your Pinterest board and be sure to follow @zoelarkinphoto on Pinterest!

Have you ever noticed while browsing the web on your Android phone that some websites’ address bars change to match with their brand colors? Well learn now how to add a custom color to your website's address bar on Google Chrome for Android! This simple tip couldn't be easier to implement and the good news is you don't need to be a WordPress wiz to make this small change that adds to a more visually cohesive and professional appearance for your brand #wordpress #websitehacks | zoelarkin.com
Change color of website address bar on Chrome Android mobile browser | zoelarkin.com
Adding a custom branded color to your website's address bar on Google Chrome for Android sounds technical but it really is so easy, using just one line of code that you can add to your WordPress website's header.php code. Don't have access to that? I also show you an even simpler way of implementing this design tweak using WordPress plugins. So grab your brand's HEX code - let's start customizing your address bar for Google Chrome for Android mobile! #wordpress #websitehacks | zoelarkin.com
Add a custom color to your website’s address bar on Google Chrome for Android | zoelarkin.com
Zoe Larkin
Zoe Larkin

I’m Zoe, a wedding photographer based in San Francisco! I also help fellow wedding photographers attract their dream clients with actionable SEO & digital marketing strategies. When I’m not shooting weddings, creating content is my passion! Follow along the blog, Insta and my new YouTube channel for photographers! 

want to change the color of your address bar on mobile? Here's how - and it's really easy

Change color of website address bar on Chrome Android mobile browser

back

share this post:

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php