• 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

  • MISC

    Tweaking!

    I have the mood to tweak my blog yesterday and Nessa was here to witness the Winter Xmas template but I had to change it back to Cutline as the Winter Xmas template is not compatible with the latest wordpress version. I also changed to a different template after that but my husband said it was to crowded so I settled back to Cutline. As I wanted to add the favicon, I did some tweaking with the header.php file and uploaded it back to the server. To my surprise, the template changed to its original version!! Lol! I forgot that I downloaded another file of Cutline (downloaded it for a blog development I was working on last month) and overwrote the one that I already tweaked! I spent 3 hours to change it back to my likings!! Heh! Crazy me and my tweaking habit!

    Here’s the winter Xmas template:

    ..and here’s the Bizmaniac (maximum tweak) template that my husband said was too crowded:

    Here’s the old Cutline:

    …and here’s the new Cutline:

    I was kinda bored of the animated header so I changed to a static one and made it a bit wider. I’m not fully satisfied with the header, will change it when I have the time; right now, I’m catching up with illustrations for children’s magazine, Pendidik! The graphic designer is going to chase me anytime now! Been sitting on it for four days already!

    Oh, while I was at it, I upgraded to wordpress version 2.8 already! This time I don’t have to wait for the hosting server 😛 to make it available via Fantastico. I did it within the dashboard! How cool is that!

    1st commenter
    Spiffy