Geek Dashboard

How-To's, Smartphones, News and Reviews

  • Phone Finder
    Phone
    Finder
  • Compare Phones
    Compare
    Phones
  • Viwe All Phone Comparisons
    View All
    Comparisons
  • Home
  • News
  • Smartphones
    • Android
    • iOS
  • Computers
    • Windows
    • macOS
  • Internet
  • Reviews
  • Phone Finder
    • Brands
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 recently 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="https://cdn.geekdashboard.com/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!

Amar Ilindra Facebook Twitter LinkedIn Instagram GitHub

Amar Ilindra is a gadget freak, tech enthusiast and full stack developer. He loves to try everything with technology and blog about his tech experience. Apart from writing, he spends most of this time developing useful web apps and mobile applications for Android and iOS.

Related articles

Mobiles

Install Android M 6.0 on Nexus 5, Nexus 6 and Nexus 9

Android M developer preview
Mobiles

Top 7 Best Android Launcher Apps for Tablets and Smartphones

best android launchers
Computer

How to Delete Files Permanently from your Computer-Jihosoft Free Eraser Review

jihosoft free eraser

Comments

  1. Jules 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. Sethu Senthil says

    July 15, 2017 at 8:17 AM

    Is there some way to change the Android navbar color?

    Reply
    • Amar 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. Jitesh Ghanchi says

    March 6, 2017 at 4:19 PM

    How to apply gradient color ????

    Reply
    • Amar 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. Thomas 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
    • Amar 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. Nella says

    February 25, 2016 at 1:08 AM

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

    Reply
  6. WebMaestro 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
    • Amar 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 *

Phone Finder

Brands

  • Samsung 43
  • Xiaomi 38
  • Nokia 33
  • Motorola 33
  • Huawei 28
  • Asus 25
  • Oppo 25
  • Apple 19
  • Meizu 18
  • Vivo 17
  • Microsoft 12
  • BlackBerry 12
  • OnePlus 9
  • Google 4
  • Acer 2
  • Realme 1

Latest Phones

  • Asus Zenfone 6 (2019) Asus Zenfone 6 (2019) ₹39,999.00
  • Samsung Galaxy A70 Samsung Galaxy A70 ₹28,500.00
Notification History Log for Android

Trending Topics

  1. Samsung Galaxy A32 with 90Hz sAMOLED Display Launched in India

  2. Instagram Launched Live Rooms Feature Globally; Now Up To Four Users Can Join Live Broadcast

  3. Realme GT 5G Listed on GeekBench Revealing Key Specification Details

  4. Sony PlayStation 5 Mext Firmware Update Grants Expandable Storage

  5. Realme Narzo Series and Buds Air 2 TWS Officially Launched 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

Geek Dashboard, a technology blog strives to produce high-quality tech for our readers. Here you will find the latest updates on trending tech news, unbiased product reviews, and how-to guides on various gadgets.

Got a Tip? Write In [email protected]

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