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:
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.
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:
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!).
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.
Et voila! This is the end result for one of the websites I own.
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.
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:
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!
Zoe Larkin
I’m Zoe, a wedding photographer based in San Francisco! My style is candid, capturing authentic moments for my couples all over the Bay Area and Northern California. Creating content is my passion! Follow along the blog and Insta!
nice article thank you for sharing.
You’re welcome!
Thanks, Zoe!
Several things happened close together and I think the Insert Headers plugin will do the trick. Ican’t check it out right now but I’m super glad to know I can write my own Header JS in X and Pro!
I put in a favicon with a blue background, but forgot to version it so it stayed as-was on my machines. My ISP, DreamHost (Mega Stars) migrated my sites to an upgraded server. Checking my sites, I saw the blue Chrome status/address bar in the same blue as the favicon background. Maybe there’s a Real Favicon theme color setting but, thanks to you, I know where to look.
Best with your weddings! I’ve shot three, if you don’t count the one on Tri-X in about 1977, because I couldn’t say No to some friends. They turned out really well (the weddings AND the friends), but I’ll leave that to the more visionary. My approach is photojournalistic, as is yours, because my left brain stifles my right’s creativity.
Blessings,
Alan