How to Create a Favicon

Posted on March 18, 2008

Did you see a little image to the left of my fatihsyuhud.com address url in your browser? It’s called favicon. Favicon can only be installed in a self-hosted blog / website or in a free blog / website where user is allowed to access the template such as blogger.com / blogspot. Now, however, wordpress.com allow bloggers to use favicon too with specific way. See the how-to here for wordrpess.com favicon.

Here’s how to make a Favicon and Install it into Blog / Website

1. Create a favicon image online by uploading any image from your computer here. Click the “Generate Favicon ico.”

2. Name it favicon.ico and save it to your computer.

3. Upload the saved favicon into your website locate it at the same place with index.php (it applies to self-hosted wordpress) or index.html, or index.asp. In my case, I uploaded the image into http://fatihsyuhud.com/favicon.ico

4. Insert the following code in your blog or website header. In the case of self-hosted blog, put it in theme header:


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

5. Save. And done.

Favicon technical definition:

Favicon (pronounced fav-ai-kon) is short for ‘Favorites Icon.’ A Favicon is a multi-resolution image included on nearly all professional developed sites. Within Internet Explorer and Firefox the Favicon is displayed on the Address line and in the Favorites menu. The Favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor’s browser. Often, the Favicon reflects the look and feel of the web site or the organization’s logo. See for example the Favicon of this website where I use my own picture.

Filed Under Blogger Indonesia Tags: blogspot tutorial, favicon how to, wordpress tutorial