Press "Enter" to skip to content

How to change the Address Bar color of your Site for Mobile Browsers?

Have you ever thought, why some sites look more professional than others? There are many reasons which make a site look more professional than others. It includes good design, unique content & interesting blog posts. Today I’m gonna share with you a step-by-step guide on how to change the address bar color of your site for mobile browsers for both Blogger & WordPress users.

Have you ever noticed, some popular sites like Facebook, YouTube, Quora use their own brand colors for search bar in mobile browsers?  If you are reading this post in mobile browsers, then you can see the black color in the address bar. A preview is shown in the below image:

How to change the address bar color of your site for mobile browsers?

Why Change the color of the Address Bar?

Changing the color of the address bar to match your brand color or theme color makes it look more professional. It helps in improving the user experience.

According to a recent news, visitors love to stay long in a well-designed web page. Thus, it affects the bounce rate of your site. Overall, it makes your blog unique & professional. I myself love to use black color in the address bar as my theme color is black.

[click_to_tweet tweet=”“There are tons of different factors that go into ranking well, but the biggest is high-quality content.” @fulltechhelp” quote=”“There are tons of different factors that go into ranking well, but the biggest is high-quality content.””]

How to change the Address Bar color of your Site for Mobile Browsers?

In this tutorial, I will tell you how you can change the color of the address bar for various browsers like Chrome, Firefox, Opera, iOS Safari & Windows phone.

Check Out :  How to add Custom theme in Blogger?

The first step in order to change the color of the address bar is to know the Hex code of the color you want in the address bar. Some of the basic color codes are:

  1.  Black     :   #000000
  2. White    :   #ffffff
  3. Red         :   #ff0000
  4. Blue        :  #0000ff
  5. Yellow   :  #ffff00
  6. Pink        :  #ffc0cb

You can check the hex code of any color here: Color-Hex

See Also:

Meta Tags for Different Browsers:

You can easily change the color of the address bar for mobile browsers just by adding a few meta tags in the <head> area of your site. The meta tags for different browsers are different and is given below:

1. For Chrome, FireFox & Opera

Here we know how to change the color of address bar in google chrome, Firefox & Opera. For common browsers like Chrome, Opera & Firefox you have to add the following meta tag in the header of your site:

<meta name="theme-color" content="#db5945">

Here default color is orange (#db5945). You can change it in the above code.

2. For iOS Safari

There are some limitations in the case of iOS Safari. Here you can only add black color to your address bar. Here color codes are also different as:

  1. ‘default’  : for normal color
  2. ‘black’      : for black background
  3. ‘black-translucent’   : for address bar color to be black & translucent

The piece of the meta tag, you have to use here is shown in below quotation:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

3. For Windows

Additionally, if you want to change the address bar color in Windows phones then you have to add the following meta tag:

<meta name="msapplication-navbutton-color" content="#000000">

Here you are free to use any color code as shown in the above quotations.

Check Out :  How to add Paypal Donate button on Blogger (Step-by-step Guide)

Now let’s know how to add these meta tags in Blogspot & WordPress. Here is the step by step guide:

For Blogspot Users:

Blogspot users can easily change the color of the address bar by following the below steps:

Step 1: Visit HTML Editor of your Blogspot Blog

In the first step, you have to visit the HTML editor of your theme. Follow the following settings: Blogger >> Themes >> Edit HTML
You can also check the below screenshot:

How to change the address bar color of your site for mobile browsers?

Step 2: Paste the above codes below the <head>

Here you need to paste the above codes below the <head> of your theme. Follow the below screenshot:

How to change the address bar color of your site for mobile browsers?

Add the meta tags & press the Save Theme button. Now visit your Blogspot blog & you will see the change in color in the address bar of your site.

[click_to_tweet tweet=”How I changed the color of the address bar of my Blogspot blog in mobile browsers? #fulltechhelp @fulltechhelp” quote=”How I changed the color of the address bar of my Blogspot blog in mobile browsers?”]

See Also:

For WordPress Users:

There are many plugins which can help you change the color of the address bar of your WordPress site. Well, here is a step-by-step guide to change the address bar color in WordPress without using any plugin.

Step 1: Visit Theme Editor in WordPress

Similar to Blogspot in WordPress, you have to visit the theme editor of your WordPress blog. Follow the following settings:  Appearance >> Editor as shown in the below image.

How to change the address bar color of your site for mobile browsers?

Step 2: Visit Theme Header (header.php)

As shown in the below screenshot first visit Theme Header & then paste the above code just before the closing head tag i.e. </head>

Check Out :  Use Click-to-Tweet on Blogger [Blogspot] : The Ultimate Guide

How to change the address bar color of your site for mobile browsers?

After adding these meta tags to your WordPress theme, Click on Save Changes and visit your WordPress site in mobile browsers. You will definitely see the changes in your site’s address bar.

[click_to_tweet tweet=”How I changed the color of the address bar on my WordPress site for mobile browsers? #fulltechhelp @fulltechhelp” quote=”How I changed the color of the address bar on my WordPress site for mobile browsers?”]

This is how you can change the color of the address bar to match your brand color. Now let’s summarize this blog post.

Summary

In this How to post, we have discussed how you can change the color of the address bar in mobile browsers. All you need to do is to add the meta tags in the <head> of your theme. You can copy the meta tags from the above guide and then follow these steps:

For WordPress Users: Visit WordPress Dashboard >> Appearance >> Editor >> Theme Header and then paste the above meta tags just before the closing head tag i.e. </head>

For Blogspot Users: Visit Blogger Dashboard >> Theme >> Edit HTML and then paste the above meta tags just after the starting head tag i.e. <head>

[click_to_tweet tweet=”How I changed the address bar color of my site using this step-by-step guide? #fulltechhelp Follow @fulltechhelp” quote=”How I changed the address bar color of my site using this step-by-step guide? “]

Following these steps, you can easily change the color of the address bar for mobile browsers in both Blogspot & WordPress. I hope you get this tutorial. Share this post with other bloggers & let them know how to change the address bar color of your site for mobile devices. Let me know your thoughts in the comment box.

Check Out: Add PayPal Donate Button to Blogger & make supplementary income

[Total: 0    Average: 0/5]

Harish Joshi
Harish Joshi

Harish is a professional web designer & a passionate Blogger. Here he shares latest tech tutorials on Blogger, WordPress, SEO & Digital Marketing.

View all posts

53 Comments

  1. Edward Edward

    Thanks for the info I needed that. Great article

  2. FlySoulmates FlySoulmates

    I was thinking to change a color! Thanks for sharing!

  3. I really love reading this blog, you have such great content, and you made me so much more aware of stuff I never knew about!✌️

    Keep up this great work!
    Thanks for sharing

  4. This is exactly the kind of info I want to share more of on my page. I will definitely link back to this in a post. Thanks!

  5. Very helpful article! Thank you for breaking it down for us non-tech savvy people!

  6. OMG, this is so much fun and can’t wait to try this!

  7. Sahara Sahara

    Very informative. I learned something today.

  8. How cool, I didn’t know how to do this. I might have to try it out for some color fun!

  9. Oh that’s cool! i have never thought about changing the color of my site address bar but why not!

  10. I need to try this. I need to also be more observant of websites that I visit to see if they have color.

  11. Neil Alvin Nicerio Neil Alvin Nicerio

    Great! Your article is really amazing! 🙂 Thank you so much for sharing si informative.

  12. Thanks so much for sharing this. I had no idea it was possible to make the change! I have a blogging bootcamp part of my blog and love learning new things to share with others!

  13. Cassie Cassie

    This is a great informative post

  14. Nice one! HARISH! I will try to do this! hope it works! thanks for sharing!

  15. Wow this is interesting… I wanna change it :D… I hope it works for my website… Thank you soo much will share this post with my followers too 🙂

  16. Emma Riley Emma Riley

    Wow! Awesome tips you have there. Actually, I really don’t know that it can be change? You really are IT savvy. Thank you for this and keep sharing.

  17. UX is everything and so important! We must always take it into account. Thank you for sharing!

  18. Thanks for such wonderful insights. This was a great read. Looking for forward for more amazing tips and tricks.

  19. Aaaahhhhhh…you brought back the website building memories from high school….this is good.

    Colour has this thing it plays with our eyes!

  20. Wow! I like these kind of tips to improvise blog look. Thanks for sharing this article. Looking for more such articles

  21. Olga Zak Olga Zak

    Very helpful article! It is very informative. I will try to do this. Thanks for sharing.

  22. I never knew that you could do this. So handy to know for future reference x

  23. Great article! I struggle with the appearance of my site. I am always trying to figure out how to make it more professional.

  24. I never knew this was a possibility! I will have to give this a try, thank you for the tutorial.

  25. Oh, how fun, I really want to do this. I learn something new every day. I’ve always used color cop to find the right colors but I’ll check out your suggestion as well.

  26. I didn’t realize that people actually change the color of their browser bar.

  27. That’s really great info. Thank you for that, so helpful!

  28. Thanks for this informative post. A great suggestion to change the color of the address bar to match your brand colour!

  29. Kelly Kelly

    I can’t wait to try this on my own blog. Thanks for sharing.

  30. An interesting tool! Thank you for the easy-to-follow breakdown

  31. Pretty cool. Didn’t even know you could change it. Going to change mine to purple to match my site! Thanks!

  32. That is so cool I never thought about this.

  33. I love learning new things that can keep me motivated in the tech realm!! Thanks!!

  34. Great article! I never thought about changing my browser color until now! Thanks for the tips!

  35. Thank you for posting this! It took me so long to figure this out! The last thing I am is a tech guru, LOL!

  36. This is great informations! Thank you so much for sharing this: I’m going to give it a closer look and see what changes I might want to make.

    • Hi Reene, thanks for your comment. You can easily change the address bar color of your site for mobile browsers by following the above instructions.

  37. Blair villanueva Blair villanueva

    I never though if changing the bar color, however this is cool. No need to call your coder.

    • Thanks Blair for your comment. You can subscribe to my newsletter for more such interesting posts.

  38. Thanks for sharing, can you do more tutorials that affects the blogger users too.

    • Yes, I’ll do more tutorials on Blogspot soon. You can subscribe to our newsletter for latest Blogger tutorials directly into your inbox.

  39. this is such a cool information. never knew i could tinker these things

    • Hi Cat Uy, you can easily change the address bar color by this guide. Thanks for your comment!

  40. I’ve always wondered how some sites did this and it does add to the feel while using the web. Not to mention it’s super cute!

    • Hi Valerie, thanks for your comment. Many sites like Facebook, YouTube etc. do this to look different from others. Well, you can also change the address bar color of your site for mobile browsers by following the above tutorial.

  41. What a wonderful post! This is a much simpler task then I would have thought it to be. Thanks for sharing! 🙂

  42. I was wondering if it were possible to do this. I even began searching Google for tutorials.
    This post is very helpful and the best I’ve read so far.
    Thank you so much for Sharing. I’ll let you know how it turns out.

    Cheers!

  43. Jessica Taylor Jessica Taylor

    This is such a great idea! My blog is very colorful, so I’d love to add some color to the address bar!

  44. Oh wow! This is new for me and sounds interesting. Thanks for sharing.

Leave a Reply

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

%d bloggers like this: