Home » Web

How to Make a Favicon

13 February 2011 No Comment

How to Make a FaviconHave you ever noticed the little icon next to the address bar in your web browser?

It is called a favicon, short for favorite icon, that is represented by a 16×16 pixel square icon.

The question you want to know now is…how to make favicon 2011? How can you create your own favicon? Does it require any special software?

No, all that is required is a graphics editor like Photoshop or Gimp.

  1. To create the image, start with a new image the size of 500×500 pixel square. Be creative and design your own personal icon.
  2. Once you”ve designed your icon, scale your image down to 16×16 pixels.
  3. Save the icon as a PNG and use PNG Compression. Save the icon as favicon.png.
  4. Since most web servers are configured to accept favicons with the filename favicon.ico, rename favicon.png to favicon.ico.
  5. Upload your favicon to your web server.
  6. In your HTML code, add the following code:
  7. <link href=”/favicon.ico” rel=”shortcut icon” type=”image/x-icon” />

    The “link href” code should be between the <head> section of your HTML code.

  8. If you go to the site where you uploaded your favicon, you should be able to see it now.

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.