Codessentials

  • Increase font size
  • Default font size
  • Decrease font size
Home Coding tips Web How do I create a Favicon

How do I create a Favicon

A Favicon is a small image (16x16 pixels), which is shown in your browsers location bar, next to the URL.

How do I create a Favicon .ico File ?

  1. Create an image that is 16x16 pixels in size. You could also use an image you like and resize it.
    But remember, the image has to be in proportion (50x50, 100x100) or your favicon will not look good.
  2. Save the image as an .ICO file. Name it exactly: "favicon.ico" or it will not work. Upload it to your website s root directory (that`s next to your index.htm file).
    If you do not have an editor that can save as ICO, you can use an online ico generator such as the one at GraphicsGuru.
  3. Add the following lines of code inside the <head> section of your pages.

    <link rel="shortcut icon" xhref="http://www.example.com/favicon.ico" type="image/x-icon" />
    <link rel="icon" xhref="http://www.example.com/favicon.ico" type="image/x-icon" />
  4. You re done.

Testing the Favicon

If you are using Internet Explorer and your favicon is not showing up, make sure you clear your browsers cache. You can do it by pressing Ctrl and F5 at the same time.
 

Bookmark

AddThis Social Bookmark Button


Newsflash

Now we have got some coding tips for the developers amongst you!