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

You may also like

223 Comments

          1. Bem is bz
            i am bz
            Nessa is in the toilet
            Ken is bz with shop
            Jia is not around
            TH is sometimes around
            Khemy is working
            Marzie is bz
            Diya is hilang
            Balqis also hilang
            sapo lagi ado?

              1. but in my line of work.. we do have a detailed weekend report come friday.. hahaha.. it is something like the repot above.. hehhehe

  1. Emila! Having probs la commenting here. after i comment it takes me to a warning msg page, dunno why, then I refresh it says duplicate comment then I pressed back arrow, then only can see this page again! Thrice edi today…hmmmm….

  2. WOOO ! Cantik giloss template Kak Emila ! 🙂 Lama betul tak jenguk . Cehh ! Spiff , kali ni orang tak bagi peluang . Spiff dah top first commenter . Bagilah Fara satu . Ecewah ! 😛

  3. kak emi, ho w to make the favicon appear on the blog list? it appear on the tab, but not the blog list…
    owh, love the dolly kak emi! nice meeting you ~

    1. wan i think in the layout setting you need to add ‘Blog List’ instead of ‘Link List’. The favicon will appear automatically but it won’t appear for those who doesn’t have one. But I think mine is not appearing as well in the blog list. Dunno why 🙁

Leave a Reply

Your email address will not be published. Required fields are marked *