Change address bar color in Chrome tutorial

📂 Category: Featured, HTML/CSS

🖺 Last modified: 28th Jan 2020

💻 Experience: Beginner

🕑 Read Time: 3 min

Chrome users must have noticed their browser address bar color change when visiting certain websites. Usually, the color changes according to the website color palette. This tutorial will show you how to change address bar color in Chrome and give a nice visual enhancement to your website.

Why change address bar color if it works in Chrome only?

Google Chrome is by far the most popular browser both on smartphones and computers. In the early 2020., it’s average market share in the smartphone segment was around 65% (over 80% by some reports). From our own Analytics report, 75% of HowTo WordPress Tips visitors are using the Chrome browser.

Since changing the address bar color in Chrome is a pretty simple tweak, you should probably consider enhancing the visual experience for at least 65% of your mobile website visitors.

Google Chrome supports custom address bar color since Version 39 released back in 2014. Even if this option is available for quite some time, not many websites benefit from it. Another reason to take this opportunity to visually enhance your website and stand out from the rest.

Examples of how to change address bar color in Chrome

Almost all most popular websites change address bar color when opened in Chrome mobile browser. Here are just a couple of examples.

How to change address bar color in Chrome

All you need to change address bar color in Chrome is adding a <meta> tag to your website’s <head> section. Since this tutorial is intended for beginners, we’ll give you a step by step guide on how to do it. If you’re a more experienced developer comfortable with editing WordPress theme files, skip this part and just copy the code snippet below into your website’s <head> section.

  • from your WordPress Dashboard access the Theme Editor (Appearance → Theme Editor)
  • in the files list on the right of the screen locate and open the file header.php
  • copy the code snippet below and paste it between the opening and closing <head> tags, preferably after the already present <meta> tags
  • change the color code #322d4a inside the pasted <meta> tag according to your needs
  • save the changes
<meta name="theme-color" content="#322d4a">

Pro Tip: When editing WordPress theme files, we suggest creating a Child theme. That way the modifications to your theme files won’t get lost if you update the original theme. To learn how to create Child themes, consult the WordPress Theme Handbook.

The <meta> tag above changes Chrome browser address bar color to the color you specified inside the content=”” argument. To see the changes open your website using Chrome on your smartphone. In case you did everything correctly, but the browser’s address bar is still default gray, clear your browser’s cache and reload the site.

More browser color change tweaks

In this tutorial you learned how to change your website’s address bar color in Chrome. Now you can furthermore enhance the the browser’s appearance when visitors open your website. For example, a nicely styled browser scrollbar would be a nice add-on to your custom address bar color. Check out our following tutorials and learn how to style your browser’s scrollbar: