How to Change Your Favicon

A favicon as you can see from the graphic above is a small image that represents your logo for your business. A favicon is a great example of why you need a logo that can be easily identifiable in very small sizes. A lot of new websites or businesses that are new to the web do not have a favicon on their website or will just have the default one that is associated with a standard WordPress installation or other CMS software installation.  This blog is meant to help someone change their favicon in general, but every website is different and in some cases it may be more tricky than others and will require more work than other websites.

Steps to change your Favicon

1) Create a 16×16 pixel image.

This should represent your business as your logo or a part of your logo such as the first letter of your business name if your logo is just your name.  You should be able to do this with photoshop, paint, or another image editing software.

2) Convert to ico format.

This can be done by simply right clicking and resaving your favicon image as favicon.ico. This will change the image format to the proper favicon format.
3) Upload the Favicon to your website
If you are working with a CMS than you will automatically have a file with a head section that will most likely be something like head.php or the head will be part of the header.php file. The head of your website will be calling on the favicon image as a meta tag. To get to your header or head file you will need to connect to a text editor that can either access the FTP through the server such as Aptana or Sublime or download your site onto your computer using something like Git and reupload it when you have made the changes.
4) Make sure the head portion of your website is calling the Favicon properly.
Your head should have a link calling on the favicon. In a typical site it is going to look something like this:
<link rel=”shortcut icon” type=”image/png” href=”/images/favicon.ico” />
Essentially, you need to make sure the head file is pulling the correct favicon image which can be put into an images folder or the theme directory if you are using a CMS. The above example will pull the favicon.ico image from the ‘images’ directory, which is located in the root of your website. You could access this image directly by going to ‘www.example.com/images/favicon.ico’.