computer/internet

Adding Favicon to your URL

I had favicon last year but when I changed template I somehow forgot to put it back. Lol! Yesterday, while tweaking my blog, I took the chance to put it back, this time with different image. Last time I had the pink heart as favicon. Now I’m using a character from one of my illustrations.

So, what is Favicon?

Favicon is actually a favourite icon or url icon, which is 16×16 pixel square icon associated with a particular website or webpage.

Do you want to put one in front of your URL?

Ok , here’s the process:

  1. First of all, you need an image. It can be anything; simple name initials, shapes, your own face, your cat’s face, etc. Make sure you crop only the part you want as Favicon.
  2. Go to this url: http://www.html-kit.com/favicon to convert your image to .ico format.
  3. From the website, browse your image in the ‘image to use’ box and click the ‘generate favicon.ico button.
  4. Voila! you already have a favicon image! Next, download the favicon package to your computer. You should have two versions of the favicon; one static and the other one animated. Choose the one you like. The favicon.ico in the package has 2 image formats in a single file:
    16*16-pixel 256-color and 32*32-pixel 256-color.

Installation (this is the readme.txt file from the downloaded package)

A. Installing the favicon with animation

  1. Upload favicon.ico and animated_favicon1.gif to the root of your web folder.
  2. Add the following HTML code to your web page, in between <head> and </head> tags:

<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" type="image/gif" href="animated_favicon1.gif" >

B. Installing the favicon without animation

  1. Upload favicon.ico to the root of your web folder.
  2. Add the following HTML code to your web page, in between <head> and </head> tags:

<link rel="shortcut icon" href="favicon.ico" >

Well, that’s about it! If you’re not sure whether it has been installed properly or not, you can check the the html-kit validator.

Ok for those of you who want a precise steps for both both wordpress and blogspot platform, below is how.

WordPress:

  1. upload your favicon.ico file to your public_html folder on your wordpress server using an ftp application.
  2. Locate and edit your header.php of your wordpress blog theme folder. Depending on the theme you use, locate the header.php folder and edit the file by adding the following code in between the <head></head> tag:
    <link rel="shortcut icon" href="favicon.ico" >
  3. Save your header.php file and upload it back to the server.
  4. Refresh your browser and voila! If you don’t see it immediately, no worries, it’ll be there in no time.

For blogspot:

  • Visit this website for a detailed how-to: Favicons Made Easy. Will try it on my blogspot blog later when I’m free!

1st commenter
Spiffy

223 Comments