Easy Way to Create a Favicon to Enhance Your Blog/Website

Based on Wikipedia, a favicon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon is a 16×16 pixel square icon associated with a particular website or webpage. You may see it in the browser’s address bar, located in the left of the url. This lovely mini icon is used as a website identity. Websites that don’t have a favicon only shows a blank paper icon.

How to create it?

Believe me, it’s easy. Favicon as you know, is like a tiny logo of your website, and it’s an image. You may use gif, jpg or png image type to make a favicon. But usually it is an ico file type.

Here it is the steps:

The first step, you must have the image. It’s 16×16 pixel. You may create it using Photoshop or your favorite image editor.

Next step, save your image as .ico file type. This is the most important thing. There are two ways to save your image as .ico file type. First, if you are a Photoshop user, you can’t directly save your image as an ico file type. For default, Photoshop doesn’t have this feature. OMG, a great software like Photoshop doesn’t have this feature! Don’t worry, there is a plugin that can help you to save as ico file type. You may download it freely at http://www.telegraphics.com.au, but the developer needs donation. If you like it, please donate to him.

The second way, if you don’t like to install anything on your PC, you may use online favicon generator. You may try one of these lists (or all of them of course ):

#1 Dynamic Drive (http://tools.dynamicdrive.com/favicon/)

Use this online tool to easily create a favicon (favorites icon) for your site. A favicon is a small, 16×16 image that is shown inside the browser’s location bar and bookmark menu when your site is called up. It is a good way to brand your site and increase it’s prominence in your visitor’s bookmark menu.

#2 Favicon.cc (http://www.favicon.cc)

It’s still beta version. But you may create your favicon online, or just import it from your PC. Sttt… it’s funny, but you may not find favicon in this website…

#3 Degraeve (http://www.degraeve.com/favicon/)

Just like favicon.cc, you can create a new one, or import an image.

#4 HTML Kit (http://www.html-kit.com/favicon/)

Simple favicon generator from HTML Kit.

#5 Favicon Generator (http://www.favicongenerator.com)

Easily create your own custom favicons for free with Favicon Generator.

So…What Next?

The next step is embed your favicon to your blog or website. Usually it is located in your web root directory. For joomla or wordpress users, it is usually placed inside the active template/theme directory. But in implementation, you may place your favicon everywhere, included free image hosting such as imageshack or tinypic, as long as they provide direct image link.

After that, you need to declare favicon in your web. Just add the snippet code below before </head> tag.

<link rel=”shortcut icon” href=”[FAVICON URL]” />

for example:

<link rel=”shortcut icon” href=”images/favicon.ico” />

or

<link rel=”shortcut icon” href=”http://www.hosting.com/favicon.ico” />

Voila! Your favicon is up

Easy isn’t it?