As a website design company it’s sometimes easy to forget the little bits and pieces that go towards making a website look great. The favicon is just one of those little things that we at Orange Pixel install on our customers’ websites at no extra charge and without really thinking about it.

So what is one?

If you take a glance up towards the top of your Internet browser at the tabs showing you all the websites you have open you’ll notice that next to some or all of them there’s a little graphic before the words. This is the favicon.

whats a favicon

It’s a very small icon file stored on your web hosting server but for a very little thing it holds an amazing power. Your brand becomes visible even when your website isn’t.

When people flit between lots of websites they tend to open new tabs all the time and then, when they need to switch back, they scan along the row to look for the right one. Having a favicon makes that job a whole lot easier for them (after all most of us recognise pictures more quickly than we read words) and therefore helps register your logo, your brand, in their minds.

and how do I get one?

If you don’t have the benefit of a pay monthly web design service with changes and updates included at no extra cost you will either have to approach your web designer to do it for you or do it yourself.

The good news is that it really isn’t too hard do to it yourself but you do need to be reasonably confident in finding your way through the html (or php) code that is stored on your web hosting and able to manipulate or crop images (in this case your logo).

  1. The first stage is to edit either your entire logo or a portion of it to a square shape. The reason for this is simply that the favicon that you produce has to be square. Remember that it will end up very small so if your logo consists of your name e.g. “Ronaldson and Sons Family Solicitors” then by the time it’s shrunk down to favicon size it will be unreadable! In this kind of case it might be best to create a square with a big R and your company colours.
  2. Once you have your square logo go to one of the online favicon generators (we use http://favicon.htmlkit.com/favicon/) and generate the favicon.
  3. The next bit is potentially the most tricky for the technophobe. You need to take the favicon.ico that you created before and upload it to the root folder of your website.
  4. Then you have to put a line of code into the top area of every page of your website.
    The line is this,
    < link rel="shortcut icon" href="favicon.ico" >

    or, if you choose an animated favicon, this,
    < link rel="icon" type="image/gif" href="animated_favicon1.gif" >

If you are using a system such as WordPress, Joomla or Drupal which generates your web page dynamically the code will need to be put in the page template (in WordPress it goes in the header template, header.php)

And “Voila!” your favicon should appear after you refresh the page. If it doesn’t you may well need to clear your browser cache (Google it – there’s not enough space to cover that here!)