Solved: How to get mobile phones to display your brand colours in the URL bar

If like me you kept stumbling across more and more websites on your phone with customised brand colours in the URL bar then you might have been thinking…

How awesome does ‘insert website’  look on my mobile phone!! I’ve gotta have that for my website!

And you can. In this guide I’ll teach you exactly how to update your website so that your brand colours appear when being viewed on Android 5+, Windows Phones & iOS.

Why would you want to change the colour of the URL bar?

Having your brand colours appear in the mobile browser URL bar can help to distinguish your brand and let users know that they’re in the right place.

Is this brand awareness trick going to last forever? No, as more people adopt this practise in to their website design the wow factor will disappear so update yours now and jump on the band wagon while you can!

If at this point you have no idea what I’m walking about then take a look at the pictures below.

Mobile Browser Brand Colours URL

Droid-life.com was the first website I noticed customising the URL bar to their pink brand colours. On the right is the BDG website with it’s brand yellow. The developer documents show multi-coloured tabs in the tab preview mode but I believe this feature has been removed since the documents were last updated.

How to customising the URL bar colour for WordPress website

First of all you need to find the Hex value of the colour you want to be displayed in the URL bar. If you’ve got this then great, move onto step 2. A hex value is a 6 digit value with a # symbol before it that represents a colour. See an example of Hex colours.

Step 1 – Finding your Hex Code:

The easiest way to do this is ask someone who knows, just kidding. Go wipe the dust off your laptop / PC.

  1. Open up Firefox browser
  2. Press F12 for developer tools
  3. Click the eye drop tool (top right)
    • If you can’t see the eye-dropper tool
    • Click the settings cog
    • Tick ‘Grab a colour from the page’
    • Back to step 3
  4. Click on your brand colours.

You now have the brand Hex code copied to your clipboard. Alternatively you can also do this in Microsoft Paint if you have an image with your brand colours.

URL-Bar-colour-code

Step 2 – Updating your WordPress header file:

Don’t worry you don’t need any coding skills whatsoever. Just follow the instructions below and you’ll soon be showing off your funky new brand colours to everyone.

Login to your WordPress dashboard:

  1. Click Appearance > then click Editor
  2. On the right hand side find (header.php) & click
  3. On the line below <title> add the code below
    • Make sure to change the hex value for your own colour
  4. Click update file.

This line of code with work on Chrome Mobile, Firefox Mobile, Opera Mobile and Vivaldi Mobile.
<meta name="theme-color" content="#f8cd67">

This line of code will add Windows Phone Support
<meta name="msapplication-navbutton-color" content="#f8cd67">

This line of code will add iPhone / iOS Support
<meta name="apple-mobile-web-app-status-bar-style" content="#f8cd67">

That’s it, now when you view your website on mobile you’ll be seeing your custom URL brand colours. If you can’t see it straight away try refreshing your browser.

I’d love to hear how you get along customising the mobile URL bar colour for your website. Let me know in the comments below.

Leave a Reply