Give Your Blog a Favicon!

Apple — Mon, 24 Dec 2007 06:05:22 +0000

“Favicon”, a special word form from “favorite icon”. What is it? It’s the tiny image right beside the URL which appear in your web browser. When you bookmark your favorite websites (with favicon available), you will also notice the favicon will appear beside the title. Most popular websites will have their own favicon. Such as Yahoo! has a red Y! and Flickr has a blue and pink circle. It’s time to make one for your own website or blog!

Today, I’m gonna guide you how to add a favicon to your blog.

First of all, you have to look for an icon image, or create your own icon image, for your favicon. The image can be in either .ico or .png extension. The suggested size of the icon file is 16 x 16. If you want to create an .ico file out of your favorite image (.jpg or .gif), you can easily convert it within seconds!

Make your favicon (.ico) from pics!

Click on the “Browse” button to browse for the picture you want (for your favicon, of course) . Then click the “Generate FavIcon.ico” button. In this example, I intend to generate a donut icon.

When the generate process is done, you can get to preview your favicon. Just click on the “Download FavIcon” button to download it. It will be in a .zip format. Inside this file, there are two version of favicon – normal and animated. Make your choice.

Now you have your favicon ready. You can use the default name of “favicon.ico“.

The next step is to upload your favicon.ico to your web host or any free image hosting service like Photobucket (Take note: some free image hosts do not allow .ico file, in this case, you can choose to make an image in .png format by resizing your image in any image editing software. In this case, you can just skip the above .ico tutorial). And get the URL of your favicon.

Recommend: You can also create your favicon and host it via IconJ.

Then, you will just need to implement a code anywhere in between the tag but not inside the tag of your blog HTML. Use the following code:

Note: replace the “your favicon URL here” to the exact location of your favicon where you uploaded.

For own-hosted Wordpress, you will have to add the above code in your header.php file. You will be able to look for the tag there.

Why do you want to have your own favicon?

It’s a recognition, logo, trademark.
It’s unique and cool.
A more complete theme for your blog / website.

Does your blog have a favicon of your own? Try it out today, if you haven’t.

Edited: 25 May 2008

Blogging For Novice » favicon

Give Your Blog a Favicon!