Anyone with an Android device which uses Chrome for Mobile might have noticed a nifty piece of functionality which lets websites set their chrome tab colour. A recent version of Chrome for Android introduced this functionality into the app, so it’s sensible to expect that we might see it bleed across the chrome suite. Maybe even on Chrome for desktop?
You might have seen a few websites start to introduce this as an extra way to brand your site on the net:
Thankfully, this feature is super easy to implement into your own website or blog. It’s as simple as one line of code that is dropped into the <head> section of your website. If you’re new to websites or blogging, I’ll show you how to do this in WordPress, along with in a standard website not using a blogging platform.
The code you need is the following:
<meta name=”theme-color” content=”#db5945″>
It’s then as simple as switching out the hex colour code – the 6 digit number in between the speech marks – for the colour of your choice. If you wanted a yellow tab, you might use ‘#ffd315’ or ‘#e62117’ if you wanted to use a pink. The nice thing is, you can contrast your chosen colour with your website header design to create a perfect fit. An example of this would be Facebook, or my own site Stuff Stack.
Great, so now we know the principle for how it’s done, how do you actually get it running on your site?
On WordPress…
Probably the simplest, but not exactly the most elegant, solution would be to do this via a WordPress plugin. In less than a couple of minutes you can install the ‘Header & Footer‘ WordPress plugin, which will automatically let you directly insert snippets of code into the <head> and <footer> sections of your website.
Note, this is also how any website managed through a content Management system, like Squarespace, will let you manage this. Simply find the area to insert code into your <head> section, and paste like below.
On WordPress with Genesis…
As regular Pixel Whizz readers might know, I’m a firm believer that the Genesis framework for WordPress is the best theme framework available for the blogging platform. An added win with Genesis is that it automatically adds <head> and <footer> editing options without the need for an additional plugin.
Simply navigate to Genesis > Theme Settings and scroll down to the bottom. Paste the code with your chosen colour inside the header scripts box and click save.
Voila!
Directly in your site files…
If you run a site that isn’t created via a content management system, you might find it a tiny bit harder to do this. However, the process is still fairly straight forward.
Log in to wherever your website is hosted, and find your template file that contains the <head> section of the site. For simple sites, this might be an ‘index.html’ file, or for slightly more complex sites, perhaps a ‘header.php’ file.
Insert the code we copied above into your template files like so, using a text editor like ‘Sublime Text’ or ‘TextEdit.’
Go do it!
It really is pretty simply to accomplish, if you’re looking to change your website tab colour in Chrome for mobile. Hopefully moving forward Google should start to implement this functionality across their suite of apps – desktop, iOS and more.
You’ll be ahead of the curve!
![Complete Social Media Image Sizes Guide Ready For 2017 [Infographic]](http://pixelwhizz.com/wp-content/uploads/2016/11/SOCIAL_IMAGE_GUIDE-150x200.jpg)
