Geek Dashboard

How-To's, Smartphones, News and Reviews

  • Home
  • News
  • Smartphones
    • Android
    • iOS
  • Computers
    • Windows
    • macOS
  • Internet
  • Reviews
You are at Home » Blogging

How Set Chrome Address bar, Status bar Color and Favicon for your Website in Android Mobiles

Last Updated on March 27, 2020 by Amar Ilindra 10 Comments

How colorful and beautiful Material design is? Google released material design with Android Lollipop. Immediately many frameworks are developed based on this material design, among them I personally tried materialize framework and developed N Queens puzzle using it.

In lollipop you can set your own color to chrome address bar for your website. If you do this, it will automatically change the color of Navigation bar too. The color of navigation bar is darker tint of your address bar color. You’ll know more about this by the end of this article.

I have seen many sites are doing this and very few webmaster know about this. No coding knowledge is required and it is very simple to achieve. All you need to add couple of lines in your website <head> section.

Below are the screenshots to let you know what it actually look. It can be done to Android applications too but it follows bit complicated procedure which I’m not covering here.

change navigation bar color for your website

Hope you are interested to do this for your website right? It will work on any site, it works on blogger, WordPress, Static HTML sites etc.

How to Change Browser Address bar color and Android Status bar color automatically for your website

You need to place the below code inside <head></head> tags.

Most of the WordPress themes have a default option to add scripts in header. In case if you don’t have such option in your theme, Go to Appearance > Editor and add the code in header.php

In blogger or static sites, you can directly add this in to your XML/HTML template.

Meta tag to be added:

<meta name="theme-color" content="#3e82f7">

Additional Information:

  • Replace #3e82f7 with your own color. It should be in hex format. Google recommends to use these colors in material design.
  • Color your mentioned above is applied to Google Chrome address bar and darker 700 tint of same color is applied to Android navigation bar every time someone visits your website.

This is how it looks for Geek Dashboard:

how to change color of google chrome address bar

Limitations

  • It works only on Android Lollipop Smartphones and tablets.
  • It works only in Google Chrome
  • It won’t work in Incognito windows.

Set icon to minimized tab of your Website

I hope about 80% of Lollipop users won’t disable “Merge tabs and apps” feature in Chrome app. It is enabled by default and this will show minimized windows in Chrome along with recently used applications.

disable merge tabs and apps

Android will show your custom icon/favicon here. If no icon is specified, it will show first letter of your website as icon.

We have a way to use our site logo as icon here. Just add the below meta tag in the same way mentioned above.

<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">

Additional information:

  • Using photoshop (Photoshop Alternatives here), create a 192X192 png image and upload it to your site root directory with name android-chrome-192×192.png

Result of above <link> tag:

how to change tabs icon for your website

Limitations

  • Only works if “Merge tabs and apps” is enabled in Google chrome settings.

Let me know if you find any difficulties while adding tags or with hex colors. Use comments section below and I’ll help you out as soon as possible.

#Android#Coding#Geeky Tricks
Posted inBlogging

Spread the Word!

Avatar for Amar Ilindra

Amar Ilindra Facebook Twitter LinkedIn Instagram GitHub

Amar Ilindra is a tech-savvy individual who is passionate about gadgets and new technology. He is a full-stack developer who enjoys experimenting with technology and sharing his experiences through blogging. When he's not writing, he devotes his time to creating practical web and mobile applications for both Android and iOS platforms.

Related articles

News

OnePlus 8 and OnePlus 8 Pro Launched with IP68 Rating and Hole-Punch Display

OnePlus 8 Pro camera
News

Xiaomi 11i and 11i HyperCharge Have Arrived in India Starting at Rs. 24,999

Xiaomi 11i
News

Huawei Watch GT 2 to Go Official in India on December 5

Comments

  1. Avatar for JulesJules says

    December 29, 2019 at 4:12 PM

    Doesn’t anyone think it discourteous to change the colour of the VISITOR’S address and nav area ?

    Please can someone tell me how to block this intrusive colour change ?
    Thanks

    Reply
  2. Avatar for Sethu SenthilSethu Senthil says

    July 15, 2017 at 8:17 AM

    Is there some way to change the Android navbar color?

    Reply
    • Avatar for Amar IlindraAmar Ilindra says

      July 17, 2017 at 10:41 AM

      No, we can not do it. Only Android apps can change the navbar color. We can not do it from the web browser.

      Reply
  3. Avatar for Jitesh GhanchiJitesh Ghanchi says

    March 6, 2017 at 4:19 PM

    How to apply gradient color ????

    Reply
    • Avatar for Amar IlindraAmar Ilindra says

      March 6, 2017 at 6:58 PM

      You can not apply gradient color. In case if you find any website doing it, kindly drop the link. We’ll try to figure it out.

      Reply
  4. Avatar for ThomasThomas says

    May 20, 2016 at 9:00 PM

    It showing
    The element type “meta” must be terminated by the matching end-tag ”

    What to do now? how to fix this ?

    Reply
    • Avatar for Amar IlindraAmar Ilindra says

      May 22, 2016 at 8:22 PM

      Try this code:
      In blogger, we have to close the meta tag explicitly. so, we added a / before closing meta tag.

      Reply
  5. Avatar for NellaNella says

    February 25, 2016 at 1:08 AM

    Thanks, tinted bar now works on my site http://www.drenusha.com

    Reply
  6. Avatar for WebMaestroWebMaestro says

    February 4, 2016 at 6:52 PM

    Thanks for this great post. But it doesn’t appear on all sites. I asked my friend to visit my blog, but she said that the adress bar is still uses default color. But there is no problem when I visit with my own mobile.

    Reply
    • Avatar for Amar IlindraAmar Ilindra says

      February 4, 2016 at 7:35 PM

      This will only work in Android Lollipop and Marshmallow and only on Chrome browser. Make sure your friend meets both above conditions. Reply to this comment with your website link and we’ll check from our end too.

      Reply

Comment Policy:

The comments section is aimed to help our readers in case of any questions or you can even appreciate us for our hard work. Every comment is strictly moderated before approving it.

Your name and comment will be visible to the public. Never share your personal information in the comments section.

Leave a Reply Cancel reply

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

Over 1,30,286+ Followers

Join to get latest updates from Geek Dashboard

Facebook Twitter Telegram Pinterest YouTube Instagram

Recently Published

  1. Lenovo Yoga 9i 2-in-1 Laptop with 13th Gen Intel Core i7 Launched in India

  2. Lenovo Tab P11 5G Launched with 11-inch 2K Display and Snapdragon 750G SoC in India

  3. How To Select All Photos on iPhone and iPad Quickly

  4. iQOO 11 5G with Snapdragon 8 Gen 2 SoC and 120W Fast Charging Launched in India

  5. Realme 10 Officially Launched with 90Hz AMOLED Display and Dual Cameras in India

Geek Dashboard Placeholder

Download the apps and never miss a story from us

We put a lot effort and resources in writing our articles and we believe it is our responsibility to satisfy your tech hunger. We will keep you filled forever!

  • Get Geek Dashboard App from Google Play
  • Get Geek Dashboard App from Chrome Web Store
Geek Dashboard Logo

At Geek Dashboard, we are dedicated to bringing you the latest and greatest in technology news, reviews, and how-to guides. From smartphones to laptops, and everything in between, we've got you covered.

Got a Tip? Write In tip@geekdashboard.com

© 2012 - 2023 · Geek Dashboard, product of ikva eSolutions

Blog Advertise About Jobs Contact Privacy Policy Write For Us T&C Office Setup

No dogs were injured while working on this website because we love them