What is a favicon?

A favicon is a small 16px by 16px image that is displayed inside the browsers address bar and bookmarks (or favourites) menu. The word “favicon” is short for “favourites icon” and it is a great way to add some branding to your website. You can see the little bomb image that we use as a favicon here at cre8ive commando  below (and also in the address bar above).

How to create a favicon for your website

Creating a favicon is quite simple and can take as little as a few minutes to do. I’ll be showing you how to firstly create your favicon in Photoshop then how to include the favicon in your website. Simply follow the 4 steps below to add your favicon to your website.

1. You will need to download and install the .ICO plugin for photoshop. This will allow you to create .ICO files. Simply download it then unzip the “ICOFormat.8bi” file into the photoshop plugins folder: C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins\File Formats
2. Now open up photoshop and create a new document 16px by 16px in size. Resize your logo or part of your logo to fit into this tiny 16px square. Once you are happy with how your favicon looks you need to save it as an .ICO file. To do this go to “File -> Save As” and give it the name “favicon.ico”. Be sure to select the .ICO file format from the drop down list.
   
3. Once you have saved your “favicon.ico” file you need to transfer the file to the root directory of your website server. This can be done using your favourite FTP program. I use Filezilla.
4. Now we just need to include the favicon in our website. This is as simple as inserting the following code into the head of your website:

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

That’s it, you’re done! Now you have a favicon for your website and it only took a few minutes to set up (You may need to close your web browser and re-open it to see your favicon).

Related posts:

1. Two great ways to embed a font in your website