Geek Dashboard Home
  • News
  • Smartphones
    • Android
    • iOS
  • Computers
    • Windows
    • macOS
  • Internet
  • Reviews
  • Tools
    • Password Generator
    • iFrame Tester
Search Geek Dashboard
Home • Blogging

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

Amar Ilindra • Updated March 27, 2020 • 3 min read •

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.

Blogging Android Coding Geeky Tricks

Be the Change!

Spread the word and help us create better tech content

Facebook Twitter Reddit WhatsApp Pinterest
Avatar for Amar Ilindra

Amar Ilindra

•
Facebook 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.

Read all 480 articles from Amar

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

  2. Avatar for Sethu SenthilSethu Senthil says

    July 15, 2017 at 8:17 AM

    Is there some way to change the Android navbar color?

    • 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.

  3. Avatar for Jitesh GhanchiJitesh Ghanchi says

    March 6, 2017 at 4:19 PM

    How to apply gradient color ????

    • 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.

  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 ?

    • 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.

  5. Avatar for NellaNella says

    February 25, 2016 at 1:08 AM

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

  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.

    • 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.

Over 1,30,286+ Followers

Join now to get all latest updates from Geek Dashboard

Facebook Twitter Telegram Pinterest YouTube Instagram

Recently Published

  1. TAGRY X08 True Wireless Earbuds Review: Budget-Friendly Excellence with Long Battery Life
  2. Why Are Tech Lawsuits Becoming the New Normal in the US
  3. My Experience of Using TuneFab Amazon Video Downloader
  4. Wondershare Dr. Fone 13 Review - The Ultimate Mobile Toolkit for iOS and Android
  5. TOZO OpenEgo Review - Is It a Reliable and Practical Headphone?
  6. Samsung Lost its Crown as the Top Foldable Smartphone Seller Worldwide

Download the Apps Now

We put a lot of effort and resources in writing our articles, and we believe it is our responsibility to satisfy your tech hunger

Download Geek Dashboard Android App on Google PlayAndroid App onGoogle Play Download Geek Dashboard Extension on Chrome Web StoreBrowser Extension onChrome Web Store
Geek Dashboard Logo

Geek Dashboard brings you the latest and greatest in technology news, reviews, and how-to guides. From smartphones to laptops, drones to VR and everything in between, we've got you covered

Got a Tip? Write In? tip@geekdashboard.com

© 2012 - 2025 · 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