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:
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 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.
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.
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:
- Black : #000000
- White : #ffffff
- Red : #ff0000
- Blue : #0000ff
- Yellow : #ffff00
- Pink : #ffc0cb
You can check the hex code of any color here: Color-Hex
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 the 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:
- ‘default’ : for normal color
- ‘black’ : for black background
- ‘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.
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:
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:
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.
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.
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>
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.
This is how you can change the color of the address bar to match your brand color. Now let’s summarize this blog post.
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>
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.