10th Install Favicon into your Blog

A Favicon is a 16×16 pixels PNG or GIF image that you see at the beginning of the address line and bookmarks too. Below are the pictures of before and after installing the favicon.

nofavicon.JPG

favicon.JPG

Here’s how you install it.

Create 16×16 pixels PNG or GIF image that represents your blog. You can do this by using Paint. First you create a normal size of the picture. Then use the Stretch and Skew function to reduce the size to 16×16 pixels. You can check the size using Attributes function. Save the 16×16 pixels image as favicon.ico file.

Upload the file to you blog under root folder. The root folder is actually referring to “public_html/”. So login to cpanel –> file manager –> public_html and upload the favicon.ico file. Go to “Theme Editor” of your wordpress and click on “header”. Include the following codes after <head> or before </head>

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

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

Replace XXXXXX with your domain name. Click the “Update File” button and refresh your blog. Your icon should be appeared if all are done correctly.

Comments

comments

Both comments and pings are currently closed.

8 Responses to “10th Install Favicon into your Blog”

  1. Frank C says:

    One other hint is that sometimes the favicon won’t show up until you clear the browser cache or restart it.

  2. Kumo says:

    Thanks for the tips Frank. Glad that you shared your experience.

  3. Breezie says:

    I like to see the favicons used, it gives the site a much more personal feel.

    I have used one for years on both my blogs.

  4. Kumo says:

    Yes, I like it very much. I’ve been searching and wanted to install it for quite some time. I finally get to do it and I think a lot of us would like to do the same. That’s the reason why I post it. It’s a simple task but if we don’t know the details then it might take some time to do it.

  5. Laura aka NastyMcT says:

    Thanks! I always wondered how that was done, and didn’t know it was a “Favicon”. 🙂

    Laura
    http://www.nastymct.com

  6. Kumo says:

    Glad to know that this post helps.

  7. I use free tool at animatedfavicon.com. This one works great and its fast

  8. Kumo says:

    Thanks for the info.