Favicons are an often overlooked but essential piece in any successful website.  They help your viewers to recognize your page amidst the slew of other tabs and pages that they might have open in their browser at any particular moment.  The favicons are located in the upper left hand corner of the web browser tab as indicated in the photos.

Favicons are most often the "logo" of the site and in today's fast paced electronic world, the favicons are often identical to the "app" symbol that would be used for the phone app version of the same site.  Favicons are essentially .gif files that are either 32 x 32 pixels or 16 x 16 pixels.  As such, the chosen image or logo is best if it is scalable and recognizable when it is very small.

The image above are some examples of some of the most well known logos as favicons.  Below is an image of where these favicons appear on your browser window.

Making a Favicon is as easy as following the following steps.

1. First create a perfectly square image that you will use for a Favicon.  For this example we will use Photoshop but you can use many different software editing platforms.  Note: Photoshop will tell you that you have to purchase or download a separate application plugin but this is not necessary.

2. Once you have the image in photoshop click 'Command+Shift+Option+S' or under File click 'Save for Web'.

3.  Make sure the size is 32 x 32 or 16 x 16, the format if GIF and the Transparency is on.

4. Name and save the file as 'favicon.gif'

5. In finder (or windows explorer) navigate to the file.  Control-Click (or Right Click) on the file and click 'Rename File'.  Rename the file to 'favicon.ico'. It may ask you if you are sure that you want to rename this file.  Say yes.

6. Now you simply upload that file into the 'Root folder' of your server.  The root folder is usually called public-html or something like that.  Once that file is in the root folder, it should come up in the upper left corner when you are loading your page.  If you are using wordpress, you must upload the favicon.ico file into the template folder for it to work.

Its as easy as that, I hope this helps you in some way.   Please leave comments below.