TECH GUIDE BLOG

Tech Guide Programming Tutorial Tips Tricks

How to Make Favicon

Posted by Admin On June - 11 - 2009
favicon_sample

favicon

Sometimes, we look at the browser and see something unique above the browser, left beside the address bar. That’s called favicon. It’s not necessary to make it, but for some reasons, it can raise up your webs honor and pride. See how many websites like microsoft.com and wordpress.org. They must have a favicon, because a favicon can tell you how serious they work on their website, a website that doesn’t have favicon is like an under construction website :(. Here is an example what favicon is looks like.

Doesn’t know how to make it? You can try these simple steps to make it.

  1. Make a square image for your favicon with paint or sumthin’ like that (square is recommended, 300×300 pixels should be enough). Save it with .jpeg or .png format, it’s not must-do but save it
  2. Go to http://www.html-kit.com/favicon/
  3. Upload your favicon image and click generate Favicon.ico
  4. Download the favicon package and extract it
  5. Now, you will be given 2 files, animated and static one, choose one that you desire
  6. Upload it to your website/ FTP server
  7. Add following HTML tags to your web page after the <head> tag but before the </head> tag: <link rel=”shortcut icon” href=”favicon.ico”> (this is for static favicon), <link rel=”icon” type=”image/gif” href=”animated_favicon1.gif” (for animated favicon)  href value is depend from your favicon location on your website, if you want to be like this, you must upload your favicon to your public_html folder
  8. Save your web page.

It’s should be done and you can try to reload or visit your website and see it works.

Popularity: 33% [?]

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay
  • MySpace
  • StumbleUpon
  • Suggest to Techmeme via Twitter
  • Technorati
  • Twitter

Leave a Reply