How to Customize the Android Address Bar Color for Your Site in 1 Minute

If you use an Android smartphone, you may notice the address bar for some of your favorite websites using a themed-color. Here are a few popular examples:

A simple customization, this tweak allows site owners to present their pages to select viewers with a bit more style. Speaking of style, the site used in the video is one of my clients: Rashad Webb. Rashad’s a style and fashion expert in New York City, so why not match his digital style with his physical style? Check out the final result right here.

I’ll be using the Divi theme in this demonstration, but the same method applies to any site; just place the following code in the head tag (the one that looks like this: <head> </head>):

<meta name=”theme-color” content=”#123456″>

The hex value (the part that says #123456) will just need to be changed to whatever color you want.

Steps:

  1. Paste <meta name=”theme-color” content=”#123456″> in a text editor.
  2. Visit your site.
  3. Find an element on the site that uses the color you’d like to define.
  4. Right-click on the element and select “Inspect Element”.
  5. In the window that appears near the bottom of the screen, locate the color and copy the 6 digit value that appears next to it.
  6. Replace “123456” in the above code with the 6 digit value just copied.
  7. Copy the entire line of code from your text editor.
  8. Paste that code in the head tag of your website.

Check out the video below for a click-by-click tutorial.

About the Author

My professional experience with the web reaches back more than 8 years. During this time, I've been developing sites for individuals and businesses, working on a team of digital experience analysts as well as providing qualitative and quantitative research surrounding web and mobile technology.

Jonathan

Web Strategist

Check these out too:

Pin It on Pinterest

Share This