How to add a favicon for my website?

When you browse a website, you may notice a little icon on top of the web page(on the tab header of the browser, right in front of the site title). This is called favicon meaning “Favorites Icon”.  As a webmaster, you may never use a favicon until you build a serious website.  How to add a favicon for your site?

First, you need to prepare an image file for the favicon. The image file is typically named after “favicon.ico” and has the size of 16*16 pixels. You may find it impossible to create an .ico image using mspaint or similar programs in Windows. Do not worry. You just need to create an image in any format such as .png, .jpg, etc. Then go to here to convert it to .ico format. Now you have two options to add the image as your website’s favicon:

    • Put the favicon.ico under your website’s root directory and that is all. When visitors browse your website, the browser will fetch “http://yourwebsite.com/favicon.ico” automatically and display it on top of the web page.
    • Add a tag in the header of your web page:

      Note that this method allows to use any image name and format for your favicon rather than the “favicon.ico”

 

Now you should be able to make a favicon for your website. Knowing these methods, you can even download favicons from other websites. First, try to download the favicon from “http://otherwebsite.com/favicon.ico”. If that does not work, which means the favicon file is not put in the root directory of the website as “favicon.ico”, you should view the source of the web page and find the <link> tag, which indicates the location of the favicon image. Then you just save that link to your computer, or open that favicon file in the browser and right-click the favicon image in your browser and save it to your computer.

Posted in tips of hosting