How to add a Favicon to your Website/Blog

http://www.alexallied.com/wp-content/plugins/sociofluid/images/digg_16.png http://www.alexallied.com/wp-content/plugins/sociofluid/images/reddit_16.png http://www.alexallied.com/wp-content/plugins/sociofluid/images/dzone_16.png http://www.alexallied.com/wp-content/plugins/sociofluid/images/stumbleupon_16.png http://www.alexallied.com/wp-content/plugins/sociofluid/images/delicious_16.png http://www.alexallied.com/wp-content/plugins/sociofluid/images/blinklist_16.png http://www.alexallied.com/wp-content/plugins/sociofluid/images/blogmarks_16.png http://www.alexallied.com/wp-content/plugins/sociofluid/images/furl_16.png http://www.alexallied.com/wp-content/plugins/sociofluid/images/newsvine_16.png http://www.alexallied.com/wp-content/plugins/sociofluid/images/technorati_16.png http://www.alexallied.com/wp-content/plugins/sociofluid/images/magnolia_16.png http://www.alexallied.com/wp-content/plugins/sociofluid/images/google_16.png http://www.alexallied.com/wp-content/plugins/sociofluid/images/myspace_16.png http://www.alexallied.com/wp-content/plugins/sociofluid/images/facebook_16.png http://www.alexallied.com/wp-content/plugins/sociofluid/images/yahoobuzz_16.png

Preparing the Favorite Icon

If you have Photoshop knowledge, you can make your own icon image. Start with a 64×64 image and after you’ve finished your creation, resize it down to 16×16 and save it as .ico file. If you do not have the icon file format in Photoshop, you can download it here.

Download Photoshop .ico file format. Right-click on the link and and click “Save Link As…” to download. Place it under your Photoshop > Plug-Ins > File Formats folder.

For those who doesn’t play with graphics, or too lazy to make one, you could generate one using any images you like from this service at Chami.com

Or, you could use some of these ready-made Christmas-themed icons I’ve collected from the Internet.

Just right click on any of them and Save Image As “.ico” file.

Upload it to a webserver

Upload your favicon file to your webserver, if you have one. Or, you could place them on image hosting services like ImageShack, or Photobucket. Or, if you’re using Blogger to blog, you can just upload your icon file in their “Create Post” editor.

Execute the Icon from the Code

Put the following code within the <head> and </head> tags zone in your HTML or webpage.

<link rel="Shortcut Icon" href="http://www.alexallied.com/favicon.ico">

Just replace the URL of the icon with your own and you’re done! Enjoy your website/blog with new personalized favicon!


16 Comments »

  1. avatar lilian Says:

    Hey, thanks for the tips. Had wanted to do this for a while but dunno it is called favicon and hence, can’t google for the instructions. :)

  2. avatar cyber-red Says:
  3. avatar Alex Says:

    lilian, cyber-red: Glad that I could help!

  4. avatar Wuching Says:

    you’re a life saver!

  5. avatar IngSia Says:

    Alex, you should open a class. LOL

  6. avatar Alex Says:

    IngSia: Good idea hor. You wanna invest?

  7. avatar Ing Sia Says:

    AHAHHAHA! yea. If u guarantee the returns. I don’t like to take risk la. U know la. Limited resources, so..boh bien. LOL

  8. avatar Su Says:

    Hi Alex,

    you mentioned above that I can

    “Blogger to blog, you can just upload your icon file in their “Create Post” editor.”

    I tried uploading the .ico file i created with chami.com, but it said that the file wasn’t supported. Any idea of the next step I should take? I have a flickr account, but its not supported there too. Woe is me…hurhur

  9. avatar Deepa Says:

    Just like Su, I would also like to know whre i can upload icon files.Blogger / photbucket / imageshak are not accepting icon files.
    I want to use a certain icon file in my blogger.
    Can you please guide me
    Thank you
    Deepa

  10. avatar royal Says:

    I can’t get it to work. It’s on the server. the code is there. What am I doing wrong?

  11. avatar Jürgen Says:

    Great Post. Very helpfull informations. Thanks a lot. Jürgen from Germany. :-)

  12. avatar JasonM Says:

    I think everyone should have a favicon!

  13. avatar Angelus Says:

    Thank you! I tried using an .ico favicon and it didn´t work but then I uploaded a .gif icon in Imageshack and it worked perfectly! Thank you again!

  14. avatar nicolas Says:

    I just found one free favicon generator.
    http://www.webscriptlab.com, Free and easy to use online tool that can create a favorites icon (favicon.ico) images for browser address bars, favorites and tabs, from pictures, logos and other graphics.

  15. avatar aNGEL Says:

    Thank you! I tried using an .ico favicon and it didn´t work

  16. avatar Dudewtf Says:

    Dude, thanks, i thought i just had to rename an image file extension to ico, and place it in the public_html home directory, lol i was wrong

RSS feed for comments on this post. TrackBack URL

Leave a comment