How to create an favicon.ico and improve your website

Radu Poenaru's picture - used for creating a favicon.ico in this website

As a business card represents your business or your position in it, the same applies to a website. By using a Favicon to you will improve your website personalization and when users will bookmark you, the picture will always remember them about you. Thus, the favicon is critical to it’s identity.

We might consider the favicon placed in a website is like your photo in your ID Card. As the photo enhances the chances that people identifies you, they can identify also your site by a favicon. But you have a unique one in order to not be confused with someone else. In this article I’ll help you on how you can add a favicon to your website in general or on WordPress blog in particular.

First step in adding a favicon to your website is to have one. Thus, you need to create the favicon image. There are many ways to do it, like the expensive one -you might ask your custom designer to create one just for you, if your business needs also a distinctive and professional logo. Most designers will create it without asking – it became a default option in a design package.

But for personal sites, where you want to present your ideas and because the budget doesn’t compares to a company, you might want to design this by yourself and it can be done easily. Just pick an image of your own or one that you like from your site (beware on copyrights for images grabbed from internet). Perhaps if you already have a logo, you can also use it. Then rescale it with your preferate image editing tool into the dimension of 16 x 16px. Then save the file as .png, so you can then convert it to .ico format.

Note: For the users of Adobe Photoshop – this tool does not let you save the file in .ico format. But as always, there are some workarounds for you to solve this.

Either you can use an open source software called GIMP or Irfanview which are like a substitute to Photoshop in certain areas, but with just the important options. To use it, just save the file in Photoshop, open it in Irfanview, and it lets you save in .ico format.

Another way to do it is to use an online converter. These tools which are all over the internet lets you convert your preferate image to an .ico format. A very nice place to choose a tool like this is  55+ Extremely Useful Online Generators.

After creating  the .ico file, the next step is to rename it to favicon.ico. Then you have to upload it to to your root directory where the site resides.

Then, you need to edit your php or html  file which is responsible of generating your head (as in HTML head ) in your template or website folder. You can use for this an html editor or editors like Notepad or Notepad++ in your computer, or via WP-Admin Panel.

The code responsible for adding this icon on your website’s page must be put before the closing head tag: </head>

<link rel="icon" href="http://www.radupoenaru.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="www.radupoenaru.com/favicon.ico" type="image/x-icon" />

Change radupoenaru.com to your website’s address, and then upload the file.

That’s it!

Enjoy