When I visited Facebook mobile some time ago I noticed that the address bar has changed from the usual white and black to Blue like Facebook, I was surprised. Also naij.com a Nigerian news portal has this for a long time now, so I was fascinated and wanted the same thing for one of blog.
I thought it was a custom made, because these guys are big brands and they have lots of developers, so I set out to research on how to change address bar color of a website or blog then I found out the solution.
It’s just by adding a simple Meta tags to the <head> section of your website and the address bar will change whenever your site is visited with a supported browsers and devices. The process of changing the color of the address bar is very simple and straightforward.
Changing address bar color
Add this code in your theme or child theme‘s header.php file just before the closing </head> tag or if you use an header & footer plugin which you use in adding google analytics tracking code to your site, that can be use also. If your theme or child theme has header and footer built in for example genesis theme just added it to the wp_head section.
For those that don’t use wordpress or any CMS you can add the code to the <head> section before the closing </head> of your source code
<!-- Change address bar color --> <meta name="theme-color" content="#81d742">
This line is a HTML Meta tag used by Google Chrome on Android to change color of address bar in mobile browser. You can use an online color picker like HTML color picker tools. Or if you want to pick a color from your web page, then use a browser extension like ColorZilla.
You can also add a logo which will be used as a bookmark icon, upload a png image to your server then use the image link and add to the code below then place it just below the color or above, whichever you want.
<link rel="icon" type="image/png" href="IMG URL" sizes="192x192">
Replace IMG URL with the link to your .png image file.
Use the comment box below incase you need help or has an idea to share.