How to change the address bar color in Chrome, Firefox, Opera, Safari



In your mobile phone, Have you ever noticed a website's address bar turning to a color that matches its theme color? It gives users a unique experience to feel your brand color when they visit your website. Most browsers such as Chrome, Firefox, Opera supports this and It will work on Android, IOS and windows phones.

Just look at the following code, How simple it is to make your users feel the color of your brand: 
<meta name="theme-color" content="#F15A23">
In the above tag, you need to change value for "content" attribute to match your website theme color. For example if your website's base color is green then you can have the content as content="#57A91B".
 
My website theme color is orange, so i set it as content="#F15A23". It renders like the one shown below:



Below code changes the address bar color in chrome, firefox, opera, windows phone, safari
  
<!-- Chrome, Firefox OS, Opera -->
<meta name="theme-color" content="#4285f4">

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">

<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">

Note: 
In iOS, Unless you specify full screen mode the meta tag described above will not work. You can enable the full screen mode in safari by adding this meta tag:
 
<meta name="apple-mobile-web-app-capable" content="yes">


 


Comments (1)
Leave a Comment