UK Support 01392 914033 Offices are currently closed

How to add a favicon

23rd January 2015 Graphic Design, Tutorials

Recently I was asked how to add a favicon to my website. What is a favicon I hear you say? Favicon’s are the little image you see on your browers tabs. Favicon’s are a geat little feature to any website. It’s a great way for your clients, who will be using your site to know which site is yours when they have multiple tabs open. Below are examples of some favicon that you would see in everyday use on the web.

The favicon can also assistances your client in seeing your site, when they book mark your site. The favicon shows a sign of trust and creditably. With your logo the client can tell that they are on your site and not someone’s cheap copy. This is also a great way to be set apart from your competitors, with a right image that they will remember.

Let’s get down to it and build that over needed favicon…..

Getting Started

Firstly, design the icon you would like at the top of your tab, just before the title. Make sure that the canvas for the favicon is square and no bigger than 100px x 100px (remember the favicon is going to be small, so don’t worry about too much detail but you do want it to stand out).

After you have designed you favicon, go online to www.favicon.co.uk. Upload your newly design icon to the site, choose any size that you like. I mainly use 32px x 32px, just a nice size. After it has been uploaded, download it from the site, this should only take a few seconds.

Now that you have done that, open up your FTP file manager. Find and download the relevant file with your <header> in it. If you are using a popular CMS like wordpress or Joomla, I’ve placed the file location below.

  1. WordPress: public_html/wp-content/YOURTHEME/header.php
  2. Joomla: public_html/templates/YOURTEMPLATE/index.php

Now you have found the file, download it. Open the file up in your prefered editing tool i.e. notepad, Abode Dreamweaver etc.

Within that file add the code, making sure it’s in the <header>.

[pastacode lang=”markup” message=”” highlight=”” provider=”manual”]

<link type="image/x-icon" href="/favicon.ico" rel="shortcut icon" />

[/pastacode]

Save the file and upload the favicon and newly edited file to your server, in the right place in your server, so that the web can find it.

It can take up to an hour to be displayed on your website, so don’t worry that it’s not there straight away. Go have a coffee read the paper, come back and refresh your site. You should now have a lovely new favicon on your tab!

If you wanted us to do this for you or if you are needing a new website, don’t forget we offer web design services. If there are any questions drop me an email ([email protected]), and I would be more than happy to help. Alternatively leave a comment below and I will get back to you.

Facebook Twitter LinkedIn Email