Use This Simple Tweak To Change Chrome Address Bar Color For Your Site



This is a small branding tip/tweak I would like to share with you today. I’m a big fan of logos, especially the ideology behind it, and the color combination to represent the brand. Each & every brand under Slashsquare will have a color combination or a singular color to represent the brand. If you compare the two screenshots below, you can see the first one is the default Google Chrome window with the white address bar, but in the second one, with our tweak, we made it into somewhat dark grey, which is the color representing DeviceBAR.

If you want to do like this for your website, then copy the code below (don’t forget to change the color matching your logo or brand), and paste it just above the </head> tag (mostly in header.php file), save the theme/template! That’s all

<meta name=“theme-color” content="#3F3D3D" />

Do try this with your website and share the results with us! :slight_smile:

"Empty Cache and Hard Reload" a Website using Chrome's Developer Tools

And <meta content='#00ACF5' name='twitter:widgets:link-color'/> for theming twitter feed widget. :slight_smile:


This is an interesting tip mate, can you share your output please? A screenshot? :slight_smile:


ya bro Kindly share the Screenshot bro :slight_smile:


@pradeepkumar & @mskian Yup bro. Sharing. Slowly slowly. #JioUser #1GBFinished :sweat_smile:



P.S. It might not look good here, in this forum, but it can look good if you use this on your blog/website with your theme color. :slight_smile:


Check in
I’m Already using this :slight_smile:


@Shivansh @the_mcnaveen Let me Try


Already using it didn’t knew previously how it works then installed Address Bar Changer Plugin & Noticed the code and added to header.php. :slight_smile:


Hi Pradeep,

I am using Genesis Child theme. Will this code work if I add it in the Header Scripts option in Genesis theme settings. Also Do I need to add the code under the tag or above the tag?

Thanks in advance :slight_smile:


Hi @ashwani597, I think “Header Scripts” option should be fine bro, but still, if you can find header.php file in your theme, it’ll be easy to identify </head> and paste the code above this tag bro. :slight_smile:


Yeah bro. I know where the Header.php is, but just wanted to confirm if it was under the tag or above it since you had previously written under the tag. Got confused :joy:
Thanks Bro :slight_smile:


Haha, yea bro, edited the post now. :smiley:


This is kinda off-topic to this Post. If possible let me know what plugin are you using for those social sharing icons on mobile devices?


DeviceBAR blog’s theme is custom-made bro, those social share icons are coded by 7Span team for us. :slight_smile:


Oh. OK. Got it. Thanks Bro :slight_smile: (Y)


Not working for my blog. Purged the cache too.


Did you try this in Google Chrome (mobile) bro? Or?


Yes, I always use Chrome as my primary browser.


I’m getting this ‘Yellow’ color bro, what about you? :slight_smile: